效果

这是柚子皮…

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>
       p>
         button id="capture">
    拍照/button>
       /p>
       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>
    

效果

这是柚子皮…

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>
       p>
         button id="capture">
    拍照/button>
       /p>
       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>
    

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！