Question

我正在尝试访问网络摄像头并在HTML标记的video页面上显示视频。在我运行HTML页面后，我收到一个弹出框，要求获得访问网络摄像头的权限，但在我授予权限后，没有任何反应。视频标签中未显示任何视频。下面是我的代码。我使用的是Firefox 57.0

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>webcam</title>
        <script type="text/javascript">
          var video = document.querySelector("#video");

          navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

          if (navigator.getUserMedia) {
            alert('hello');
              navigator.getUserMedia( {
                  video : true
              },
              handleVideo, videoError);
          }

          function handleVideo(stream) {
              video.src = window.URL.createObjectURL(stream);
          }

          function videoError(e) {
              // do something
          }

        </script>
    </head>
    <body>
        <table border="1" width="900" align="center">
            <tr align="center">
                <td>
                    Web Camera
                    <div id="camera" style="height:300px; width:400px; border-style:solid;">
                        <video id="video" width="400" height="300"></video>
                    </div>
                </td>
                <td>
                    Photo Frame
                    <div id="frame" style="height:300px; width:400px; border-style:solid;">
                        <canvas id="canvas" width="400" height="300"></canvas>
                    </div>
                </td>
            </tr>

            <tr align="center">
                <td colspan="2">
                    <button id="snap" onclick="snap()">Snap Photo</button>
                </td>
            </tr>
        </table>
    </body>
</html>

请指导我，我做错了什么。我经常搜索但却找不到任何东西。

Answer 1

尝试以下代码： - 只需对代码进行一处更改即可。完全加载DOM后执行代码。我已将你的代码包装在window.onload函数中。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>webcam</title>
        <script type="text/javascript">
          window.onload = function(){
              document.querySelector("#video");
console.log(video);
          navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

          if (navigator.getUserMedia) {
            alert('hello');
              navigator.getUserMedia( {
                  video : true
              },
              handleVideo, videoError);
          }

          function handleVideo(stream) {
              video.src = window.URL.createObjectURL(stream);
          }

          function videoError(e) {
              // do something
          }

          }; 
        </script>
    </head>
    <body>
        <table border="1" width="900" align="center">
            <tr align="center">
                <td>
                    Web Camera
                    <div id="camera" style="height:300px; width:400px; border-style:solid;">
                        <video id="video" width="400" height="300"></video>
                    </div>
                </td>
                <td>
                    Photo Frame
                    <div id="frame" style="height:300px; width:400px; border-style:solid;">
                        <canvas id="canvas" width="400" height="300"></canvas>
                    </div>
                </td>
            </tr>

            <tr align="center">
                <td colspan="2">
                    <button id="snap" onclick="snap()">Snap Photo</button>
                </td>
            </tr>
        </table>
    </body>
</html>

在上面的代码中，您将无法看到实时预览。

将handleVideo功能更改为： -

function handleVideo(stream) {
          video.src = window.URL.createObjectURL(stream);
          video.play();
      }

添加video.play();后，您会看到实时预览。

网络摄像头视频流未在html5视频标签中显示

1 个答案: