未接收视频，onicecandidate 未执行

Question

所以我按照本教程学习如何实现 WebRTC 服务器-客户端设置。一旦我开始工作，我想将客户端分成两部分，一个发送者和一个接收者。现在他们可以相互建立连接，但接收者永远不会从发送者那里得到流。

我设法确定原始代码和拆分版本之间的代码流保持不变，只是两个对等方都不执行 onicecandidate 事件。

根据这个，我需要明确包括OfferToReceiveAudio: true和OfferToReceiveVideo: true因为我使用的是Chrome，我做到了，但它似乎没有任何区别。

目前，它们都从对方接收 SDP，peerConnection 中有本地和远程描述，并且iceGatheringState是“新的”但iceConnectionState正在“检查”（与他声明的第二个链接也应该是“新的”不同）

当像这样一分为二时，他们为什么不交换 ICE 候选人？

发件人.js

const HTTPSPort = 3434;
const domain = '127.0.0.1';
const wssHost = 'wss://' + domain + ':' + HTTPSPort + '/websocket/';

// Feed settings
const video = true;
const audio = true;
const constraints = { "audio": audio, "video": video };

var videoContainer = null, feed = null,
	pC = null, wsc = new WebSocket(wssHost),
	pCConfig = [
		{ 'url': 'stun:stun.services.mozilla.com' },
		{ 'url': 'stun:stun.l.google.com:19302' }
	];

function pageReady() {
	// Check browser WebRTC availability
	navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
		videoContainer = document.getElementById('videoFeed');

		// Get the feed and show it in the local video element
		feed = stream;
		videoContainer.srcObject = feed;
	}).catch(function () {
		alert("Sorry, your browser does not support WebRTC!");
	});
}

wsc.onmessage = function (evt) {
	if (!pC) {
		// Initiate peerConnection
		pC = new RTCPeerConnection(pCConfig);

		// Send any ice candidates to the other peer
		pC.onicecandidate = onIceCandidateHandler;

		pC.addStream(feed);
	}

	// Read the message
	var signal = JSON.parse(evt.data);
	if (signal.sdp) {
		log('Received SDP from remote peer.');
		pC.setRemoteDescription(new RTCSessionDescription(signal.sdp));

		answerCall();
	} else if (signal.candidate) {
		log('Received ICECandidate from remote peer.');
		pC.addIceCandidate(new RTCIceCandidate(signal.candidate));
	}
};

function answerCall() {
	pC.createAnswer().then(function (answer) {
		var ans = new RTCSessionDescription(answer);
		pC.setLocalDescription(ans).then(function () {
			wsc.send(JSON.stringify({ 'sdp': ans }));
		}).catch(errorHandler);
	}).catch(errorHandler);
}

function onIceCandidateHandler(evt) {
	if (!evt || !evt.candidate) return;

	wsc.send(JSON.stringify({ 'candidate': evt.candidate }));
};

接收器.js

const HTTPSPort = 3434;
const domain = '127.0.0.1';
const wssHost = 'wss://' + domain + ':' + HTTPSPort + '/websocket/';

var remoteVideo = null,
	pC = null, wsc = new WebSocket(wssHost),
	pCConfig = [
		{ 'url': 'stun:stun.services.mozilla.com' },
		{ 'url': 'stun:stun.l.google.com:19302' }
	],
	mediaConstraints = {
		mandatory: {
			OfferToReceiveAudio: true,
			OfferToReceiveVideo: true
		}
	};

function pageReady() {
	remoteVideo = document.getElementById('remoteVideo');
	icebutton = document.getElementById('checkICE');
	icebutton.addEventListener('click', function (evt) {
		console.log(pC);
	})
};

wsc.onopen = function () {
	// Initiates peerConnection
	pC = new RTCPeerConnection(pCConfig);

	// Send any ICE candidates to the other peer
	pC.onicecandidate = onIceCandidateHandler;

	// Once remote stream arrives, show it in the remote video element
	pC.onaddstream = onAddStreamHandler;

	// Offer a connection to the server
	createAndSendOffer();
};

function createAndSendOffer() {
	pC.createOffer(mediaConstraints).then(function (offer) {
		var off = new RTCSessionDescription(offer);
		pC.setLocalDescription(off).then(function () {
			wsc.send(JSON.stringify({ 'sdp': off }));
		}).catch(errorHandler);
	}).catch(errorHandler);
}

wsc.onmessage = function (evt) {
	// Read the message
	var signal = JSON.parse(evt.data);

	if (signal.sdp) {
		console.log('Received SDP from remote peer.');
		pC.setRemoteDescription(new RTCSessionDescription(signal.sdp));
	} else if (signal.candidate) {
		console.log('Received ICECandidate from remote peer.');
		pC.addIceCandidate(new RTCIceCandidate(signal.candidate));
	}
};

function onIceCandidateHandler(evt) {
	if (!evt || !evt.candidate) return;

	wsc.send(JSON.stringify({ 'candidate': evt.candidate }));
};

function onAddStreamHandler(evt) {
	// Set remote video stream as source for remote video HTML element
	remoteVideo.srcObject = evt.stream;
};

Answer 1

你忘了iceServers。改变

pCConfig = [
    { 'url': 'stun:stun.services.mozilla.com' },
    { 'url': 'stun:stun.l.google.com:19302' }
];

到

pCConfig = {
    iceServers: [
        { urls: 'stun:stun.l.google.com:19302' }
    ]
};

此外：

• url已被弃用，使用urls。
• mozilla stun 服务器已停用，因此请节省一些时间并排除它。
• mandatory并OfferToReceiveAudio已被弃用。使用offerToReceiveAudio.
• mandatory并OfferToReceiveVideo已被弃用。使用offerToReceiveVideo.

提示

使用 Promise 的荣誉（与教程不同）！请注意，您可以返回它们以压平事物：

function createAndSendOffer() {
    return pC.createOffer(mediaConstraints).then(function (offer) {
        return pC.setLocalDescription(offer);
    })
    .then(function () {
        wsc.send(JSON.stringify({ sdp: pC.localDescription }));
    })
    .catch(errorHandler);
}