1
문제가 있습니다. 나는 WebRTC를 배우고 책을 사고 싶다. 문제는 주어진 코드가 작동하지 않는다는 것입니다. 나는 실수를 저질렀다고 생각했지만 책의 주어진 코드를 시험해 보았는데 같은 문제가있다.WebRTC 검은 색 화면
두 개의 비디오 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>