前端实现调用手机照相机并加辅助框

逃离我推掉我的手 2022-10-16 00:58 137阅读 0赞

首先必须是https服务

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J1YnlMaW5U_size_16_color_FFFFFF_t_70][]

代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <div>
        <div  style="width: 100%; position: fixed; left: 0; bottom: 0; top: 0; right: 0;">
          <img id="img" src="./avatar.png" style="width: 100%; height: 100%; position: fixed; left: 0; bottom: 0; top: 0; right: 0;"  />
          <button id="snap" style="width: 50px; height: 50px; background: #fff; box-shadow: 0 0  5px #fff; border-radius: 50px; position: fixed; bottom: 30px; left: 50%; margin-left: -25px;z-index:999" ></button>
          <video id="video"></video>
          <canvas id="mycanvas"></canvas>
        </div>
      </div>
      <script>
        let track = null
        // 注意本例需要在HTTPS协议网站中运行，新版本Chrome中getUserMedia接口在http下不再支持。
        // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
        if (navigator.mediaDevices === undefined) {
          navigator.mediaDevices = {};
          // alert('1');
        }
        // 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia 
        // 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
        if (navigator.mediaDevices.getUserMedia === undefined) {
          navigator.mediaDevices.getUserMedia = function(constraints) {
            // alert('2');
            // 首先，如果有getUserMedia的话，就获得它
            var getUserMedia = navigator.getUserMedia ||navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
    
            // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
            if (!getUserMedia) {
              return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
            }
    
            // 否则，为老的navigator.getUserMedia方法包裹一个Promise
            return new Promise(function(resolve, reject) {
              getUserMedia.call(navigator, constraints, resolve, reject);
            });
          }
        }
        //默认使用前摄像头，强制使用后置摄像头如下设置
        // let constraints = {video: { facingMode: { exact: "environment" } }};
        var constraints = { audio: false, video: true }; 
        navigator.mediaDevices.getUserMedia(constraints)
        .then(function(stream){
          track = stream.getTracks()[0]
          var video = document.querySelector('video');
          // 旧的浏览器可能没有srcObject
          if ("srcObject" in video) {
            video.srcObject = stream;
          } else {
            // 防止在新的浏览器里使用它，应为它已经不再支持了
            video.src = window.URL.createObjectURL(stream);
          }
          video.onloadedmetadata = function(e) {
            video.play();
          };
        })
        .catch(function(err){alert(err.name + ": " + err.message); });
        var snap = document.querySelector('#snap');
        var img = document.querySelector('#img');
        if(snap !== null){
          snap.onclick=function(){
            var canvas = document.querySelector('#mycanvas');
            var ctx = canvas.getContext('2d');
            var video = document.querySelector('video');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            canvas.getContext('2d').drawImage(video,0,0);
            track.stop()
            img.style.display = 'none'
            snap.style.display = 'none'
            video.style.display = 'none'
          }
        }
      </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J1YnlMaW5U_size_16_color_FFFFFF_t_70]: /images/20221014/140cde0a13144da49dab90755acf5c15.png