随笔 - 134  文章 - 0  评论 - 22  阅读 - 31万

js获取摄像头视频流

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!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>

  

posted on   yoyo002  阅读(16952)  评论(0编辑  收藏  举报
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示