为什么webrtc对等2对等仅显示我的视频,而不显示另一方的视频?

时间:2019-03-30 22:07:26

标签: firebase webrtc

首先,我只发现了一个类似的问题,该问题与我所面临的问题“略有”相似,但没有答案,评论也没有回答这个问题:WebRTC cannot show a video from peer

我正在使用webrtc进行基本的一对一视频聊天,并且正在使用firebase作为我的信令服务器。

这个想法来自这里:

https://websitebeaver.com/insanely-simple-webrtc-video-chat-using-firebase-with-codepen-demo

我已使用自己的Firebase帐户和服务器设置了所有内容。

但是,当我在野生动物园(iPhone)中运行代码时,我只会在一个视频标签中显示自己的视频,并且如果我尝试使用其他浏览器加入同一聊天,则不会看到对方对方的情况也一样(他们只能看到继承人的视频)!。

这是我的完整代码:

var config = {
    apiKey: "XXXXXXXXXXXXXXXXXXX",
    authDomain: "webrtc-XXXX.firebaseapp.com",
    databaseURL: "https://webrtc-XXXX.firebaseio.com",
    projectId: "webrtc-dcbd4",
    storageBucket: "webrtc-XXXX.appspot.com",
    messagingSenderId: "107XXXXXX2523"
  };


firebase.initializeApp(config);

var database = firebase.database().ref();
var yourVideo = document.getElementById("yourVideo");
var friendsVideo = document.getElementById("friendsVideo");
var yourId = Math.floor(Math.random()*1000000000);
//Create an account on Viagenie (http://numb.viagenie.ca/), and replace {'urls': 'turn:numb.viagenie.ca','credential': 'websitebeaver','username': 'websitebeaver@email.com'} with the information from your account
var servers = {'iceServers': [
{'urls': 'stun:stun.l.google.com:19302'},
{'urls': 'stun:stun.services.mozilla.com'},  
{'urls': 'turn:numb.viagenie.ca','credential': 'Password-goes-here','username': 'email@gmail.com'}
]
};
var pc = new RTCPeerConnection(servers);



pc.onicecandidate = (event => event.candidate?sendMessage(yourId, JSON.stringify({'ice': event.candidate})):console.log("Sent All Ice") );
pc.peerConnection = (event => friendsVideo.srcObject = event.stream);

function sendMessage(senderId, data) {
    var msg = database.push({ sender: senderId, message: data });
    msg.remove();
}

function readMessage(data) {
    var msg = JSON.parse(data.val().message);
    var sender = data.val().sender;
    if (sender != yourId) {
        if (msg.ice != undefined)
            pc.addIceCandidate(new RTCIceCandidate(msg.ice));
        else if (msg.sdp.type == "offer")
            pc.setRemoteDescription(new RTCSessionDescription(msg.sdp))
              .then(() => pc.createAnswer())
              .then(answer => pc.setLocalDescription(answer))
              .then(() => sendMessage(yourId, JSON.stringify({'sdp': pc.localDescription})));
        else if (msg.sdp.type == "answer")
            pc.setRemoteDescription(new RTCSessionDescription(msg.sdp));
    }
};

database.on('child_added', readMessage);

function showMyFace() {
  navigator.mediaDevices.getUserMedia({audio:true, video:true})
    .then(stream => yourVideo.srcObject = stream)
    .then(stream => pc.addStream(stream));
}

function showFriendsFace() {



  pc.createOffer()
    .then(offer => pc.setLocalDescription(offer) )
    .then(() => sendMessage(yourId, JSON.stringify({'sdp': pc.localDescription})) );


}

有人可以请教这个问题吗?

谢谢。

0 个答案:

没有答案