Evénement qui ne se lance pas!

Version imprimable

Bonjour,
j'essaye de suivre un tuto concernant l'API RTCPeerConnection qui permet le partage de son, image, data entre navigateur.

Voici le code qui marche :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
function call() {
  callButton.disabled = true;
  hangupButton.disabled = false;
  trace("Starting call");
 
  if (localStream.getVideoTracks().length > 0) {
    trace('Using video device: ' + localStream.getVideoTracks()[0].label);
  }
  if (localStream.getAudioTracks().length > 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);
}

Voici mon code qui ne marche pas :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
Visio.prototype.call = function(visio){
    callButton.disabled = true;
    hangupButton.disabled = false;
    console.log("Starting call...");
    if (visio.localStream.getVideoTracks().length > 0) {
        visio.trace('Using video device: ' + visio.localStream.getVideoTracks()[0].label);
    }
    if (visio.localStream.getAudioTracks().length > 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);
};

avec mon appel à la méthode call :

Code:

callButton.onclick = function(){that.call(that);};

Comme dit plus haut, les événements

Citation:

onicecandidate

Citation:

onaddstream

ne sont jamais appelés. Je ne sais pas pourquoi.

Une idée?

05/08/2013, 19h09
headmax
Salut lorsque tu fait un
Code:

1 2 console.log(callButton);
En espérant qu'il ne te retourne pas un null ou undefined
ça voudrait dire que tu cible mal ton button callButton.
05/08/2013, 19h24
scandinave

Non, il est bien définie. De plus la méthode call est bien appelé. J'ai les log que j'ai mis dedans.

Par contre les log dans les méthodes

Citation:

gotLocalIceCandidate

,

Citation:

gotRemoteIceCandidate

et

Citation:

gotRemoteStream

, n'apparaissent pas.
05/08/2013, 21h53
headmax
Salut peut tu me dire que te retourne : le paramètre de ta function proto Visio.
Code:

1 2 3 4 Visio.prototype.call = function(visio){ console.log(typeOf(visio)); console.log(visio);
05/08/2013, 22h00
SylvainPV

Code:

that.call(that);

Non. Il ne faut pas passer l'objet en tant qu'argument d'une de ses méthodes, c'est le serpent qui se mord la queue. Ton objet sera accessible via this dans ta méthode. Aussi, nomme différemment la méthode pour ne pas s'emmêler les pinceaux avec Function.call

Oui j'ai remarqué ce conflit avec la méthode call.

j'ai ceci maintenant :

Code:

callButton.onclick = function () { that.startCall(); };

L'ensemble du code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
 
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(that);};
    callButton.onclick = function () { that.startCall(); };
    hangupButton.onclick = function(){that.hangup(that);};
 
 
};
 
Visio.prototype.trace = function(text) {
    console.log((performance.now() / 1000).toFixed(3) + ": " + text);
};
 
 
Visio.prototype.start = function(visio){
    startButton.disabled = true;
    this.cam.start();
    //Waiting for stream.
    var id = setInterval(function(){
        console.log("Getting Stream...");
        visio.localStream = visio.cam.stream;
        if(visio.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 > 0) {
        this.trace('Using video device: ' + this.localStream.getVideoTracks()[0].label);
    }
    if (this.localStream.getAudioTracks().length > 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(visio) {
  console.log("Ending call");
  visio.localPeerConnection.close();
  visio.remotePeerConnection.close();
  visio.localPeerConnection = null;
  visio.remotePeerConnection = null;
  hangupButton.disabled = true;
  callButton.disabled = false;
};

Mais cela ne marche pas non plus :( .

06/08/2013, 09h17
Kaamo
Code:

1 2 3 $(document).ready(function(){ new Visio(); });
:koi: tu n'as pas besoin de manipuler l'objet ensuite ?

Tu as pensé à bind ? (ES5 donc prévoir polyfill si besoin)

Code:

startButton.onclick = this.start.bind(this)
06/08/2013, 11h18
scandinave

Pour l'instant non, je n'en ai pas besoin, mais je préfère me laisser le choix facilement.

Je testerais le bind ce soir de retour chez moi mais je ne pense pas que ce soit ça. J'ai bien accès au this dans ma méthode startCall().