前端调用手机摄像头权限进行扫码解析

前端调用手机摄像头权限进行扫码解析（demo含Vue及原生js写法）

项目必须基于HTTPS协议！！！

引子

本人马上毕业了，现在在新单位实习前端，有个需求需要在移动Web端调用摄像头进行扫码，这方面之前没有接触过，但时间有限，只能走一步看一步，首先收集资料：

1. 调用设备扫码功能在安卓app上有api可以调用，Hbulider 5+app中也有现成的api，但我这个项目已经开发了很久了，只能新加模块，显然不符合上面的情况。
2. 原生Web有个api叫 Navigator.mediaDevices。
   mediaDevices 是 Navigator 只读属性，返回一个 MediaDevices 对象，该对象可提供对相机和麦克风等媒体输入设备的连接访问，也包括屏幕共享。
3. 扫码解析则可以使用 qrcode.js 这一个js库。

实践

// 调用摄像头方法，原生Navigator.mediaDevices api
function setwebcam(){
   
   
var options = true;
if(navigator.mediaDevices && navigator.mediaDevices.enumerateDevices)
{
   
   
  try{
   
   
      navigator.mediaDevices.enumerateDevices().then(function(devices) {
   
   
        devices.forEach(function(device) {
   
   
          if (device.kind === 'videoinput') {
   
   
		options={
   
   'deviceId': {
   
   'exact':device.deviceId}, 'facingMode':'environment'} ;
			console.log(device);
            }
           console.log(device.kind + ": " + device.label +" id = " + device.deviceId);
          });
		  console.log(options)
          setwebcam2(options);
        });
    }
    catch(e)
    {