WebRTC黑屏

Question

我有问题。我想学习WebRTC并买了一本书。问题是，给定的代码不起作用。我认为我犯了一个错误，但我尝试了本书的给定代码并且存在同样的问题。

我想在两个视频html元素之间创建视频通信。我已经替换了一些已弃用的函数。 目前，我只是看到自己（在“你的”中）和“他们的”黑屏。我应该看到我这两个元素：

屏幕截图：WebRTC black screen

我不知道错误在哪里。也许有人可以帮助我？

谢谢！

main.js

var partialLogin = await OwinContext.Environment.GetIdentityServerPartialLoginAsync();
partialLogin.RemoveClaim(identityResult.Identity.FindFirst("sub"));
partialLogin.AddClaim(new Claim("sub", model.NewUsername));
await OwinContext.Environment.UpdatePartialLoginClaimsAsync(partialLogin.Claims);

// Check whether the user has access to the getUserMedia API
function hasUserMedia() {
	
	navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
	
	return !!navigator.getUserMedia;
	
}

// Check whether the user has access to the RTCPeerConnection API
function hasRTCPeerConnection() {
	
	window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection || window.msRTCPeerConnection;
	
	return !!window.RTCPeerConnection;
}

var yourVideo = document.querySelector('#yours'),
	theirVideo = document.querySelector('#theirs'),
	yourConnection, theirConnection;
	
if(hasUserMedia()) {
	navigator.mediaDevices.getUserMedia({video: true, audio: false})
	.then(
		function(mediaStream) {
			
			// Giving the stream to the html object
			yourVideo.srcObject = mediaStream;
			
			if(hasRTCPeerConnection()) {
				startPeerConnection(mediaStream);
			} // End if(hasRTCPeerConnection())
			else {
				alert('Sorry, your browser does not support WebRTC.');
			} // End else if
			
		} // End function(mediaStream)
	) // End getUserMedia().then()
	.catch(
		function(err) {
			alert('Sorry, we failed to capture your camera, please try again.');
			console.log(err.name + ': ' + err.message);
		} // End function(err)
	) // End getUserMedia().catch()
} // End hasUserMedia()
else {
	alert('Sorry, your browser does not support WebRTC.');
} // End Else if(hasUserMedia())
	
function startPeerConnection(mediaStream) {
	var configuration = {
		// Uncomment this code to add custom iceServers
		"iceServers": [{"urls": "stun:stun.1und1.de"}, {"urls": "stun:stun.gmx.net"}, {"urls": "stun:stun1.l.google.com:19305"}, {"urls": "stun:stun2.l.google.com:19305"}]
	};
	
	yourConnection = new mozRTCPeerConnection(configuration);
	theirConncetion = new mozRTCPeerConnection(configuration);
	
	// Setup stream listening
	yourConnection.addStream(mediaStream);
	theirConncetion.ontrack = function (e) {
		theirVideo.srcObject = e.stream;
	};
	
	// Setup ice handling
	yourConnection.onicecandidate = function (event){
		if(event.candidate){
			theirConncetion.addIceCandidate(new RTCIceCandidate(event.candidate));
		}
	};
	
	theirConncetion.onicecandidate = function (event){
		if(event.candidate){
			yourConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
		}
	};
	
	yourConnection.createOffer(
		function (offer) {
			yourConnection.setLocalDescription(offer);
			theirConnection.setRemoteDescription(offer);
			theirConnection.createAnswer(
				function (offer) {
					theirConnection.setLocalDescription(offer);
					yourConnection.setRemoteDescription(offer);
				}
			);
		}
	);
}

**index.html**

Answer 1

旧书中的旧代码。为了消除旧的例子，请允许我提供一些提示：

• 删除moz前缀。
• 删除window.msRTCPeerConnection。它从未存在过。
• 您的hasUserMedia()函数会填充旧的navigator.getUserMedia，但您的主要代码会使用较新的navigator.mediaDevices.getUserMedia。只需检查后者是否存在。
• 使用pc.ontrack = e => video.srcObject = e.streams[0];，或者如果您希望在Chrome中使用此功能，请使用adapter.js或更早的pc.onaddtream = e => video.srcObject = e.stream;
• 为您的createOffer和createAnswer来电或won't work来电添加失败回调。

我看到你使用getUserMedia的较新的promise-API，但不是RTCPeerConnection。 Try：

var pc1 = new RTCPeerConnection(), pc2 = new RTCPeerConnection();

navigator.mediaDevices.getUserMedia({video: true, audio: true})
  .then(stream => pc1.addStream(video1.srcObject = stream))
  .catch(e => console.log(e));

pc1.onicecandidate = e => pc2.addIceCandidate(e.candidate);
pc2.onicecandidate = e => pc1.addIceCandidate(e.candidate);

pc2.ontrack = e => video2.srcObject = e.streams[0];
pc1.oniceconnectionstatechange = e => console.log(pc1.iceConnectionState);
pc1.onnegotiationneeded = e =>
  pc1.createOffer().then(d => pc1.setLocalDescription(d))
  .then(() => pc2.setRemoteDescription(pc1.localDescription))
  .then(() => pc2.createAnswer()).then(d => pc2.setLocalDescription(d))
  .then(() => pc1.setRemoteDescription(pc2.localDescription))
  .catch(e => console.log(e));

<video id="video1" width="160" height="120" autoplay muted></video>
<video id="video2" width="160" height="120" autoplay></video><br>
<div id="div"></div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

Answer 2

你可能用ontrack替换了已弃用的onaddstream（到目前为止仅在Firefox中支持）。 然而，ontracks没有e.stream属性，请尝试使用e.streams [0]

Answer 3

解决方案很简单。我在这里找到了答案，但我必须更加努力地搜索谷歌。 解决方案在那里描述： onaddstream method is not executed after RTCPeerconnection object is instantiated