2018-03-18js调用摄像头拍照,js调用摄像头在线拍照,js调用电脑摄像头拍照,js调用笔记本电脑摄像头拍照

您现在的位置是: 首页 > WEB前端 > js调用摄像头拍照,js调用摄像头在线拍照,js调用电脑摄像头拍照,js调用笔记本电脑摄像头拍照

548次阅读


一、代码如下


<!DOCTYPE html>
<html lang="ZH-CN">
<head>
   <meta charset="utf-8">
   <title>js调用摄像头拍照,js调用摄像头在线拍照,js调用电脑摄像头拍照,js调用笔记本电脑摄像头拍照</title>
   <style>
      .booth {
         width:400px;

         background:#ccc;
         border: 10px solid #ddd;
         margin: 0 auto;
      }
   </style>
</head>
<body>

<div class="booth">
   <video id="video" width="400" height="300"></video>
   <button id='tack'>拍照</button>
   <canvas id='canvas' width='400' height='300'></canvas>
   <img id='img' src=''>
</div>

<script>
   var video = document.getElementById('video'),
         canvas = document.getElementById('canvas'),
         snap = document.getElementById('tack'),
         img = document.getElementById('img'),
         vendorUrl = window.URL || window.webkitURL;

   //媒体对象
 navigator.getMedia = navigator.getUserMedia ||
 navagator.webkitGetUserMedia ||
 navigator.mozGetUserMedia ||
 navigator.msGetUserMedia;
   navigator.getMedia({
      video: true, //使用摄像头对象
 audio: false  //不适用音频
 }, function(strem){
      console.log(strem);
      video.src = vendorUrl.createObjectURL(strem);
      video.play();
   }, function(error) {
      //error.code
 console.log(error);
   });
   snap.addEventListener('click', function(){

      //绘制canvas图形
 canvas.getContext('2d').drawImage(video, 0, 0, 400, 300);

      //把canvas图像转为img图片
 img.src = canvas.toDataURL("image/png");

   })
</script>
</body>
</html>


二、注意点


1、有些浏览器可能不支持此功能

2、必须通过服务器打开页面,通过files://打开无效

3、如果通过远程服务器打开则必须是https协议, http协议也无法使用


三、demo演示


https://www.whmblog.cn/video.html