matt s matt s - 28 days ago 4
Javascript Question

Getting a type error saying my websocket variable is undefined

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

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.