如何在Web应用程序中从Web摄像机捕获图像

Question

我正在使用Java脚本从网络摄像头捕获图像，但无法正常工作，请帮忙。

  <div>
   <video id="video" width="400" height="300" autoplay>

        </video>
        <button id="snap">take photo</button>
        <canvas id="canvas" width="400" height="300"></canvas>
    </div>
    <script>
        var video = document.getElementById('video');
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
        {
            navigator.mediaDevices.get{ { video: true, Audio: true } }.then(function (stream) {
                video.src = window.URL.createObjectURL(stream);
            });
        }
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        document.getElementById('snap').addEventListener('click', function(){
            context.drawImage(video, 0, 0, 400, 300);
        });
    </script>

Answer 1

您可以查看以下源代码示例：https://github.com/samdutton/simpl/blob/gh-pages/getusermedia/sources/js/main.js

结果在这里：https://simpl.info/getusermedia/sources/

Answer 2

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({ video: true, Audio: true } ).then(function (stream) { video.src = window.URL.createObjectURL(stream); }); }

我在听到错误消息时犯了错误，谢谢您的帮助！