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. 1214 - Large Division -- LightOj（大数取余）

    http://lightoj.com/volume_showproblem.php?problem=1214 这就是一道简单的大数取余. 还想还用到了同余定理: 所谓的同余,顾名思义,就是许多的数被一 ...

  2. C语言教学--二维数组和指针的理解

    对于初学者对二维数组和指针的理解很模糊, 或者感觉很难理解, 其实我们和生活联系起来, 这一切都会变得清晰透彻. 我们用理解一维数组的思想来理解二维数组, 对于一维数组,每个箱子里存放的是具体的苹果, ...

  3. Win10专业版激活方法可查版本

    Win10专业版激活步骤 ------安装Win10专业版,请win+R,键入winver回车,可查看版本------ 1.点击左下角windows按钮,找到设置并打开,依次点击"更新和安全 ...

  4. 远程登录linux不用输入密码的方法

    原创文章,欢迎阅读,未经博主允许禁止转载. ssh免密登录,使用密钥认证.执行以下命令,一路回车,就生成了密钥认证.然后,ssh登录,scp等都不用密码了. $ ssh-keygen -t rsa $ ...

  5. 丙申年把真假美猴王囚禁在容器中跑 ASP.NET Core 1.0

    var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...

  6. 用户 'IIS APPPOOL\ASP.NET V4.0' 登录失败 解决办法…………

    在iis管理器中-->应用程序池-->ASP.NET V4.0---->高级设置-->标识-->改为localSystem

  7. 十分钟能学会的框架，MVC+20个常用函数

    LazyPHP(以下简称LP)是一个轻框架. 之所以开发这么一个框架,是因为其他框架给的太多.在高压力的情况下,ORM和盘根错节的对象树反而将简单的页面请求处理复杂化,在调试和性能上带来反面效果. L ...

  8. javascript练习-方法借用

    方法借用其实也可以叫做多重继承 var generic = { //返回一个字符串,这个字符串包含构造函数的名字(如果构造函数包含名字) //这个以及所有非继承来的,非函数属性的名字和值 toStri ...

  9. 远程连接oracle服务器

    用户名 / 密码@172.16.16.203:1521/orcl

  10. 关于HIVE的数据模型介绍

    (1)Hive数据库 类似传统数据库的DataBase,在第三方数据库里实际是一张表.简单示例命令行 hive > create database test_database; (2)内部表 H ...