js获取摄像头视频流

最新推荐文章于 2024-08-04 16:33:59 发布

weixin_30527423

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量2.6k

点赞数

文章标签： javascript 前端人工智能 ViewUI

原文链接：http://www.cnblogs.com/yoyogis/p/7810935.html

版权

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

转载于:https://www.cnblogs.com/yoyogis/p/7810935.html

weixin_30527423

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js获取摄像头视频流

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body> <video id="video" width="640" height="48...
复制链接

扫一扫