zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    全局变量引用与声明
    Oracle基础~dg原理
    Oracle基础~dg管理
    Oracle基础~rman克隆
    oracle基础~rman恢复篇
    oracle基础~linux整体性能优化
    oracle基础~报错汇总与解决办法
    oracle基础~用户和权限
    oracle基础~rac-asm
    oracle基础~awr报告
  • 原文地址:https://www.cnblogs.com/yoyogis/p/7810935.html
Copyright © 2011-2022 走看看