我有一个问题。我想学习WebRTC并购买了一本书。问题是,给定的代码不起作用。我认为我犯了一个错误,但是我尝试了本书的给定代码,并且存在同样的问题。的WebRTC黑屏
我要创建两个视频HTML元素之间的视频通信。我已经替换了一些弃用的功能。 目前,我只是看到自己(在“你的”)和黑色的屏幕“他们的”。我看到我,我这两个元素:
我不知道哪里出错。也许有人可以帮助我?
谢谢!
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>