js实现手机摄像头画面显示到页面

TianqiWhj

已于 2023-07-12 17:38:03 修改

阅读量450

点赞数 1

文章标签： javascript 前端安全

于 2023-07-12 16:46:31 首次发布

<!DOCTYPE html>
<html>
  <head>
    <title>实时摄像头渲染示例</title>
    <style>
      #video {
        width: 100%;
        height: auto;
      }
    </style>
  </head>
  <body>
    <h1>实时摄像头渲染示例</h1>
    <video id="video" autoplay playsinline></video>

    <script>
      // 获取视频元素
      const video = document.getElementById('video');
            console.log(video);
      // 获取媒体流并将其显示在video元素中
      navigator.mediaDevices.getUserMedia({ video: true })
        .then(stream => {
            console.log(stream);
          video.srcObject  = stream
          video.play(); // 确保视频开始播放，这点比较重要
        })
        .catch(error => {
          console.log('访问摄像头失败:', error);
        });

    </script>
  </body>
</html>

注意比较重要的一点：

HTTPS：出于安全原因，`getUserMedia`只能在 HTTPS 或localhost上使用。如果你在没有 HTTPS 的网站上尝试使用这个API，就不起作用。

测试时尽量使用https在手机上测试，如果在pc测试检测不到摄像头的话会直接进入catch

打开时默认展示的实时画面是前置摄像头，如果想展示后置摄像头可以将 facingMode 的值修改为：environment

<script>
      // 获取视频元素
      const video = document.getElementById('video');
            console.log(video);
      // 获取媒体流并将其显示在video元素中
      navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
        .then(stream => {
            console.log(stream);
          video.srcObject  = stream
          video.play(); // 确保视频开始播放
        })
        .catch(error => {
          console.log('访问摄像头失败:', error);
        });

    </script>

当 facingMode的值是 environment 时展示后置摄像头

当 facingMode的值是 user 时展示前置摄像头

以下为效果展示: