Getting a type error saying my websocket variable is undefined

Question

I'm having a video playing in my page and I'm trying to capture the frames and send them to a server through a websocket.

I have established a connection with the server successfully having also done the websocket handshake.

However I get the following error in my postVideoToServer() function:

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

The clientsocket is actually the socket the client uses to communicate with the server. I have used this variable already in clientSocket.onopen to send data to the server successfully.

I did some research and found out that it means that a value is not of the expected type. It still doesn't make sense to me. Any explanation will be appreciated.

Here is part of my js code. If more is needed let me know.

  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.");
        };               

   }    

The startRecording function is triggered when I click the button below

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

Answer 1

You neeed remove the clientSocket parameter from all functions and just use global variable. because even when you call:

 onclick="startRecording(video, clientSocket)"

clientSocket will be undefined (you didn't assing it any value) and you can't change it from inside function.