h5调用本地摄像头实现拍照，获取原生图片怎么实现

Question

webcam.js有人实现过嘛 h5调用navigator.getUserMedia已经实现，但是用canvas绘制出的图片失真，想问一下有什么办法直接获取电脑自带相机拍照的照片吗

Answer 1

调用摄像头：navigator.mediaDevices.getUserMedia
拍照：context.drawImage(video, 0, 0, 480, 320);
转base64:var img_base64 = canvas.toDataURL("image/jpeg", 0.5);

Answer 2

我有这方面的内容你可以来我的主页看看

Answer 3

navigator.getUserMedia
https://developer.mozilla.org...

给html上的canvas写上widht="3840" height="2160"
context.drawImage(video, 0, 0, 1920,1080);
改成
context.drawImage(video, 0, 0, 3840,2160);

把两处

{
    video: true
}

改为

{
    "video": {width: 3840, height: 2160}
},    

---

还有另一种方案

<input type="file" capture="camera" accept="image/*"/>

---

压缩的话
https://developer.mozilla.org...
type传'image/jpeg'再设置合适的encoderOptions值，或者修改之前代码中canvas尺寸