h5 自定义相机样式拍照（Navigator.mediaDevi

mediaDevices 是 Navigator 只读属性，返回一个 MediaDevices 对象，该对象可提供对相机和麦克风等媒体输入设备的连接访问，也包括屏幕共享。

混合App开发：

1、使用navigator.mediaDevices.getUserMedia调用系统原生摄像头功能

2、video标签显示摄像头内容

3、canvas标签获取图片

html部分：

<img />

<canvas width="300" height="200" style="border: 1px solid;"></canvas>

<video width="300" height="300"></video>

<button id='c1'>拍照</button>

<button id="c2">重拍</button>

js部分：

//let constraints={video: { facingMode: { exact: "environment" } } };    //强制使用后置摄像头

//{video:true} 在移动设备上面，如下的例子默认优先使用前置摄像头

let constraints={video:true};   

navigator.mediaDevices.getUserMedia(constraints).then(res=>{

let video=document.querySelector('video');

 video.srcObject=res;   //输出到video

video.onloadedmetadata=function(){ video.play(); }    //视频加载成功之后播放

var canvas = document.querySelector('canvas');

var ctx = canvas.getContext("2d");

document.querySelector('#c1').onclick=function(){

ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

video.pause();

var img=canvas.toDataURL();  //将图像输出为base64压缩的字符串 默认为image/png

document.querySelector('img').src=img;

}

document.querySelector('#c2').onclick=function(){

video.play();

}

})