js调用摄像头

痛定思痛。 2021-09-07 12:36 490阅读 0赞

### js调用摄像头 ###

废话不多说,直接上代码。

<template>
    <div>
      <el-button type="primary" @click="useVideo2">调用摄像头</el-button>
      <video id="video" ></video>
    </div>
    </template>
    
    <script>
    export default { 
      name: 'useVideo',
      data(){ 
    
        return { 
          video:'',
    
        }
      },
      mounted () { 
      },
      methods:{ 
        useVideo2 () { 
          this.video = document.getElementById('video')
          //兼容性写法,判断getUserMedia方法是否存在
          navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || window.getUserMedia;
          if(navigator.getUserMedia){ 
            //调用用户媒体设备, 访问摄像头
            this.getUserMedia({ video : { width: 270, height: 150}}, this.success, this.error);
          } else { 
            alert('不支持访问用户媒体');
          }
    
        },
        // 调用成功的方法
        success(stream) { 
          //兼容webkit核心浏览器
          let CompatibleURL = window.URL || window.webkitURL;
          //将视频流设置为video元素的源
          console.log(stream);
    
          //video.src = CompatibleURL.createObjectURL(stream);
          //将摄像头拍摄的视频赋值给viedeo的srcObject属性
          //src是视频文件,srcObject是实时流
          //摄像头是实时流
          this.video.srcObject = stream;
          //并播放
          this.video.play();
        },
        // 调用失败的方法
        error(error) { 
          console.log(`访问用户媒体设备失败${ error.name}, ${ error.message}`);
        },
    
        //采集图片
        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);
          }
        },
    
    
    
    
    
      }
    }
    </script>
    
    <style scoped>
    
    </style>