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. 微信小程序 设计理念指南

    在此处输入标题   微信小程序的几条开发建议 功能简约,场景贴近随用随走: 操作快捷方便,交互简单: 程序本身代码资源等文件大小限制在1MB之内,这是微信目前的硬限制,目的是为了使得最终到达用户设备上 ...

  2. 为什么一个类的全局变量默认以m开头？

    某天闲着无聊,突然想起来为什么大家都习惯将全局变量使用m开头,于是追根求源,查了一些资料,虽然并不是我想要的,但是也总结一下. 在stackoverflow上就有人问: Why do most var ...

  3. 原生JavaScript实现滚动条

    没事找事,明明overflow:scroll|auto就可以,只是难看点(实际上css也能设置).只当练习写拖拽.监听事件.位置检测了. 原理是对滑动条块进行监听,按下鼠标按键后,监听鼠标移动,然后根 ...

  4. jboss [how to access the admin console]

    However you have not yet added any users to be able to access the admin console. 进入%EAP_HOME%/bin 执行 ...

  5. 关于webapp的一点思考

    早上上班路上碰到发传单推广app的小MM被上司训斥,忽然想起一个问题,现在的nativeapp推广成本到底多高?能不能用浏览器访问app的方式降低这个成本. 现在很多app采用壳+web内容的方式,但 ...

  6. JQuery的开发与使用心得

    关于jQuery的 入门使用jQuery可以很容易或具有挑战性的,这取决于你如何使用JavaScript,HTML,CSS进行开发和编程. 要知道一件重要的事情是,jQuery是只是一个JavaScr ...

  7. JDK和环境配置

    1. JASE : J2SE 这个就是我们现在在学的东西,他是一切Java的核心基础 JAME :J2ME : 他是Java的一个微型版,主要用来做移动开发 JAEE :J2EE Java企业版本,主 ...

  8. PHPBB公布新的维护版本

    9月28日,PHPBB官方网站公布了新PHPBB的最新消息.这个版本命名为:"Richard 'D¡cky' Foote",版本号为3.0.12.据官方的说明,“这个版本是一个维护 ...

  9. 淘宝上倒卖新浪微盘事件来龙去脉——谈谈巧用IMEI

    这是一个老黄历的事件,曾记得淘宝上的卖家卖10元卖50g网络硬盘,并且卖的相当的火,一个月就卖了500个账号.由于我也是那个事件的亲身经历者之一,这里就看到了IMEI号在项目中防止作弊是何其的重要. ...

  10. python post

    使用python 提交表单包括图片以及参数信息,详见代码 # -*- coding: utf-8 -*- import MultipartPostHandler, urllib2, cookielib ...