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>

Photo html

Mar.28,2021