Erhalte einen Typfehler, der sagt, dass meine Websocketvariable nicht definiert ist.

Question

Ich habe ein Video auf meiner Seite abgespielt und versuche die Frames zu erfassen und sie über einen Websocket an einen Server zu senden.

Ich habe eine Verbindung mit dem Server erfolgreich auch den Websocket-Handshake getan.

Allerdings bekomme ich folgende Fehler in meiner postVideoToServer() Funktion:

"TypeError: clientSocket is undefined" index.html:60:5

Die Clientsocket ist eigentlich die Buchse der Client mit dem Server kommuniziert. Ich habe diese Variable bereits in clientSocket.onopen verwendet, um Daten erfolgreich an den Server zu senden.

Ich habe etwas recherchiert und herausgefunden, dass es bedeutet, dass ein Wert nicht vom erwarteten Typ ist. Es macht immer noch keinen Sinn für mich. Jede Erklärung wird geschätzt.

Hier ist ein Teil meines Js-Codes. Wenn mehr benötigt wird, lass es mich wissen.

var bStop = true; 
    var bOldBrowser = false; 
    var video; 
    var streamRecorder; 
    var webcamstream; 
    var clientSocket; 

function postVideoToServer(clientSocket,frame) 
{ 
     clientSocket.send(frame); 
} 

function draw(v, cc, w, h, c, clientSocket) 
{ 
     cc.drawImage(v, 0, 0, w, h); //draw video frame on canvas 
     var frameData =c.toDataURL(); //turn canvas to raw png format 
     postVideoToServer(clientSocket,frameData); 

     if(!bStop) 
      setTimeout(function() { draw(v, cc, w, h, c, clientSocket) }, 40); //40 * 25 = 1000 ==> draw canvas every 40 ms to have 25FPS 
    } 

    function startRecording(video, clientSocket) 
    {  
     video = document.querySelector('video'); 
     var canvas = document.getElementById('canvas'); 
     var canvasContext = canvas.getContext('2d'); 
     var width = video.videoWidth; 
     var height = video.videoHeight; 

     canvas.width = width; 
     canvas.height = height; 

     bStop = false; 

     //establish connection with server 
     establishSocketConnection(clientSocket,"ws://localhost:3000/web/project/Server.php"); 
     draw(video, canvasContext, width, height, canvas, clientSocket)    
    } 


    function establishSocketConnection(clientSocket,URL) 
    { 
     clientSocket = new WebSocket(URL); //create socket to server 
     clientSocket.onopen = function (e) 
     { 
      console.log("socket open"); 
     } 

     clientSocket.onclose = function (e) 
     { 
      console.log("Socket connection closed : "+e); 
     } 

     clientSocket.onerror = function(error) 
     { 
      alert("Failed to connect to server...Please try again later."); 
     };    

    }  

Die startRecording Funktion wird ausgelöst, wenn ich auf die Schaltfläche klicken unten

<button onclick="startRecording(video)" class="recordbutton">Turn camera on</button> 

Answer 1

Sie neeed den Clientsocket-Parameter aus allen Funktionen entfernen und verwenden Sie nur globale Variable. denn selbst wenn Sie anrufen:

wird

onclick="startRecording(video, clientSocket)" 

Clientsocket undefiniert (du hast assing es nicht Wert) und man kann es nicht von innen Funktion ändern.