Web端拍照的另一种实现方式

terrence386

发布于 2022-07-14 20:58:57

49800

代码可运行

文章被收录于专栏：JavaScript高级程序设计JavaScript高级程序设计

运行总次数：0

代码可运行

未来的IT工程师有两种，端工程师，云工程师

前情回顾

上篇文章大致总结了成为技术负责人需要的能力。今天本来聊一下web端的拍照方案方案。web端的拍照方案大致有以下两种，一是我们比较常见的图片上传的方案<input type="file" capture=camera/>可以调起摄像头。另外一种就不太常见了，利用webrtc的api方法navigator.mediaDevices.getUserMedia。

具体思路

在界面上放置一个video标签，同时在界面上渲染一个canvas,然后点击按钮调起getUserMedia方法获取媒体流信息，在video标签中实时播放媒体流数据，同时点击拍照按钮时将video标签中的画面绘制到canvas中即可。

具体代码可能如下

HTML标记

  <div class="camera">
    <video id="video">Video stream not available.</video>
    <button id="startbutton">Take photo</button>
  </div>
  <canvas id="canvas" style="display:none;">
  </canvas>
  <div class="output">
    <img id="photo" alt="The screen capture will appear in this box.">
  </div>

js代码

  var width = 320;    // We will scale the photo width to this
  var height = 0;     // This will be computed based on the input stream

  var streaming = false;

  var video = null;
  var canvas = null;
  var photo = null;
  var startbutton = null;
  
  function startup() {
    video = document.getElementById('video');
    canvas = document.getElementById('canvas');
    photo = document.getElementById('photo');
    startbutton = document.getElementById('startbutton');
    
    navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then(function(stream) {
        video.srcObject = stream;
        video.play();
    })
    .catch(function(err) {
        console.log("An error occurred: " + err);
    });
    
    video.addEventListener('canplay', function(ev){
      if (!streaming) {
        height = video.videoHeight / (video.videoWidth/width);

        video.setAttribute('width', width);
        video.setAttribute('height', height);
        canvas.setAttribute('width', width);
        canvas.setAttribute('height', height);
        streaming = true;
      }
    }, false);
    
    startbutton.addEventListener('click', function(ev){
      takepicture();
      ev.preventDefault();
    }, false);
    
    clearphoto();
  }
  
  // Fill the photo with an indication that none has been
  // captured.

  function clearphoto() {
    var context = canvas.getContext('2d');
    context.fillStyle = "#AAA";
    context.fillRect(0, 0, canvas.width, canvas.height);

    var data = canvas.toDataURL('image/png');
    photo.setAttribute('src', data);
  }
  
    function takepicture() {
    var context = canvas.getContext('2d');
    if (width && height) {
      canvas.width = width;
      canvas.height = height;
      context.drawImage(video, 0, 0, width, height);
    
      var data = canvas.toDataURL('image/png');
      photo.setAttribute('src', data);
    } else {
      clearphoto();
    }
  }