h5实现相机

什么是取景器

取景器是什么？取景器是相机的一个专业术语，在前端就是扫描拍照

取景器的实现原理

请求手机的一个媒体类型的视频轨道，利用一个div或者图片作为上层蒙层，然后在利用canvas绘制视频中某一帧的画面绘制为图片。

前期知识准备

- # MediaDevices.getUserMedia()

MediaDevices.getUserMedia() - Web API 接口参考 | MDN 在mdn中介绍了，这个api会调取摄像头，获取一个媒体轨道，这里我们只需要重点关注视频轨道,mdn对api的讲解也很清楚，下面是mdn的做好兼容的代码只需要直接使用

值得注意的点

1. 该api必须https
2. 兼容老版本浏览器

// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
if (navigator.mediaDevices === undefined) {
  navigator.mediaDevices = {};
}

// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
// 因为这样可能会覆盖已有的属性。这里我们只会在没有 getUserMedia 属性的时候添加它。
if (navigator.mediaDevices.getUserMedia === undefined) {
  navigator.mediaDevices.getUserMedia = function(constraints) {

    // 首先，如果有 getUserMedia 的话，就获得它
    var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

    // 一些浏览器根本没实现它 - 那么就返回一个 error 到 promise 的 reject 来保持一个统一的接口
    if (!getUserMedia) {
      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
    }

    // 否则，为老的 navigator.getUserMedia 方法包裹一个 Promise
    return new Promise(function(resolve, reject) {
      getUserMedia.call(navigator, constraints, resolve, reject);
    });
  }
}

navigator.mediaDevices.getUserMedia(
{
                audio: false, //不需要获取声音
                video: {
                    //后置摄像头
                    facingMode: 'environment',
                    //分辨率，理想是2040，如果没有，最小1280，没有设置会比较模糊
                    width: { min: 1280, ideal: 2040 },
                    height: { min: 720, ideal: 1080 },
                },
            }
)
.then(function(stream) {
  var video = document.querySelector('video');
  // 旧的浏览器可能没有 srcObject
  if ("srcObject" in video) {
    video.srcObject = stream;
  } else {
    // 防止在新的浏览器里使用它，应为它已经不再支持了
    video.src = window.URL.createObjectURL(stream);
  }
  video.onloadedmetadata = function(e) {
    video.play();
  };
})
.catch(function(err) {
  console.log(err.name + ": " + err.message);
});

• canvas绘图-drawImage

HTML5 canvas drawImage() 方法 canvas绘制，主要是要注意绘制过程中的参数，w3cschool也写的非常清楚，暂不做重复说明

案例源码

html部分

 

            
            
            
            开始
            重拍
            完成

            

                

css部分

js逻辑部分

注意一些细节功能

在ios的微信内置浏览器中，必须用户手动调用才会自动播放视频，因此兼容ios内置浏览器需加按钮让用户自动点击

整个功能就完结啦 参考以下文章

• Html5调用手机摄像头后添加取景框并使用WebUploader上传 - 灰信网（软件开发博客聚合）
• 兼容性相关：h5调用摄像头拍照兼容性及原生实现拍照取景框 - 简书