2016-11-12 1107 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任何值),你可以從內部功能不會改變。

相關問題