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. node学习笔记(三)

    //事件驱动events //events是node最重要的模块没有之一,因为node.js本身的架构就是事件式的,而他提供了唯一的接口,所以堪称node.js事件编程的基石; //events几乎被 ...

  2. viewpage滑动查看图片并再有缩略图预览

    首先看下效果图, 主要功能分为3大块 一是滑动查看,通过viewpage来实现,方法见 http://www.cnblogs.com/lovemo1314/p/6109312.html 二.点击放大 ...

  3. 解决 IE 6/7 中console对象兼容性问题

    话不多说,直接上代码 (function (){ //创建空console对象,避免JS报错 if(!window.console) window.console = {}; var console ...

  4. Spring 学习笔记 3. 尚硅谷_佟刚_Spring_配置 Bean

    1,bean 的配置 <bean id="helloWorld" class="com.yfy.HelloWorld"> <property ...

  5. member template

    1.当且仅当类模板的参数相同时,你才能对类实体对象相互赋值,即将一个实体对象整体赋值给另外一个实体对象.不能将一种类型的实体对象赋值给另外一种实体对象.如: Stack<int> intS ...

  6. angular.element的常用方法

    addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容att ...

  7. P1905生活大爆炸版 石头剪刀布

      P1905生活大爆炸版 石头剪刀布 描述 石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头.如果两个人出拳一 样,则不分胜负.在<生活大爆炸>第二季第 8 集中出现了一种石头 ...

  8. loading动画效果记录

    看到好多网页都有一个炫酷的loading动画,以前不知道怎么实现的.今天学习了一下,发现其实也很简单. 首先在学习的时候偶然遇到一个pace.js的库,非常好用.优点是,不需要挂接到任何代码,自动检测 ...

  9. 个人阅读作业Week7

    没有银弹 <没有银弹>,Brooks在该论文中,强调真正的银弹并不存在,而所谓的没有银弹则是指没有任何一项技术或方法可以能让软件工程的生产力在十年内提高十倍.文中讨论到了软件工程中主要的两 ...

  10. oracle数据文件不小心被删除，导致对应的表空间删不掉的处理方法

    问题现象:数据文件被无意删除,导致数据库表空间无法删除,并且重新刷表空间提示表空间已经存在:解决方法:1.oracle用户登录服务器,使用sysdba连接数据库 >sqlplus / as sy ...