IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Evénement qui ne se lance pas!


Sujet :

JavaScript

  1. #1
    Membre éclairé Avatar de scandinave
    Homme Profil pro
    Développeur Java, NodeJs/Angular
    Inscrit en
    Mai 2009
    Messages
    277
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Java, NodeJs/Angular

    Informations forums :
    Inscription : Mai 2009
    Messages : 277
    Par défaut Evénement qui ne se lance pas!
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    callButton.onclick = function(){that.call(that);};
    Comme dit plus haut, les événements
    onicecandidate
    et
    onaddstream
    ne sont jamais appelés. Je ne sais pas pourquoi.

    Une idée?

  2. #2
    Membre Expert

    Homme Profil pro
    Ingénieur Hospitalier
    Inscrit en
    Juillet 2004
    Messages
    993
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur Hospitalier
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 993
    Billets dans le blog
    1
    Par défaut
    Salut lorsque tu fait un
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  3. #3
    Membre éclairé Avatar de scandinave
    Homme Profil pro
    Développeur Java, NodeJs/Angular
    Inscrit en
    Mai 2009
    Messages
    277
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Java, NodeJs/Angular

    Informations forums :
    Inscription : Mai 2009
    Messages : 277
    Par défaut
    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
    gotLocalIceCandidate
    ,
    gotRemoteIceCandidate
    et
    gotRemoteStream
    , n'apparaissent pas.

  4. #4
    Membre Expert

    Homme Profil pro
    Ingénieur Hospitalier
    Inscrit en
    Juillet 2004
    Messages
    993
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur Hospitalier
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 993
    Billets dans le blog
    1
    Par défaut
    Salut peut tu me dire que te retourne : le paramètre de ta function proto Visio.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    Visio.prototype.call = function(visio){
    console.log(typeOf(visio));
    console.log(visio);

  5. #5
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par défaut
    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

  6. #6
    Membre éclairé Avatar de scandinave
    Homme Profil pro
    Développeur Java, NodeJs/Angular
    Inscrit en
    Mai 2009
    Messages
    277
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Java, NodeJs/Angular

    Informations forums :
    Inscription : Mai 2009
    Messages : 277
    Par défaut
    Oui j'ai remarqué ce conflit avec la méthode call.

    j'ai ceci maintenant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
     callButton.onclick = function () { that.startCall(); };
    L'ensemble du code :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 .

  7. #7
    Membre Expert
    Avatar de Kaamo
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Avril 2007
    Messages
    1 165
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Avril 2007
    Messages : 1 165
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $(document).ready(function(){
        new Visio(); 
    });
    tu n'as pas besoin de manipuler l'objet ensuite ?

    Tu as pensé à bind ? (ES5 donc prévoir polyfill si besoin)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    startButton.onclick = this.start.bind(this)

  8. #8
    Membre éclairé Avatar de scandinave
    Homme Profil pro
    Développeur Java, NodeJs/Angular
    Inscrit en
    Mai 2009
    Messages
    277
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Java, NodeJs/Angular

    Informations forums :
    Inscription : Mai 2009
    Messages : 277
    Par défaut
    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().

Discussions similaires

  1. Serveur Xorg sur debian testing qui ne se lance pas
    Par Cyrius dans le forum Applications et environnements graphiques
    Réponses: 7
    Dernier message: 01/01/2006, 23h25
  2. Tâche qui ne se lance pas avec cron
    Par bugalood dans le forum Administration système
    Réponses: 3
    Dernier message: 17/10/2005, 18h13
  3. Réponses: 3
    Dernier message: 16/09/2005, 10h01
  4. mmc.exe qui ne se lance pas
    Par r0d dans le forum Autres Logiciels
    Réponses: 2
    Dernier message: 27/04/2005, 17h11

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo