HTML5获取Camera视频

最新推荐文章于 2024-04-17 12:38:13 发布

Tauren__Chieftain

最新推荐文章于 2024-04-17 12:38:13 发布

阅读量803

点赞数 1

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/chieftain01/article/details/22289441

版权

HTML5 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

使用HTML5，我们不需要借助插件就可以了直接在浏览器内获取camera数据了。这个功能的实现要感谢Webrtc这个东东。WebRTC，名称源自网页实时通信（英语：Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的API。它于2011年6月1日开源并在Google、Mozilla基金会、Opera支持下被包括进万维网联盟的W3C推荐标准。

获取数据的接口是：navigator.getUserMedia，现在Webrtc还没有写成正式标准，所以现在可能存在下面这几种接口形式：navigator.getUserMedia、 navigator.webkitGetUserMedia、navigator.mozGetUserMedia 、 navigator.msGetUserMedia。

函数原型：
navigator.getUserMedia ( constraints, successCallback, errorCallback );

参数介绍：
constraints：
        必须项，successCallback中传入的 LocalMediaStream对象所支持的媒体类型。
       constraints参数是一个 MediaStreamConstraints 对象，包含两个值为布尔值的成员：video 及 audio。这个参数描述了被 LocalMediaStream对象所支持的媒体类型，使用时，需要在constraints参数里指定某个类型或者两个类型.如果某特定类型不被浏览器所支持， getUserMedia 会调用errorCallback函数，并传入错误类型NOT_SUPPORTED_ERROR. 如果浏览器不能得到特定类型的音频或者视频流, getUserMedia 会调用 errorCallback 函数，并传入错误类型MANDATORY_UNSATISFIED_ERR。
若某种媒体类型未被指定，他的值默认为false。下面的例子描述了如何去设置constraints函数接收audio与video：
{ video: true, audio: true }

successCallback：
       必须项，当应用中传递LocalMediaStream对象时触发的函数。
       getUserMedia 函数会调用successCallback 并传入LocalMediaStream 对象，这个对象包含媒体流。你可以将这个对象分配给适合的元素，之后处理，就像下面例子所做的一样。
function(localMediaStream) {
   var video = document.querySelector('video');
   video.src = window.URL.createObjectURL(localMediaStream);
   video.onloadedmetadata = function(e) {
      // Do something with the video here.
   };
},

errorCallback：
          可选项，当调用媒体设备失败时触发的函数。
          getUserMedia 函数调用errorCallback 时会包含一个 code 参数，如下所示：
          PERMISSION_DENIED     用户拒绝了浏览器请求媒体的权限
          NOT_SUPPORTED_ERROR     constraint中指定的媒体类型不被支持
          MANDATORY_UNSATISFIED_ERROR     指定的媒体类型未接收到媒体流

最后是一个demo，把摄像头图像显示在video标签内。

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8" />
<title>Copying video into canvas</title>
</head>

<body>
  <h1>Video:</h1>
  <video autoplay>
  Your browser does not support the video tag.
  </video>

<script>
  function fallback(e) {
      video.src = 'fallbackvideo.webm';
  }

  function success(stream) {
      video.src = window.URL.createObjectURL(stream);
  }


  navigator.getUserMedia  = navigator.getUserMedia ||
                          navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia ||
                          navigator.msGetUserMedia;

  var video = document.querySelector('video');

  if (navigator.getUserMedia) {
     navigator.getUserMedia({audio: true, video: true}, success,fallback);
  } else {
     fallback(); // fallback.
     console.log('getUserMedia Rejected!', e);
  }
</script>

</body>

</html>

Tauren__Chieftain

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5获取Camera视频

使用HTML5，我们不需要借助插件就可以了直接在浏览器内获取camera数据了。这个功能的实现要感谢Webrtc这个东东。WebRTC，名称源自网页实时通信（英语：Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的API。它于2011年6月1日开源并在Google、Mozilla基金会、Opera支持下被包括进万维网联盟的W3C推荐标准
复制链接

扫一扫