WEB前端打开摄像头

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值