WEB前端打开摄像头

最新推荐文章于 2025-06-20 18:21:20 发布

原创最新推荐文章于 2025-06-20 18:21:20 发布 · 2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#websocket #elementui #eureka

WEB前端同时被 2 个专栏收录

112 篇文章

订阅专栏

asp.net core

20 篇文章

订阅专栏

之前用WPF调用摄像头，发现占用CPU资源比较大。

今天测试用WEB端打开摄像头

代码如下：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>

</head>
<body>

<video id="video"></video>


    <script>
      const width = 480;
      const height = 320;
      const video = document.getElementById('video');
 
      //访问摄像头
      if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
          //调用用户媒体设备, 访问摄像头
          getUserMedia({video: {width: width, height: height}}, success, error);
      } else {
          alert('不支持访问用户媒体');
      }
 
      //访问用户媒体设备的兼容方法
      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);
          }
      }
 
      //成功回调
      function success(stream) {
          console.log('成功');
          //兼容webkit核心浏览器
          // const CompatibleURL = window.URL || window.webkitURL;
          //将视频流设置为video元素的源
          // video.src = CompatibleURL.createObjectURL(stream);
          video.srcObject = stream;
          video.play();
      }
 
      //失败回调
      function error(error) {
          console.log('失败');
          console.log("访问用户媒体设备失败", error);
      } 


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