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

最近刚好有些时间，打算写一个完善一点的demo出来，处理一下兼容性和拍摄视频上传 ps：预计需要下周完成 2019-8-24

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" } }//后置

注意，以下HTML需要在HTTPS下访问方可正常工作

具体代码：

    
    
    
    
    


    



    

        
开启摄像头
        
显示到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

本文所用API可能被有所变更，可以访问MDN查看最新API MDN地址