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

2022-07-14 20:58:57 浏览数 (1)

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

前情回顾

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

具体思路

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

具体代码可能如下

  • HTML标记
代码语言:javascript复制
  <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代码
代码语言:javascript复制
  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();
    }
  }

总结

  • 有很多jsApi我们在实际的工作中都没有用到过,但是有时候似乎又是需要了解的,所以还是要多思考一下问题的解决方案,不同的人的实现思路不一样,用了不同的API实现的方式也不一样。
  • 还是要不断扩充自己的知识面

javascript基础知识总结

0 人点赞