1
問題があります。私はWebRTCを学び、本を買ったかったのです。問題は、指定されたコードが動作しないことです。私は間違いをしたと思ったが、その本のコードを試したところ、同じ問題がある。WebRTC黒画面
2つのビデオhtml要素間にビデオ通信を作成したいと思います。私は既に廃止予定の機能を置き換えました。 現在のところ、自分自身（「あなた」のもの）と「自分のもの」の黒い画面が表示されています。私は私の両方の要素を私に表示されるはずです。
スクリーンショット：エラーがどこにあるか私にはわからないWebRTC black screen
。おそらく誰かが私を助けることができましたか？
ありがとうございました！
main.js
// Check whether the user has access to the getUserMedia API
function hasUserMedia() {
\t
\t navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
\t
\t return !!navigator.getUserMedia;
\t
}
// Check whether the user has access to the RTCPeerConnection API
function hasRTCPeerConnection() {
\t
\t window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection || window.msRTCPeerConnection;
\t
\t return !!window.RTCPeerConnection;
}
var yourVideo = document.querySelector('#yours'),
\t theirVideo = document.querySelector('#theirs'),
\t yourConnection, theirConnection;
\t
if(hasUserMedia()) {
\t navigator.mediaDevices.getUserMedia({video: true, audio: false})
\t .then(
\t \t function(mediaStream) {
\t \t \t
\t \t \t // Giving the stream to the html object
\t \t \t yourVideo.srcObject = mediaStream;
\t \t \t
\t \t \t if(hasRTCPeerConnection()) {
\t \t \t \t startPeerConnection(mediaStream);
\t \t \t } // End if(hasRTCPeerConnection())
\t \t \t else {
\t \t \t \t alert('Sorry, your browser does not support WebRTC.');
\t \t \t } // End else if
\t \t \t
\t \t } // End function(mediaStream)
\t) // End getUserMedia().then()
\t .catch(
\t \t function(err) {
\t \t \t alert('Sorry, we failed to capture your camera, please try again.');
\t \t \t console.log(err.name + ': ' + err.message);
\t \t } // End function(err)
\t) // End getUserMedia().catch()
} // End hasUserMedia()
else {
\t alert('Sorry, your browser does not support WebRTC.');
} // End Else if(hasUserMedia())
\t
function startPeerConnection(mediaStream) {
\t var configuration = {
\t \t // Uncomment this code to add custom iceServers
\t \t "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"}]
\t };
\t
\t yourConnection = new mozRTCPeerConnection(configuration);
\t theirConncetion = new mozRTCPeerConnection(configuration);
\t
\t // Setup stream listening
\t yourConnection.addStream(mediaStream);
\t theirConncetion.ontrack = function (e) {
\t \t theirVideo.srcObject = e.stream;
\t };
\t
\t // Setup ice handling
\t yourConnection.onicecandidate = function (event){
\t \t if(event.candidate){
\t \t \t theirConncetion.addIceCandidate(new RTCIceCandidate(event.candidate));
\t \t }
\t };
\t
\t theirConncetion.onicecandidate = function (event){
\t \t if(event.candidate){
\t \t \t yourConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
\t \t }
\t };
\t
\t yourConnection.createOffer(
\t \t function (offer) {
\t \t \t yourConnection.setLocalDescription(offer);
\t \t \t theirConnection.setRemoteDescription(offer);
\t \t \t theirConnection.createAnswer(
\t \t \t \t function (offer) {
\t \t \t \t \t theirConnection.setLocalDescription(offer);
\t \t \t \t \t yourConnection.setRemoteDescription(offer);
\t \t \t \t }
\t \t \t);
\t \t }
\t);
}
**index.html**<!DOCTYPE html>
<html>
\t <head>
\t \t <meta char="utf-8" />
\t \t <title>Chapter 3</title>
\t \t <style>
\t \t \t body {
\t \t \t \t background-color: #3D6DF2;
\t \t \t \t margin-top: 15px;
\t \t \t }
\t \t \t video {
\t \t \t \t background: black;
\t \t \t \t border: 1px solid gray;
\t \t \t }
\t \t \t #container {
\t \t \t \t position: relative;
\t \t \t \t display: block;
\t \t \t \t margin: 0 auto;
\t \t \t \t width: 500px;
\t \t \t \t height: 500px;
\t \t \t }
\t \t \t #yours {
\t \t \t \t width: 150px;
\t \t \t \t height: 150px;
\t \t \t \t position: absolute;
\t \t \t \t top: 15px;
\t \t \t \t right: 15px;
\t \t \t }
\t \t \t #theirs {
\t \t \t \t width: 500px;
\t \t \t \t height: 500px;
\t \t \t }
\t \t </style>
\t </head>
\t <body>
\t \t <video id="yours" autoplay></video>
\t \t <video id="theirs" autoplay></video>
\t \t <script src="main.js"></script>
\t </body>
</html>