js 调用摄像头拍照

最新推荐文章于 2024-09-11 16:33:03 发布

原创最新推荐文章于 2024-09-11 16:33:03 发布 · 1.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#js调用摄像头 #javaScript #js电脑拍照

js 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了利用js、canvas和video调用本地摄像头实现拍照效果的方法，并提供了相关代码供学习参考，聚焦于信息技术领域的前端开发应用。

本文主要介绍，js+canvas+video ，调用本地摄像头，实现拍照效果，代码如下，供大家参考学习

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <video width="200px" id="video" height="150px"></video>
  <canvas width="200px" id="canvas" height="150px"></canvas>
  <p>
      <button id="start">打开摄像头</button>
      <button id="snap">截取图像</button>
      <button id="close">关闭摄像头</button>
  </p>
</body>
<script>
  // 声明变量
  var canvas = document.getElementById('canvas'),
     context = canvas.getContext('2d'),
     video = document.getElementById("video"),
     snap = document.getElementById("snap"),
     close = document.getElementById("close"),
     start = document.getElementById("start"),
     MediaStreamTrack;

  // 点击打开摄像头
  start.addEventListener('click', function () {
     if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
         navigator.mediaDevices.getUserMedia({
             video: true,
             // audio: true
         }).then(function (stream) {
             console.log(stream);
             MediaStreamTrack=typeof stream.stop==='function'?stream:stream.getTracks()[1];
             try{
                video.src=window.URL.createObjectURL(stream);
             }catch(e){  
                video.srcObject = stream;
             }
             video.play();
         }).catch(function(err){
             console.log(err);
         });
     }else if(navigator.getMedia){
         navigator.getMedia({
             video: true
         }).then(function (stream) {
             console.log(stream);
             MediaStreamTrack=stream.getTracks()[1];
             video.src=(window.webkitURL).createObjectURL(stream);
             video.play();
         }).catch(function(err){
             console.log(err);
         });
     }
  });
  // 截图
  snap.addEventListener('click', function () {
     context.drawImage(video, 0, 0,200,150);
  });
  // 关闭按钮
  close.addEventListener('click', function () {
     MediaStreamTrack && MediaStreamTrack.stop();
  });
</script>
</html>