Question

此代码适用于google chrome fine，但我试图将其转换为支持Firefox 我总是在控制台中没有错误。凸轮似乎毁了，但没有视频。这是脚本

  var socket = new WebSocket('ws://127.0.0.1:1338/');  // change the IP address to your 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 the message to 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 to create PeerConnection, exception: " + e.message);
        }
    }

    peerConn.onaddstream = onRemoteStreamAdded;
    peerConn.onremovestream = onRemoteStreamRemoved;
  }

  // when remote adds a stream, hand it on to the 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 a stream, remove it from the 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 the 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 to 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 to 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')  --> will never happened since isRTCPeerConnection=true initially
    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 the source of the video element with the stream from the 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 = "";
  }

这是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>

Answer 1

没有完成整个代码，但对于初学者来说......

对于Firefox，$.each(response, function (i, o) { trHTML += '<tr><td>' + o.Name + '</td><td>' + o.Group + '</td><td>' + o.Work + '</td><td>' + o.Grade1 + '</td><td>' + o.Grade2 + '</td><td>' + o.Grade3 + '</td><td>' + o.TeacherName + '</td><td>' + o.RollNo. + '</td></tr>'; });不是mozRTCPeerConnection。
其次，对于firefox RTCPeerConnection对象，PeerConnection处理程序丢失了。

<强> P上。 S：我认为发布完整的代码是一个非常糟糕的主意，建议自己做一些调试（以识别导致问题的块），然后在无法解决时发布相关的块。

如何在firefox中实现webRTC？

1 个答案: