title: Why this JavaScript event that does not start?
body: <p>I'm trying to follow a tutorial on RTCPeerConnection API that enables the sharing of sound, image, data between browsers.</p>
  
  <p>Here is the code that works:</p>
  
  <pre><code>function call() {
    callButton.disabled = true;
    hangupButton.disabled = false;
    trace("Starting call");
  
    if (localStream.getVideoTracks().length &gt; 0) {
      trace('Using video device: ' + localStream.getVideoTracks()[0].label);
    }
    if (localStream.getAudioTracks().length &gt; 0) {
      trace('Using audio device: ' + localStream.getAudioTracks()[0].label);
    } 
  
    var servers = null;
  
    localPeerConnection = new mozRTCPeerConnection(servers);
    console.log(localPeerConnection);
    trace("Created local peer connection object localPeerConnection");
    localPeerConnection.onicecandidate = gotLocalIceCandidate;
  
    remotePeerConnection = new mozRTCPeerConnection(servers);
    trace("Created remote peer connection object remotePeerConnection");
    remotePeerConnection.onicecandidate = gotRemoteIceCandidate;
    remotePeerConnection.onaddstream = gotRemoteStream;
  
    localPeerConnection.addStream(localStream);
    trace("Added localStream to localPeerConnection");
    localPeerConnection.createOffer(gotLocalDescription);
  }
  </code></pre>
  
  <p>Here is my code that does not work:</p>
  
  <pre><code>Visio.prototype.call = function(visio){
      callButton.disabled = true;
      hangupButton.disabled = false;
      console.log("Starting call...");
      if (visio.localStream.getVideoTracks().length &gt; 0) {
          visio.trace('Using video device: ' + visio.localStream.getVideoTracks()[0].label);
      }
      if (visio.localStream.getAudioTracks().length &gt; 0) {
          visio.trace('Using audio device: ' + visio.localStream.getAudioTracks()[0].label);
      }
  
      var servers = null;
      visio.localPeerConnection = new RTCPeerConnection(servers);
      console.log(visio.localPeerConnection );
      console.log("Created local peer connection object localPeerConnection");
      visio.localPeerConnection.onicecandidate = visio.gotLocalIceCandidate;
  
      visio.remotePeerConnection = new RTCPeerConnection(servers);
      console.log("Created remote peer connection object remotePeerConnection");
      visio.remotePeerConnection.onicecandidate = visio.gotRemoteIceCandidate;
      visio.remotePeerConnection.onaddstream = visio.gotRemoteStream;
  
      visio.localPeerConnection.addStream(visio.localStream);
      console.log("Added localStream to localPeerConnection");
      visio.localPeerConnection.createOffer(visio.gotLocalDescription);
  };
  </code></pre>
  
  <p>with my call to the <code>call</code> method :</p>
  
  <pre><code>callButton.onclick = function(){that.call(that);};
  </code></pre>
  
  <p>As said in the title, the events : onicecandidate and onaddstream never triggered. I do not know why.</p>
  
  <p>Any idea?</p>
  
  <hr>
  
  <p>Ok , i modified my function. But it doesn't works anymore :(</p>
  
  <p>This is the full code : </p>
  
  <p>Visio.js</p>
  
  <pre><code>if(mozRTCPeerConnection){
      RTCPeerConnection = mozRTCPeerConnection;
  }else if(webkitRTCPeerConnection){
      RTCPeerConnection = webkitRTCPeerConnection;
  } else if(oRTCPeerConnection) {
      RTCPeerConnection = oRTCPeerConnection;
  } else {
      alert("Votre navigateur ne supporte pas l'API RTCPeerConnection");
  }
  $(document).ready(function(){
      new Visio(); 
  });
  
  function Visio() {
      this.localStream, this.localPeerConnection, this.remotePeerConnection;
      this.cam = new Cam();
      //var localVideo = document.getElementById("localVideo");
      var remoteVideo = document.getElementById("remoteVideo");
      var startButton = document.getElementById("startButton");
      var callButton = document.getElementById("callButton");
      var hangupButton = document.getElementById("hangupButton");
      startButton.disabled = false;
      callButton.disabled = true;
      hangupButton.disabled = true;
      var that = this;
      startButton.onclick = function(){that.start();};
      callButton.onclick = function () { that.startCall(); };
      hangupButton.onclick = function(){that.hangup();};
  
  
  };
  
  Visio.prototype.trace = function(text) {
      console.log((performance.now() / 1000).toFixed(3) + ": " + text);
  };
  
  
  Visio.prototype.start = function(){
      startButton.disabled = true;
      this.cam.start();
      //Waiting for stream.
      var that = this;
      var id = setInterval(function(){
          console.log("Getting Stream...");
          that.localStream = that.cam.stream;
          if(that.localStream !== null){
              console.log("Stream Ok!");
              callButton.disabled = false;
              clearInterval(id);
          }
      },500);
  };
  
  Visio.prototype.startCall = function () {
      callButton.disabled = true;
      hangupButton.disabled = false;
      console.log("Starting call...");
      if (this.localStream.getVideoTracks().length &gt; 0) {
          this.trace('Using video device: ' + this.localStream.getVideoTracks()[0].label);
      }
      if (this.localStream.getAudioTracks().length &gt; 0) {
          this.trace('Using audio device: ' + this.localStream.getAudioTracks()[0].label);
      }
  
      var servers = null;
      this.localPeerConnection = new RTCPeerConnection(servers);
      console.log("Created local peer connection object localPeerConnection");
      this.localPeerConnection.onicecandidate = this.gotLocalIceCandidate;
  
      this.remotePeerConnection = new RTCPeerConnection(servers);
      console.log("Created remote peer connection object remotePeerConnection");
      this.remotePeerConnection.onicecandidate = this.gotRemoteIceCandidate;
      this.remotePeerConnection.onaddstream = this.gotRemoteStream;
  
      this.localPeerConnection.addStream(this.localStream);
      console.log("Added localStream to localPeerConnection");
      this.localPeerConnection.createOffer(this.gotLocalDescription);
  };
  
  Visio.prototype.gotLocalDescription = function(description){
      this.localPeerConnection.setLocalDescription(description);
      console.log("Offer from localPeerConnection: \n" + description.sdp);
      this.remotePeerConnection.setRemoteDescription(description);
  
      this.remotePeerConnection.createAnswer(this.gotRemoteDescription);
  }; 
  
  Visio.prototype.gotRemoteDescription = function(description){
    this.remotePeerConnection.setLocalDescription(description);
    console.log("Answer from remotePeerConnection: \n" + description.sdp);
    this.localPeerConnection.setRemoteDescription(description);
  };
  
  Visio.prototype.gotRemoteStream = function(event){
    remoteVideo.src = URL.createObjectURL(event.stream);
    trace("Received remote stream");
  };
  
  Visio.prototype.gotLocalIceCandidate = function(event){
    if (event.candidate) {
      remotePeerConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
      trace("Local ICE candidate: \n" + event.candidate.candidate);
    }
  };
  
  Visio.prototype.gotRemoteIceCandidate = function(event){
    if (event.candidate) {
      localPeerConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
      trace("Remote ICE candidate: \n " + event.candidate.candidate);
    }
  };
  
  Visio.prototype.hangup = function() {
    console.log("Ending call");
    this.localPeerConnection.close();
    this.remotePeerConnection.close();
    this.localPeerConnection = null;
    this.remotePeerConnection = null;
    hangupButton.disabled = true;
    callButton.disabled = false;
  };
  </code></pre>
  
  <p>And cam.js</p>
  
  <pre><code>/* 
   * To change this template, choose Tools | Templates
   * and open the template in the editor.
   */
  function Cam(){
      this.video = null;
      this.stream = null;
      navigator.getUserMedia ||
              (navigator.getUserMedia = navigator.mozGetUserMedia ||
              navigator.webkitGetUserMedia || navigator.msGetUserMedia);
      if (!navigator.getUserMedia) {
          alert('getUserMedia is not supported in this browser.');
      }
  };
  
  Cam.prototype.start = function(){
      var that = this;
      navigator.getUserMedia({
          video: true, 
          audio: true
      }, function(stream){that.onSuccess(stream);}, that.onError);
  };
  
  Cam.prototype.stop = function(){
      this.stopVideo();
      this.stopSound();
  };
  
  Cam.prototype.startSound = function(){
  
  };
  
  Cam.prototype.stopSound = function(){
  
  };
  
  Cam.prototype.startVideo = function(){
  
  };
  
  Cam.prototype.stopVideo = function(){
  
  };
  
  Cam.prototype.onSuccess = function(stream){
      var source = document.getElementById('localVideo');
      var videoSource = null;
      this.stream = stream;
      if (window.webkitURL) {
        videoSource = window.webkitURL.createObjectURL(stream);
      } else {
        videoSource = window.URL.createObjectURL(stream);
      }
      this.stream = stream;
      source.autoplay = true;
      source.src = videoSource;
      this.video = source;
  };
  
  Cam.prototype.onError = function(err) {
      alert('There has been a problem retrieving the streams - did you allow access?' + err);
  };
  </code></pre>
  
  <p>Maybe it can help you :).</p>