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

最新推荐文章于 2023-09-01 10:56:54 发布

RubyLinT

最新推荐文章于 2023-09-01 10:56:54 发布

阅读量1.5k

点赞数 1

分类专栏： html js 文章标签： html5 js

本文链接：https://blog.csdn.net/RubyLinT/article/details/117284818

版权

js 同时被 2 个专栏收录

24 篇文章 1 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

首先必须是https服务

代码如下：

<!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>

RubyLinT

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
7
评论
前端实现调用手机照相机并加辅助框

首先必须是https服务代码如下：<!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"&g.
复制链接

扫一扫