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" } }//后置
具体代码：
Document1
开启摄像头
显示到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
除此之外，drawImage()还可以画video，参考链接