2016-11-12 41 views
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> 

回答

2

按钮您neeed删除所有功能ClientSocket的参数,只需要使用全局变量中的startRecording功能被触发。因为即使当你调用:

onclick="startRecording(video, clientSocket)" 

ClientSocket的将是不确定的(你没有assing任何值),你可以从内部功能不会改变。

相关问题