首先,我只发现了一个类似的问题,该问题与我所面临的问题“略有”相似,但没有答案,评论也没有回答这个问题: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})) );
}
有人可以请教这个问题吗?
谢谢。