javascript - 没有收到视频，onicecandidate 没有执行

Question

所以我关注了this tutorial了解如何实现 WebRTC 服务器-客户端设置。一旦我开始工作，我想将客户端分成两部分，一个发送者和一个接收者。现在他们可以相互建立连接，但接收方永远不会从发送方获取流。

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

根据 this我需要明确包含 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 有 been deprecated , 使用 urls。
• mozilla stun 服务器已decommissioned , 所以为自己节省一些时间并排除它。
• mandatory 和 OfferToReceiveAudio 有 been deprecated .使用 offerToReceiveAudio。
• mandatory 和OfferToReceiveVideo 有been deprecated .使用 offerToReceiveVideo。

提示

使用 promises 的荣誉(与教程不同)!注意你可以 return them压平东西:

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