HTML5调用手机前置摄像头或后置摄像头拍照，canvas显示,经过Android测试

HTML5可以通过调用navigator.getUserMedia来获取手机设备摄像头，兼容性写法如下

window.navigator.getUserMedia = navigator.getUserMedia || navigator.webKitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

但是navigator.getUserMediau已经从 Web 标准中删除，虽然部分浏览器可以使用，生产环境中还是要做好兼容。新的API更替为MediaDevices.getUserMedia。MediaDevices.getUserMedia可以通过video的facingMode属性指定调用手机的前置或后置摄像头
video:{ 'facingMode': "user" }//调用前置摄像头
video: { facingMode: { exact: "environment" } }//后置

具体代码：

    
    
    
    
    


    



    

        
开启摄像头
        
显示到Canvas
        
关闭摄像头
    
    

        

        
    



    

以上代码并没有进行太多的错误处理，比如用户拒绝授权访问摄像头或浏览器不支持等情况，生产环境使用需添加错误处理代码

以上代码在PC端和Android手机端和微信测试通过，IOS下浏览器均不支持，据说IOS11会开放权限。
注意，以上HTML需要在HTTPS下访问方可正常工作
查看在线DEMO，如果使用微信访问可能被屏蔽，微信打开链接后点击右下角“访问原网页”
如需本地测试请使用Chrome插件：web-server;
webserver使用方法：chrome://apps > web-server > choose folder 勾选 Show Advanced Settings下Set CORS Headers即可
使用input type=”file”调用摄像头拍照可以参考camera API

补充下，获取vedio的实际尺寸，可以通过：this.videoWidth，this.videoHeight获取。

HTML5之drawImage函数

可用函数

drawImage(image, x, y) //按原图片大小绘制。
drawImage(image, x, y, width, height) //按指定大小绘制。
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, 
destX, destY, destWidth, destHeight) //常用于图片裁剪

参数

image:所要绘制的图像。这必须是表示  标记或者屏幕外图像的 Image 对象，或者是 Canvas 元素。 
x和y：图片在文档中的坐标位置。 
width和height：图片的宽高。 
对于drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, 
destX, destY, destWidth, destHeight) 常用有图片的裁剪。其参数含义是原来image上从某一个位置开始(sourceX,sourceY)，指定长宽进行剪切(sourceX,sourceY),然后将剪切的内容放到位置为(destX,destY),宽度为(destWidth),高度为(destHeight)的位置上，当然裁剪后的会覆盖原来的图片。

---

除此之外，drawImage()还可以画video，参考链接