Question

我的网页显示此页面正在访问相机，但我无法在我的页面上看到网络摄像头。
如果我需要更改任何设置，请告知我们 //视频和画布标签的html代码。以下是要显示的代码

<video id="video" width="640" height="480" autoplay></video>
<canvas id="canvas" width="640" height="480"></canvas>
<button id="snap">Snap Photo</button>

javascript script.js

//To Access Camera
var video = document.getElementById('video');
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // Not adding `{ audio: true }` since we only want video now
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        video.src = window.URL.createObjectURL(stream);
        video.play();
    });
}

HTML

<body>
    <div class="container">
        <div class="top">

        </div><br></br><br></br><br></br>
        <div class="login-box animated fadeInUp">
            <div class="box-header">
                <h2>Face Detect</h2>
            </div>
            <button type="submit"><a onclick="onStream()">Start</a></button>

            <br/>
        </div>
        <video id="video" width="10" height="10" autoplay></video>
            <canvas style="float:right" id="canvas" width="640" height="480"></canvas>
    </div>
</body>

和

var canvas, context, video, videoObj; 
function onStream() { 
  canvas = document.getElementById("canvas"); 
  context = canvas.getContext("2d"); 
  video = document.getElementById("video"); 
  var constraints = { 
    audio: true, video: { width: 1280, height: 720 } 
  }; 
  navigator.mediaDevices.getUserMedia(constraints) .then(function(mediaStream) { 
    var video = document.querySelector('video'); 
    video.srcObject = mediaStream; video.onloadedmetadata = function(e) { 
      video.play(); 
    }; 
  }) 
}

我的网页说这个页面正在访问相机，但我无法在我的页面上看到网络摄像头

0 个答案: