0
我有一個視頻在我的頁面中播放,我試圖捕獲幀並通過websocket將它們發送到服務器。得到一個類型錯誤,說我的websocket變量是undefined
我已經成功建立了與服務器的連接,並且還完成了websocket握手。
但是我得到了我的postVideoToServer()
功能以下錯誤:
"TypeError: clientSocket is undefined" index.html:60:5
的ClientSocket的實際上是客戶端用來與服務器通信的插座。我已經使用這個變量已經在clientSocket.onopen
成功發送數據到服務器。
我做了一些研究,發現它意味着一個值不是預期的類型。它對我仍然沒有意義。任何解釋將不勝感激。
這是我的js代碼的一部分。如果需要更多,請告訴我。
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.");
};
}
當我點擊以下
<button onclick="startRecording(video)" class="recordbutton">Turn camera on</button>