js获取摄像头视频流

Posted yoyo002

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js获取摄像头视频流相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <video id="video" width="640" height="480" autoplay></video>
    <button id="snap">Snap Photo</button>
    <canvas id="canvas" width="640" height="480"></canvas>
    <h2>按钮模拟拍照</h2>
</body>
<script type="text/javascript">
    var aVideo = document.getElementById(‘video‘);
    var aCanvas = document.getElementById(‘canvas‘);
    var ctx = aCanvas.getContext(‘2d‘);

    navigator.getUserMedia = navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia; //获取媒体对象（这里指摄像头）
    navigator.getUserMedia({
        video: true
    }, gotStream, noStream); //参数1获取用户打开权限；参数二成功打开后调用，并传一个视频流对象，参数三打开失败后调用，传错误信息

    function gotStream(stream) {
        video.src = URL.createObjectURL(stream);
        video.onerror = function() {
            stream.stop();
        };
        stream.onended = noStream;
        video.onloadedmetadata = function() {
            alert(‘摄像头成功打开！‘);
        };
    }

    function noStream(err) {
        alert(err);
    }

    document.getElementById("snap").addEventListener("click", function() {
        ctx.drawImage(aVideo, 0, 0, 640, 480); //将获取视频绘制在画布上
    });
</script>

</html>

　　

以上是关于js获取摄像头视频流的主要内容，如果未能解决你的问题，请参考以下文章

js获取摄像头视频流

为啥我使用承保代码从网络摄像头获取图像而不是视频

手机web页面怎么调用摄像头执行扫描，获取数据？

从视频流中获取像素数据

如何使用 Java 从网络摄像头获取视频和音频流？

Android MediaMetadataRetriever.getFrameAtTime 跳过帧