WebRTC（Web Real-Time Communication，网页实时通信），是一个支持网页浏览器进行实时语音对话或视频对话的API。

1、getUserMedia
要播放摄像头的影像，首先需要一个video标签：
 
<video id="video"></video>

获取摄像头影像主要是通过navigator.getUserMedia这个接口，这个接口的支持情况已经逐渐变好了：点这里

 
不过，使用的时候还是要加上前缀的，兼容代码：
navigator.getUserMedia =  navigator.getUserMedia

                         || navigator.webkitGetUserMedia

                         || navigator.mozGetUserMedia;

语法：
 navigator.getUserMedia(constraints, successCallback, errorCallback);

　参数说明：

  • constraints：Object类型，指定了请求使用媒体的类型
  • succeCallback：启用成功时的函数，它传入一个参数，为视频流对象，可以进一步通过window.URL.createObjectURL()接口把视频流转换为对象URL。
  • errorCallback：启动失败时的函数。它传入一个参数，为错误对象（chrome）或错误信息字符串（Firefox），可能值：

　PERMISSION_DENIED：用户拒绝提供信息。

NOT_SUPPORTED_ERROR：浏览器不支持硬件设备。

MANDATORY_UNSATISFIED_ERROR：无法发现指定的硬件设备。

　例如：要启用视频设备（摄像头），可这样：

navigator.getUserMedia({

  video: true

});

　如果要同时启用视频设备和音频设备，可这样：

navigator.getUserMedia({

  video: true,

  audio: true

});

　　2、 获取摄像头

　

var URL = window.URL || window.webkitURL; // 获取到window.URL对象

navigator.getUserMedia({

  video: true

}, function(stream) {

  video.src = URL.createObjectURL(stream);// 将获取到的视频流对象转换为地址

  video.play();

}, function(error) {

  console.log(error.name || error);

});

　　

3、 截图
除了实时直播外，我们还可以做实时截图效果，这时我们需要利用<canvas>元素来画图，代码如下：
<canvas id="canvas"></canvas>

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

var width = video.width;

var height = video.height;

canvas.width = width;

canvas.height = height;

ctx.drawImage(video, 0, 0, width, height);

　　

　

4、 保存图片
当然，截图后，你也可以保存下来：

　　

<a download='snap.png' id="download">下载图片</a>   

var url = canvas.toDataURL('image/png');

document.getElementById('download').src = url;

　　5、 完整实例

实例代码（由于安全限制问题，请将代码复制到本地运行）：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title></title>

    <style>

      #canvas,#video {

        float: left;

        margin-right: 10px;

        background: #fff;

      }

      .box {

        overflow: hidden;

        margin-bottom: 10px;

      }

    </style>

  </head>

  <body>

    <div class="box">

      <video id="video" width="400" height="300"></video>

      <canvas id="canvas"></canvas>

    </div>

    <button id="live">直播</button>

    <button id="snap">截图</button>

    <script>

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

      var canvas = document.getElementById('canvas');

      var ctx = canvas.getContext('2d');

      var width = video.width;

      var height = video.height;

      canvas.width = width;

      canvas.height = height;

      function liveVideo(){

        var URL = window.URL || window.webkitURL;   // 获取到window.URL对象

        navigator.getUserMedia({

          video: true

        }, function(stream){

          video.src = URL.createObjectURL(stream);   // 将获取到的视频流对象转换为地址

          video.play();   // 播放

          //点击截图

          document.getElementById("snap").addEventListener('click', function() {

            ctx.drawImage(video, 0, 0, width, height);

            var url = canvas.toDataURL('image/png');

            document.getElementById('download').href = url;

          });

        }, function(error){

          console.log(error.name || error);

        });

      }

      document.getElementById("live").addEventListener('click',function(){

        liveVideo();

      });

    </script>

  </body>

</html>

　　

H5 调用摄像头的更多相关文章

  1. 摄像头调用,h5调用摄像头进行扫一扫插件备份

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. 移动端H5调用摄像头(选择上传图片)

    <label>照相机</label> <input type="file" id='image' accept="image/*" ...

  3. h5调用摄像头

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  4. JavaScripts调用摄像头【MediaDevices.getUserMedia()】

    h5调用摄像头(允许自定义界面)[MediaDevices.getUserMedia()] <!DOCTYPE html> <html lang="en"> ...

  5. Unity 3D 调用摄像头捕获照片 录像

    1,要想调用摄像头首先要打开摄像头驱动,如果用户允许则可以使用. 2,定义WebCamTexture的变量用于捕获单张照片. 3,连续捕获须启用线程. 实现代码: using UnityEngine; ...

  6. 基于H5的摄像头视频数据流采集

    最近,为了支持部门团队的项目,通过H5实现摄像头的视频流数据的捕获,抓取到视频流后,传输到视频识别服务器进行后续的逻辑处理. 视频数据的采集过程,其实是比较没有谱的过程,因为之前没有研究过HTML5操 ...

  7. h5调用底层接口的一些知识

    之前接触过这方面的知识,一直想写一些关于代码的文字,但考虑到浪费时间,又不具备大神的实力,也不想去把别人的代码照搬过来,所以一直都是空白着的,今天敲代码的时候,有了一个比较好的想法,第一,定位在学习这 ...

  8. vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式

    进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...

  9. 谷歌使用navigator.mediaDevices.getUserMedia 调用摄像头拍照功能，不兼容IE

    <template>     <div>       <!--canvas截取流-->       <canvas ref="canvas" ...

随机推荐

  1. python基础第三天(1)

    函数 函数分为:内置函数,自定义函数,导入函数. 内置函数 python为咱们提供的快捷方式 vars()---针对脚本的,找到这个脚本中的所有变量. #!/usr/bin/env python # ...

  2. C# abstract

    Abstract: 1.用途:提供一个可供多个派生类共享的通用基类定义. 2.抽象类也可以定义抽象方法,方法是将关键字 abstract 添加到方法的返回类型的前面(抽象方法没有实现,所以方法定义后面 ...

  3. Centos 7下mysql的安装与配置

    1,先下载好MySQ安装包并解压(不做详细说明). 2,上传解压后的MySQL安装包到虚拟机上. 3,安装MySQL [root@localhost /]# yum install mysql5.7. ...

  4. Ubuntu下命令行方式对PDF文件进行缩放、合并、拆分

    安装软件: sudo aptitude install ghostscript 然后执行命令: gs -dNOPAUSE -dBATCH -sDEVICE=pdfwrite -dCompatibili ...

  5. JavaScript-事件周期-点击替换颜色

    事件周期 DOM:3个阶段 1.捕获:从最外层元素,向内层元素,逐个记录绑定的事件处理函数.默认,暂不触发任何事件 2.目标触发:优先触发目标元素绑定的事件处理函数 目标元素:实际点击的元素 3.冒泡 ...

  6. mysql mHA manager 状态修改

    启动:nohup masterha_manager --conf=/etc/masterha/app1.cnf --remove_dead_master_conf --ignore_last_fail ...

  7. ArcGIS Js/Flex等前端API（Query(StatisticDefinition)时）针对SDE的SHAPE.AREA/SHAPE.LEN知道查询无效，而对GDB的SHAPE_Area/SHAPE_Length有效探索。

    FIeld 'SHAPE.AREA' and 'SHAPE.LEN' of SDE For Oracle,Field 'SHAPE_Area' and 'SHAPE_Length' of gdb(ge ...

  8. 手机移动端alert替换方案

    //alert ;(function () { var AlertBox = function (options){ this.defaults = { title:"", cal ...

  9. vs2010中的MSBuild输出warning MSB8012问题

    vs2010中,MSBuild与C++编译器无缝整合.无论使用vs2010生成的代码,还是转换vs2008或者是更低版本vs编译的C++代码.都会在工程编译后,都会提示一条错误: C:\Program ...

  10. JUnit Assert方法总结

    junit中的assert方法全部放在Assert类中,总结一下junit类中assert方法的分类.1.assertTrue/False([String message,]boolean condi ...