H5实现调用本地摄像头实现实时视频以及拍照功能

怼烎@ 2022-05-14 23:43 760阅读 0赞

# getUserMedia API #

**HTML 5** 的**getUserMedia API**提供了访问媒体的能力, 基于该特性, 开发者可以不依赖任何浏览器插件下去访问视频和音频等设备.

旧版API : `navigator.getUserMedia`   
新版API : `navigator.mediaDevices.getUserMedia`

旧版语法:

getUserMedia(constraints, successCallback, errorCallback);

*  新版语法:

getUserMedia(constraints).then(successCallback).catch(errorCallback)

*  参数 constraints, 请求的媒体类型, 主要包含video和audio, 例如请求不带任何参数的视频和音频: `{video: true, audio: true}`

*  也可指定视频分辨率, 代码如下: `{video: {width: 640, height: 360}}`  
    移动设备上, 可指定使用前置摄像头, 代码如下: `{video: {facingMode: 'user'}}`  
    或者使用后置摄像头, 代码如下: `{video: {facingMode: {exact : 'environment'}}}`
 *  成功回调函数successCallback的参数stream, 为MediaStream对象, 表示媒体流, 可以通过`URL.createObjectURL`(*马上废弃*)转换后设置为Video或Audio元素的src属性来使用, 也可以直接使用`srcObject`属性来使用.
 *  失败回调函数为errorCallback

## 例子代码 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>摄像头拍照</title>
    </head>
    <body>
      <video id="video" width="480" height="320" controls>
      </video>
      <div>
        <button id="capture">拍照</button>
      </div>
      <canvas id="canvas" width="480" height="320"></canvas>
      <script>
        //访问用户媒体设备的兼容方法
        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);
          }
        }
    
        let video = document.getElementById('video');
        let canvas = document.getElementById('canvas');
        let context = canvas.getContext('2d');
    
        function success(stream) {
          //兼容webkit核心浏览器
          let CompatibleURL = window.URL || window.webkitURL;
          //将视频流设置为video元素的源
          console.log(stream);
    
          //video.src = CompatibleURL.createObjectURL(stream);
          video.srcObject = stream;
          video.play();
        }
    
        function error(error) {
          console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
        }
    
        if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
          //调用用户媒体设备, 访问摄像头
          getUserMedia({video : {width: 480, height: 320}}, success, error);
        } else {
          alert('不支持访问用户媒体');
        }
    
        document.getElementById('capture').addEventListener('click', function () {
          context.drawImage(video, 0, 0, 480, 320);      
        })
      </script>
    </body>
    </html>

原文链接：[https://blog.csdn.net/c\_kite/article/details/78536451][https_blog.csdn.net_c_kite_article_details_78536451]

[https_blog.csdn.net_c_kite_article_details_78536451]: https://blog.csdn.net/c_kite/article/details/78536451