优化Web端摄像头占用：降低CPU资源的HTML+JavaScript代码实践-优快云博客

本文链接：https://blog.youkuaiyun.com/easyboot/article/details/124882895

之前用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>

WEB前端打开摄像头