【发布时间】：2021-01-19 04:46:03
【问题描述】：
我有问题。我想学习WebRTC并买了一本书。问题是，给定的代码不起作用。我以为我犯了一个错误，但我尝试了书中给出的代码，并且出现了同样的问题。
我想在两个视频 html 元素之间创建视频通信。我已经替换了一些不推荐使用的功能。 目前，我只看到自己（在“你的”中）和“他们的”中的黑屏。我应该看到我两个元素：
我不知道错误在哪里。也许有人可以帮助我？
谢谢！
main.js
// 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**<!DOCTYPE html>
<html>
<head>
<meta char="utf-8" />
<title>Chapter 3</title>
<style>
body {
background-color: #3D6DF2;
margin-top: 15px;
}
video {
background: black;
border: 1px solid gray;
}
#container {
position: relative;
display: block;
margin: 0 auto;
width: 500px;
height: 500px;
}
#yours {
width: 150px;
height: 150px;
position: absolute;
top: 15px;
right: 15px;
}
#theirs {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<video id="yours" autoplay></video>
<video id="theirs" autoplay></video>
<script src="main.js"></script>
</body>
</html>【问题讨论】：