Uncaught TypeError: Kann Eigenschaft 'getContext' von null nicht lesen Node.js

Question

Ich versuche, ein Streaming-Video für ein Projekt zu erstellen, ich erstelle in node.js einschließlich HTML, und ich kann nicht durch diesen Fehler Uncaught TypeError: Can not read property 'getContext' of null beenden

dann brauche ich das Problem zu beheben, aber ich kann nicht, weil ich suchte Lösungen und diese Art von Fehlern, aber keiner funktioniert für mich nur Problem zu umgehen ich auf diesen Linien zu kommentieren hatte:

var context = canvas.getContext("2d"); 

     canvas.width = 800; 
     canvas.height = 600; 

     context.width = canvas.width; 
     context.height = canvas.height 

Hier die Codes meines Projektes: emitir Video

<canvas style = "display:none;" id "preview" width='1280' height='720'></canvas> 

    <div id = "logger"></div> 

    <script type="text/javascript"> 
     var canvas = document.getElementById("preview"); 
     var context = canvas.getContext("2d"); // This is the line that generates the error 

     canvas.width = 800; 
     canvas.height = 600; 

     context.width = canvas.width; 
     context.height = canvas.height; 

     var video = document.getElementById("video"); 
     var socket = io(); 

     function logger(msg) 
     { 
      $("#logger").text(msg); 
     } 

     function loadCam(stream) 
     { 
      video.src = window.URL.createObjectURL(stream); 
      logger('Camara cargada correctamente [OK]'); 
     } 

     function loadFail() 
     { 
      logger('Camara no conectada, Favor Conectela'); 
     } 

     function viewVideo(video,context) 
     { 
      context.drawImage(video,0,0,context.width,context.height); 
      socket.emit('stream',canvas.toDataURL('image/webp')); 
     } 

     $(function(){ 
      navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msgGetUserMedia); 

      if (navigator.getUserMedia) 
      { 
       navigator.getUserMedia({video: true}, loadCam, loadFail); 
      } 
      //1000 = 1 Seg. 

      setInterval(function(){ 
       viewVideo(video,context); 
      },70); 

     }); 
    </script> 

</body> 
</html> 

Dank ich werde apreciate hilft.

Answer 1

Sie müssen id "preview" zu id="preview" ändern, dann können Sie sich auf, was auch immer bewegen wird der nächste Fehler sein :)