注意点是浏览器调用摄像头需要Https域名的网址或者localhost的网址。 下面直接看代码，逻辑很简单。 大家根据业务需要各取所需。
html
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<button id="conver">conver to img</button>
<img id="img" width="640" height="480" />
js
// Grab elements, create settings, etc.
var video = document.getElementById("video");
// Get access to the camera!
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
// Not adding `{ audio: true }` since we only want video now
navigator.mediaDevices
.getUserMedia({ video: true })
.then(function (stream) {
//video.src = window.URL.createObjectURL(stream);
video.srcObject = stream;
video.play();
});
}
/* Legacy code below: getUserMedia
else if(navigator.getUserMedia) { // Standard
navigator.getUserMedia({ video: true }, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia({ video: true }, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
} else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
navigator.mozGetUserMedia({ video: true }, function(stream){
video.srcObject = stream;
video.play();
}, errBack);
}
*/
// Elements for taking the snapshot
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var video = document.getElementById("video");
var img = document.getElementById("img");
// Trigger photo take
document.getElementById("snap").addEventListener("click", function () {
context.drawImage(video, 0, 0, 640, 480);
});
document.getElementById("conver").addEventListener("click", function () {
const base64Img = canvas.toDataURL("image/png");
console.log(base64Img);
img.src = base64Img;
});
</script>
