I found the following code that can be run directly on the browser side. Now I want to achieve the photographer, I want to automatically focus on the characters when taking pictures, and add that kind of frame. How can this effect be achieved?
if the browser side cannot implement this function, is there any other technical solution that can be used? Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<video id="video" width="480" height="320" controls>
</video>
<button id="capture"></button>
<canvas id="canvas" width="480" height="320"></canvas>
<script>
//
function getUserMedia(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
//API
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit
navigator.webkitGetUserMedia(constraints,success, error)
} else if (navigator.mozGetUserMedia) {
//firfox
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
//API
navigator.getUserMedia(constraints, success, error);
}
}
let video = document.getElementById("video");
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
function success(stream) {
//webkit
let CompatibleURL = window.URL || window.webkitURL;
//video
console.log(stream);
//video.src = CompatibleURL.createObjectURL(stream);
video.srcObject = stream;
video.play();
}
function error(error) {
console.log(`${error.name}, ${error.message}`);
}
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
//,
getUserMedia({video : {width: 480, height: 320}}, success, error);
} else {
alert("");
}
document.getElementById("capture").addEventListener("click", function () {
context.drawImage(video, 0, 0, 480, 320);
})
</script>
</body>
</html>