The front end of html5 calls the camera.

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>
Mar.28,2021
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bf6d55-31573.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bf6d55-31573.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?