我试图设置一个基本的视频聊天示例。目前正在尝试在同一台计算机上的两个Chrome标签之间聊天
在我获得远程视频流之前，一切看起来都很好，当我使用remoteVideo将其放入URL.createObjectURI元素时，我什么都没空白。虽然我收到了远程流事件，但没有显示视频。
这会导致什么？有任何想法吗？请帮忙！
以下是信号的日志：
呼叫者：
Got userMedia
Registered signaling room
BY_WebRTC.startSession HOQfXIe3uoLMtDgSlHVH+A== true
VM9840:128 tryStart: created peer connection.
VM9840:150 Created RTCPeerConnnection
VM9840:133 tryStart: added stream to peer connection.
VM9840:170 Sending offer to peer
VM9840:184 sending sdp RTCSessionDescription {type: "offer", sdp: "v=0
↵o=- 3416476007859143551 2 IN IP4 127.0.0.1
↵s…9521 label:a8a8592f-d78d-40b2-bc1c-1a7c33772201
↵"}
VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:3054232416 1 udp 2122260223 169.254.80.8… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 2", sdpMid: "audio", sdpMLineIndex: 0}
VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:3708192848 1 udp 2122194687 172.19.67.39… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 1", sdpMid: "audio", sdpMLineIndex: 0}
VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:3054232416 2 udp 2122260222 169.254.80.8… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 2", sdpMid: "audio", sdpMLineIndex: 0}
VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:3708192848 2 udp 2122194686 172.19.67.39… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 1", sdpMid: "audio", sdpMLineIndex: 0}
VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:3054232416 1 udp 2122260223 169.254.80.8… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 2", sdpMid: "video", sdpMLineIndex: 1}
VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:3708192848 1 udp 2122194687 172.19.67.39… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 1", sdpMid: "video", sdpMLineIndex: 1}
VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:3054232416 2 udp 2122260222 169.254.80.8… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 2", sdpMid: "video", sdpMLineIndex: 1}
VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:3708192848 2 udp 2122194686 172.19.67.39… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 1", sdpMid: "video", sdpMLineIndex: 1}
VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:4169670544 1 tcp 1518280447 169.254.80.8… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 2", sdpMid: "audio", sdpMLineIndex: 0}
VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:2474996896 1 tcp 1518214911 172.19.67.39… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 1", sdpMid: "audio", sdpMLineIndex: 0}
VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:4169670544 2 tcp 1518280446 169.254.80.8… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 2", sdpMid: "audio", sdpMLineIndex: 0}
VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:2474996896 2 tcp 1518214910 172.19.67.39… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 1", sdpMid: "audio", sdpMLineIndex: 0}
VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:4169670544 1 tcp 1518280447 169.254.80.8… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 2", sdpMid: "video", sdpMLineIndex: 1}
VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:2474996896 1 tcp 1518214911 172.19.67.39… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 1", sdpMid: "video", sdpMLineIndex: 1}
VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:4169670544 2 tcp 1518280446 169.254.80.8… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 2", sdpMid: "video", sdpMLineIndex: 1}
VM9840:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:2474996896 2 tcp 1518214910 172.19.67.39… generation 0 ufrag Ab1ql0yuiJZgNzDJ network-id 1", sdpMid: "video", sdpMLineIndex: 1}
VM9840:110 Received answer
VM9840:207 Remote stream added. MediaStreamEvent {stream: MediaStream, type: "addstream", target: RTCPeerConnection, currentTarget: RTCPeerConnection, eventPhase: 2…}
VM9840:191 handleIceCandidate event: null
VM9840:202 End of candidates.
被叫者：
Got User Media
Registered signaling room
Received offer
webrtc.js?v=2.22:128 tryStart: created peer connection.
webrtc.js?v=2.22:150 Created RTCPeerConnnection
webrtc.js?v=2.22:133 tryStart: added stream to peer connection.
webrtc.js?v=2.22:175 Sending answer to peer.
webrtc.js?v=2.22:207 Remote stream added. MediaStreamEvent {stream: MediaStream, type: "addstream", target: RTCPeerConnection, currentTarget: RTCPeerConnection, eventPhase: 2…}
webrtc.js?v=2.22:184 sending sdp RTCSessionDescription {type: "answer", sdp: "v=0
↵o=- 1405083852183288173 2 IN IP4 127.0.0.1
↵s…5319 label:9a0427e6-be00-4a66-a862-77c1deafb89d
↵"}
webrtc.js?v=2.22:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:3054232416 1 udp 2122260223 169.254.80.8… generation 0 ufrag wf8+wbbJ2eepjam8 network-id 2", sdpMid: "audio", sdpMLineIndex: 0}
webrtc.js?v=2.22:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:3708192848 1 udp 2122194687 172.19.67.39… generation 0 ufrag wf8+wbbJ2eepjam8 network-id 1", sdpMid: "audio", sdpMLineIndex: 0}
webrtc.js?v=2.22:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:4169670544 1 tcp 1518280447 169.254.80.8… generation 0 ufrag wf8+wbbJ2eepjam8 network-id 2", sdpMid: "audio", sdpMLineIndex: 0}
webrtc.js?v=2.22:191 handleIceCandidate event: RTCIceCandidate {candidate: "candidate:2474996896 1 tcp 1518214911 172.19.67.39… generation 0 ufrag wf8+wbbJ2eepjam8 network-id 1", sdpMid: "audio", sdpMLineIndex: 0}
webrtc.js?v=2.22:191 handleIceCandidate event: null
webrtc.js?v=2.22:202 End of candidates.
代码（从startSession开始，调用者为isInitiator = true - 获得本地媒体后）：
var BY_WebRTC = {
// consts
pc_config: {
'iceServers': [
{ url: 'stun:stun1.l.google.com:19302' }]
},
pc_constraints: { 'optional': [{ 'DtlsSrtpKeyAgreement': true }] },
sdpConstraints: {
'mandatory': {
// Set up audio and video regardless of what devices are present.
'OfferToReceiveAudio': true,
'OfferToReceiveVideo': true
}
},
localStream: null,
remoteStream: null,
isStarted: false,
isInitiator: false,
realtimeEventId: null, // current conversation object realtime server room id
pc: null, // peer connection
getUserMedia: function (video, audio, callback) {
var constraints = { video: video, audio: audio };
navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
BY_WebRTC.localStream = stream;
callback(stream);
}).catch(function (error) {
console.log("BY_WebRTC:getUserMedia Error!", error);
});
},
startSession: function (encryptedObjectId, isInitiator) {
// store the realtime event id
BY_WebRTC.realtimeEventId = { groupType: 'object', groupId: encryptedObjectId, eventType: "webrtc" };
BY_WebRTC.encryptedObjectId = encryptedObjectId;
// register chat room for webrtc signaling
nowManager.registerGroupEvents([BY_WebRTC.realtimeEventId], BY_WebRTC.realtimeWebRTC_EventHandler);
console.log("BY_WebRTC.startSession", encryptedObjectId, isInitiator);
if (isInitiator) {
BY_WebRTC.isInitiator = true;
BY_WebRTC.tryStart();
}
},
realtimeWebRTC_EventHandler: function (message) {
if (message === 'start') {
BY_WebRTC.tryStart();
}
else if (message.type === 'offer') {
console.log('Received offer');
if (!BY_WebRTC.isInitiator && !BY_WebRTC.isStarted) {
BY_WebRTC.tryStart();
}
BY_WebRTC.pc.setRemoteDescription(new RTCSessionDescription(message));
BY_WebRTC.sendAnswer();
}
else if (message.type === 'answer' && isStarted) {
console.log('Received answer');
BY_WebRTC.pc.setRemoteDescription(new RTCSessionDescription(message));
}
else if (message.type === 'candidate' && BY_WebRTC.isStarted) {
var candidate = new RTCIceCandidate({
sdpMLineIndex: message.label,
candidate: message.candidate
});
BY_WebRTC.pc.addIceCandidate(candidate);
}
else if (message === 'bye' && BY_WebRTC.isStarted) {
BY_WebRTC.handleRemoteHangup();
}
},
tryStart: function () {
if (!BY_WebRTC.isStarted && typeof BY_WebRTC.localStream != null) {
console.log("tryStart: created peer connection.");
BY_WebRTC.createPeerConnection();
BY_WebRTC.pc.addStream(BY_WebRTC.localStream);
console.log("tryStart: added stream to peer connection.");
isStarted = true;
if (BY_WebRTC.isInitiator) {
BY_WebRTC.sendOffer();
}
}
},
createPeerConnection: function () {
try {
var pc = new RTCPeerConnection(this.pc_config);
pc.onicecandidate = this.handleIceCandidate;
pc.onaddstream = this.handleRemoteStreamAdded;
pc.onremovestream = this.handleRemoteStreamRemoved;
console.log('Created RTCPeerConnnection');
BY_WebRTC.pc = pc;
} catch (e) {
console.log('Failed to create PeerConnection, exception: ' + e.message);
alert('Cannot create RTCPeerConnection object.');
return;
}
},
handleCreateOfferError: function (event) {
console.log('sendOffer() error: ', e);
},
handleSendAnswerError: function (event) {
console.log('sendAnswer() error: ', e);
},
sendOffer: function () {
console.log('Sending offer to peer');
BY_WebRTC.pc.createOffer(BY_WebRTC.setLocalAndSendMessage, BY_WebRTC.handleCreateOfferError);
},
sendAnswer: function () {
console.log('Sending answer to peer.');
BY_WebRTC.pc.createAnswer(BY_WebRTC.setLocalAndSendMessage, BY_WebRTC.handleSendAnswerError, BY_WebRTC.sdpConstraints);
},
setLocalAndSendMessage: function (sessionDescription) {
// Set Opus as the preferred codec in SDP if Opus is present.
sessionDescription.sdp = BY_WebRTC.preferOpus(sessionDescription.sdp);
BY_WebRTC.pc.setLocalDescription(sessionDescription);
console.log("sending sdp", sessionDescription);
nowManager.sendGroupEvent(BY_WebRTC.realtimeEventId, sessionDescription);
},
handleIceCandidate: function (event) {
console.log('handleIceCandidate event: ', event.candidate);
if (event.candidate) {
nowManager.sendGroupEvent(BY_WebRTC.realtimeEventId, {
type: 'candidate',
label: event.candidate.sdpMLineIndex,
id: event.candidate.sdpMid,
candidate: event.candidate.candidate
});
}
else {
console.log('End of candidates.');
}
},
handleRemoteStreamAdded: function (event) {
console.log('Remote stream added.', event);
// todo: send callback event after got remote stream
document.querySelector('#remoteVideo').src = window.URL.createObjectURL(event.stream);
BY_WebRTC.remoteStream = event.stream;
$("#remoteVideo").show();
},
handleRemoteStreamRemoved: function (event) {
console.log('Remote stream removed. Event: ', event);
},
hangup: function () {
console.log('Hanging up.');
this.stop();
nowManager.sendGroupEvent(this.realtimeEventId, "bye");
},
handleRemoteHangup: function () {
// console.log('Session terminated.');
// stop();
// isInitiator = false;
},
stop: function () {
BY_WebRTC.isStarted = false;
BY_WebRTC.pc.close();
BY_WebRTC.pc = null;
}
}
答案 0 :(得分：1)
好的，我找到了答案！ 由于一些小错误（我没有init isStarted = true）我没有添加冰候选人。这导致了这个问题。