未捕获的TypeError:无法读取null的Node.js属性'getContext'

时间:2016-04-08 16:38:47

标签: javascript jquery html

我正在尝试为项目创建流式视频,我在node.js中创建包括html,我无法完成此错误 Uncaught TypeError: Can not read property 'getContext' of null

然后我需要解决这个问题,但我不能因为我寻求解决方案和这种类型的错误,但没有一个对我来说只能解决问题 我不得不评论这些方面:

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

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

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

这是我的项目代码:                                     艾米蒂尔视频                                     

    <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>

谢谢,我会帮助你。

1 个答案:

答案 0 :(得分:0)

您需要将id "preview"更改为id="preview",然后您可以转到下一个错误:)