WebRTC远程video显示为黑色
在开发WebRTCvideo聊天应用程序时,我遇到了接收远程videostream的问题。 videostreamblob被接收,但video只是黑色。
我已经通过这些答案,并尝试几乎所有我能得到它的工作https://stackoverflow.com/a/17424224/923109 远程VideoStream不与WebRTC的工作
...... Globalvars.socket.on('call', function (signal) { if(!Globalvars.pc){ Methods.startCall(false, signal); } if(signal.sdp){ temp = new RTCSessionDescription({"sdp" : decodeURIComponent(signal.sdp), "type" : signal.type}); Globalvars.pc.setRemoteDescription(temp); for(i = 0; i < Globalvars.iceCandidateArray.length; i++){ Globalvars.pc.addIceCandidate(new RTCIceCandidate({ sdpMLineIndex: decodeURIComponent(signal.sdpMLineIndex), candidate: decodeURIComponent(signal.candidate) })); } Globalvars.iceCandidateArray = []; } else{ if(Globalvars.pc.remoteDescription){ Globalvars.pc.addIceCandidate(new RTCIceCandidate({ sdpMLineIndex: decodeURIComponent(signal.sdpMLineIndex), candidate: decodeURIComponent(signal.candidate) })); console.log("remot"); } else{ Globalvars.iceCandidateArray.push(new RTCIceCandidate({ sdpMLineIndex: decodeURIComponent(signal.sdpMLineIndex), candidate: decodeURIComponent(signal.candidate) })); console.log("ice candidate to temp array"); } } }); $("#roster-wrap").on("click", ".roster-list-item", function(e){ //Globalvars.socket.emit('call', {"receiver_id" : $(this).attr("data-id"), "caller_id" : Globalvars.me.id}); params = {"receiver_id" : $(this).attr("data-id"), "caller_id" : Globalvars.me.id}; Methods.startCall(true, params); e.preventDefault(); }); ..... ..... // run start(true) to initiate a call "startCall" : function (isCaller, params) { var configuration = {"iceServers": [{"url": "stun:stun.l.google.com:19302"}]}; Globalvars.pc = new RTCPeerConnection(configuration); // send any ice candidates to the other peer Globalvars.pc.onicecandidate = function (evt) { //alert("ice candidate"); if (!Globalvars.pc || !evt || !evt.candidate) return; var candidate = evt.candidate; Globalvars.socket.emit("call",{ "candidate": encodeURIComponent(candidate.candidate), "sdpMLineIndex" : encodeURIComponent(candidate.sdpMLineIndex), "receiver_id" : params.receiver_id, "caller_id" : params.caller_id}); }; // once remote stream arrives, show it in the remote video element Globalvars.pc.onaddstream = function (evt) { console.log("add stream"); if (!event) return; $("#remote-video").attr("src",URL.createObjectURL(evt.stream)); Methods.waitUntilRemoteStreamStartsFlowing(); }; // get the local stream, show it in the local video element and send it navigator.getUserMedia({ "audio": false, "video": true }, function (stream) { $("#my-video").attr("src", URL.createObjectURL(stream)); Globalvars.pc.addStream(stream); if (isCaller){ Globalvars.pc.createOffer(getDescription, null, { 'mandatory': { 'OfferToReceiveAudio': true, 'OfferToReceiveVideo': true } }); } else{ console.log("Got Remote Description"); console.log(Globalvars.pc.remoteDescription); //Globalvars.pc.createAnswer(Globalvars.pc.remoteDescription, getDescription); Globalvars.pc.createAnswer(getDescription, null, { 'mandatory': { 'OfferToReceiveAudio': true, 'OfferToReceiveVideo': true } }); } function getDescription(desc) { Globalvars.pc.setLocalDescription(desc); console.log("my desc"); console.log(desc); Globalvars.socket.emit("call", {"sdp": encodeURIComponent(desc.sdp), "type": desc.type, "receiver_id" : params.receiver_id, "caller_id" : params.caller_id}); //signalingChannel.send(JSON.stringify({ "sdp": desc })); } }); }, ......
完整的代码可以在https://bitbucket.org/ajaybc/meetchat-client和https://bitbucket.org/ajaybc/meetchat-server
您可能需要添加
<uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.CAMERA" />
进入你的AndroidManifest.xml
我validation了WebRTC可以在我的Nexus 5上使用https://download.01.org/crosswalk/releases/crosswalk/android/beta/7.36.154.12/和https://apprtc.appspot.com/ 。
希望对你有效。
我和你有同样的问题,但只有一些客户,我探索了你所做的相同的途径。 最后一件事(也许是我的问题的最终原因)与至less一个客户背后的NAT情况有关。 总是有可能出现这样的情况:其中一个客户端不能在他们的NAT中打洞,因此STUN服务器将不能工作。 在这些情况下,您需要一台TURN服务器将video转发给该客户端。
您的peerConnection中的peerConnection
具有哪些configuration? 它是否包含您知道工作的任何TURN服务器?
你可以在这个网站http://xirsys.com/simplewebrtc/上创build一个免费的帐户,然后按照简单的说明获取托pipe服务器上TURN服务器的凭证,然后你可以使用它来testing这是否是问题。;
首先创build对等连接,然后将MediaStream添加到它。 只有在添加mediastream到peerconnection交换报价后,回答,应该做的候选人。
为什么不尝试“JSON.stringify”,而不是使用“decodeURIComponent”? 这将确保顺利转换为string,然后您可以使用JSON.parse获取您发送的对象。 从我使用黑屏WebRTC的经验来看,我感觉到一个肮脏的SDP有效载荷。