javascript - How to implement webRTC in firefox? -
this code works in google chrome fine , tried convert support firefox , no error in console . cam seems ruining there's no video. here's script
var socket = new websocket('ws://127.0.0.1:1338/'); // change ip address websocket server var stunserver = "stun.l.google.com:19302"; var sourcevid = document.getelementbyid('sourcevid'); var remotevid = document.getelementbyid('remotevid'); var localstream = null; var remotestream; var peerconn = null; var started = false; var isrtcpeerconnection = true; var mediaconstraints = {mandatory: { offertoreceiveaudio:true, offertoreceivevideo:true }}; var logg = function(s) { console.log(s); }; // send message websocket server function sendmessage(message) { var mymsg = json.stringify(message); logg("send: " + mymsg); socket.send(mymsg); } function createpeerconnection() { try { logg("creating peer connection"); var servers = []; servers.push({'url':'stun:' + stunserver}); var pc_config = {'iceservers':servers}; peerconn = new webkitrtcpeerconnection(pc_config); peerconn.onicecandidate = onicecandidate; } catch (e) { try { peerconn = new rtcpeerconnection('stun ' + stunserver, onicecandidate00); isrtcpeerconnection = false; } catch (e) { logg("failed create peerconnection, exception: " + e.message); } } peerconn.onaddstream = onremotestreamadded; peerconn.onremovestream = onremotestreamremoved; } // when remote adds stream, hand on local video element function onremotestreamadded(event) { logg("added remote stream"); remotevid.src = window.webkiturl.createobjecturl(event.stream); } function waitforremotevideo() { if (remotestream.videotracks.length === 0 || remotevid.currenttime > 0) { transitiontoactive(); } else { settimeout(waitforremotevideo, 100); } } function transitiontoactive() { remotevid.style.opacity = 1; card.style.webkittransform = "rotatey(180deg)"; settimeout(function() { sourcevid.src = ""; }, 500); setstatus("<input type=\"button\" id=\"hangup\" value=\"hang up\" onclick=\"onhangup()\" />"); } // when remote removes stream, remove local video element function onremotestreamremoved(event) { logg("remove remote stream"); remotevid.src = ""; } function onicecandidate(event) { if (event.candidate) { sendmessage({type: 'candidate', label: event.candidate.sdpmlineindex, id: event.candidate.sdpmid, candidate: event.candidate.candidate}); } else { logg("end of candidates."); } } function onicecandidate00(candidate, moretofollow) { if (candidate) { sendmessage({type: 'candidate', label: candidate.label, candidate: candidate.tosdp()}); } if (!moretofollow) { logg("end of candidates."); } } // start connection upon user request function connect() { if (!started && localstream) { console.log("creating peerconnection."); createpeerconnection(); logg('adding local stream...'); peerconn.addstream(localstream); started = true; logg("isrtcpeerconnection: " + isrtcpeerconnection); //create offer if (isrtcpeerconnection) { peerconn.createoffer(setlocalandsendmessage, null, mediaconstraints); } else { var offer = peerconn.createoffer(mediaconstraints); peerconn.setlocaldescription(peerconn.sdp_offer, offer); sendmessage({type: 'offer', sdp: offer.tosdp()}); peerconn.startice(); } } else { alert("local stream not running yet."); } } // accept connection request socket.addeventlistener("message", onmessage, false); function onmessage(evt) { logg("received: " + evt.data); if (isrtcpeerconnection) processsignalingmessage(evt.data); else processsignalingmessage00(evt.data); } function processsignalingmessage(message) { var msg = json.parse(message); if (msg.type === 'offer') { if (!started && localstream) { createpeerconnection(); logg('adding local stream...'); peerconn.addstream(localstream); started = true; logg("isrtcpeerconnection: " + isrtcpeerconnection); if (isrtcpeerconnection) { //set remote description peerconn.setremotedescription(new rtcsessiondescription(msg)); //create answer console.log("sending answer peer."); peerconn.createanswer(setlocalandsendmessage, null, mediaconstraints); } else { //set remote description peerconn.setremotedescription(peerconn.sdp_offer, new sessiondescription(msg.sdp)); //create answer var offer = peerconn.remotedescription; var answer = peerconn.createanswer(offer.tosdp(), mediaconstraints); console.log("sending answer peer."); setlocalandsendmessage00(answer); } } } else if (msg.type === 'answer' && started) { peerconn.setremotedescription(new rtcsessiondescription(msg)); } else if (msg.type === 'candidate' && started) { var candidate = new rtcicecandidate({sdpmlineindex:msg.label, candidate:msg.candidate}); peerconn.addicecandidate(candidate); } else if (msg.type == 'chat'){ addchatmsg(msg.nick, msg.cid, msg.data); } else if (msg.type === 'bye' && started) { onremotehangup(); } } function processsignalingmessage00(message) { var msg = json.parse(message); // if (msg.type === 'offer') --> never happened since isrtcpeerconnection=true if (msg.type === 'answer' && started) { peerconn.setremotedescription(peerconn.sdp_answer, new sessiondescription(msg.sdp)); } else if (msg.type === 'candidate' && started) { var candidate = new icecandidate(msg.label, msg.candidate); peerconn.processicemessage(candidate); } else if (msg.type === 'bye' && started) { onremotehangup(); } } function setlocalandsendmessage(sessiondescription) { peerconn.setlocaldescription(sessiondescription); sendmessage(sessiondescription); } function setlocalandsendmessage00(answer) { peerconn.setlocaldescription(peerconn.sdp_answer, answer); sendmessage({type: 'answer', sdp: answer.tosdp()}); peerconn.startice(); } function onremotehangup() { logg("remote hang up."); closesession(); } function onhangup() { logg("hang up."); if (started) { sendmessage({type: 'bye'}); closesession(); } } function closesession() { peerconn.close(); peerconn = null; started = false; remotevid.src = ""; } window.onbeforeunload = function() { if (started) { sendmessage({type: 'bye'}); } } function startvideo() { // replace source of video element stream camera if (navigator.mozgetusermedia) { try { navigator.mozgetusermedia({audio: true, video: true}, successcallback, errorcallback); } catch (e) { navigator.mozgetusermedia("video,audio", successcallback, errorcallback); } } else { try { navigator.webkitgetusermedia({audio: true, video: true}, successcallback, errorcallback); } catch (e) { navigator.webkitgetusermedia("video,audio", successcallback, errorcallback); } } function successcallback(stream) { if (navigator.mozgetusermedia) { sourcevid.mozsrcobject = stream; sourcevid.style.webkittransform = "rotatey(180deg)"; localstream = stream; } if(navigator.webkitgetusermedia){ sourcevid.src = window.webkiturl.createobjecturl(stream); sourcevid.style.webkittransform = "rotatey(180deg)"; localstream = stream; } } function errorcallback(error) { logg('an error occurred: [code ' + error.code + ']'); } } function stopvideo() { sourcevid.src = ""; } and here html
<script type="text/javascript" src="{{ asset('bundles/pfesiivt/js/visio.js') }}"></script> <div id="main"> <div id="" style="height:280px;width:700;"> <div id="livevideodivk" style="float:left;"> <video id="sourcevid" style="height:280px;width:320px;" autoplay></video> </div> <div id="remotevideodivk" style="float:left;margin-left:10px"> <video id="remotevid" style="height:280px;width:320px;" autoplay></video> </div> </div> <center> <button id="btn" type="button" onclick="startvideo();">start video</button> <button id="btn" type="button" onclick="stopvideo();">stop video</button> <button id="btn" type="button" onclick="connect();">connect</button> <button id="btn" type="button" onclick="onhangup();">hang up</button> </center> </div>
have not gone through complete code, starters...
- for firefox
mozrtcpeerconnectionnotrtcpeerconnection. - secondly, firefox
peerconnectionobject,onicecandidatehandler missing.
p. s: think bad idea post complete code, advice bit of debugging yourself( identify block causing issue) , post relevant block when not able solve it.
Comments
Post a Comment