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. UWP的拖拽功能

    简单的拖拽实现: <Grid x:Name="G1" AllowDrop="True" DragEnter="G1_DragEnter" ...

  2. SharePoint 2013开发入门探索（一）- 自定义列表

    在SharePoint 2013中创建自定义列表的方式有很多,在网站内容页面添加应用程序就可以创建(站点内容-〉 您的应用程序),也可以通过SharePoint Designer 2013创建,而本文 ...

  3. 【随机化】bzoj4080 [Wf2014]Sensor Network

    #include<cstdio> #include<algorithm> #include<cmath> using namespace std; typedef ...

  4. Android系统启动顺序

    Android是一个基于Linux的开源操作系统.x86(x86是一系列的基于intel 8086 CPU的计算机微处理器指令集架构)是linux内核部署最常见的系统.然而,所有的Android设备都 ...

  5. C#匿名函数的坑

    在for循环中catch索引 for (int i = 0; i < n; i++) { foo(() =>{ if (i == x) //这里的i始终都是最后一个... { //bala ...

  6. MongoDB学习比较-07 C#驱动操作MongoDB

    下载驱动 驱动的下载有两种方式:一种是在C#项目中通过NuGet进行安装,另一种是通过下面的链接:https://github.com/mongodb/mongo-csharp-driver/rele ...

  7. 代写assignment

    集英服务社,强于形,慧于心 集英服务社,是一家致力于优质学业设计的服务机构,为大家提供优质原创的学业解决方案.多年来,为海内外学子提供了多份原创优质的学业设计解决方案. 集英服务社,代写essay/a ...

  8. CreateCompatibleDC 与 CreateCompatibleBitmap 小小结

    通常使用CreateCompatibleBitmap时候都会用到CreateCompatibleDC.而是用CreateCompatibleDC的目的不是为CreateCompatibleBitmap ...

  9. [置顶]PADS PCB功能使用技巧系列之NO.004- 如何做到20H规则？

    电源层与地层之间变化的电场在板边缘会向外辐射电磁干扰(EMI),称为边沿效应.20H规则可将70%的电场限制在接地层边沿内,100H可达到98%. (1)在Layout中,选择菜单栏Setup -&g ...

  10. DOJO-dojox.grid.EnhancedGrid(带刷新函数,分页工具栏,复选框,行号等功能)

    转自:http://biancheng.dnbcw.info/javascript/395865.html dojo.require("dojox.grid.EnhancedGrid&quo ...