Html5调用本地摄像头

野性酷女 2022-04-15 02:58 352阅读 0赞

<!DOCTYPE html> 
    <html>  
      <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style>
          #canvas,#video {
            float: left;  
            margin-right: 10px;  
            background: #fff;  
          }      
          .box {  
            overflow: hidden;  
            margin-bottom: 10px;  
          }
        </style>
      </head>  
      <body>  
        <div class="box">
          <video id="video" width="400" height="300"></video>
          <canvas id="canvas"></canvas>
        </div>
        <button id="live">直播</button>
        <button id="snap">截图</button>
        <script>  
          var video = document.getElementById('video');
          var canvas = document.getElementById('canvas');  
          var ctx = canvas.getContext('2d');  
          var width = video.width;  
          var height = video.height;  
          canvas.width = width;  
          canvas.height = height;   
          function liveVideo(){  
            var URL = window.URL || window.webkitURL;   // 获取到window.URL对象
            navigator.getUserMedia({  
              video: true  
            }, function(stream){  
              video.src = URL.createObjectURL(stream);   // 将获取到的视频流对象转换为地址
              video.play();   // 播放
              //点击截图     
              document.getElementById("snap").addEventListener('click', function() {  
                ctx.drawImage(video, 0, 0, width, height);  
                var url = canvas.toDataURL('image/png');  
                document.getElementById('download').href = url;  
              });
            }, function(error){  
              console.log(error.name || error);  
            });  
          }  
          document.getElementById("live").addEventListener('click',function(){  
            liveVideo();  
          });    
        </script>  
      </body> 
    </html>

测试google浏览器:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODI3MjQ1NTYz_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODI3MjQ1NTYz_size_16_color_FFFFFF_t_70]: /images/20220415/a7dd248f743a44b980039e6be2c85913.png