1.WebRTC开发背景

　　由于业务需求，需要在项目中实现实时音视频通话功能，之前基于浏览器开发的Web项目要进行音视频通话，需要安装flash插件才能实现或者使用C/S客户端进行通信。随着互联网技术的驱动下，在很多场景下需要进行音视频通信，在生活中我们现在使用电话越来越少，使用微信和视频越来越多。在一些行业也需要进行音视频实时通信，如：在线教育，远程医疗，保险理赔等等。有了WebRTC，可以开发一些好的网页应用，使得音视频通话越来越简单，无需安装任何插件，只需打开网页，就能实现音视频通话，方然也能实现消息收发，文件收发等等，下面，根据自己平时的项目开发与，对WebRTC就行一个简单的理解与概述，最终实现一个简单的拍照室Demo。

2.WebRTC历史和概述

　　WebRTC是“网络实时通信”（Web Real Time Communication）的缩写。它最初是为了解决浏览器上视频通话而提出的，即两个浏览器之间直接进行视频和音频的通信，不经过服务器。后来发展到除了音频和视频，还可以传输文字和其他数据。2010年5月，Google以6820万美元收购VoIP软件开发商Global IP Solutions的GIPS引擎，并改为名为“WebRTC”。WebRTC使用GIPS引擎，实现了基于网页的视频会议，并支持722，PCM，ILBC，ISAC等编码，同时使用谷歌自家的VP8视频解码器；同时支持RTP/SRTP传输等。Google是WebRTC的主要支持者和开发者，它推动了WebRTC标准的确立。

　　WebRTC是一门年轻的技术，从2011推出到2017年，一直发展的不温不火。根据一段时间的开发，个人认为主要原因有：各个浏览器的支持兼容程度和在互联网环境下点对点能够连接的成功率。从2017年苹果公司宣布iOS11的Safari浏览器支持WebRTC，一些云通信产品例如腾讯云通信和网易云通信也是基于WebRTC上进行封装二次开发，也间接的说明了WebRTC发展会越来越好。

　　 

3.基本概念的了解

　　为了简化开发，WebRTC在浏览器中API集成了大量的技术，解决了一些繁重的问题，如捕捉摄像头和麦克风，处理音视频流，传输层等等。

　　

  • 捕捉摄像头和麦克风

　　建立通信平台第一步要检测用户设备的摄像头和麦克风权限，先检测设备的可用性，然后在获取用户授权并与设备建立连接，最后获取一段数据流。

  • 音频与视频的编解码

　　在互联网要发送一段音视频数据，技术优化了网络数据，数据尺寸也还是很大，所以要对数据在发送端编码，然后在接收端解码。WebRTC内置的几种编解码器包括：H.264,Opcus,iSAC,VP8。作为前端开发的我，最这些编解码技术当然不是很了解。幸运的是，当两个浏览器回话时，会综合两端情况选择最优的编解码器。

  • 传输层

　　主要处理数据丢包，数据包排序以及建立用户之间的连接问题

  • 会话管理

　　通常来说就是信令（Signaling），负责在浏览器中建立并管理多个连接。

4.获取用户媒体

　　创建一个基于WebRTC的通信平台，首先要通过用户的网络摄像头和麦克风获取实时的视频和音频流，可以通过调用浏览器的getUserMedia API来实现。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>获取媒体流</title>

</head>

<body>

<div id="app">

  <h1>获取媒体流</h1>

  <video autoplay></video>

</div>

<script>

  function hasUserMedia() {

    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);

  }

  if (hasUserMedia()) {

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

    navigator.getUserMedia({video: true, audio: false}, function (stream) {

      console.log(stream);

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

      video.src=window.URL.createObjectURL(stream);

    }, function (err) {

      console.log(err);

    });

  } else {

    alert("Sorry, your browser does not support getUserMedia.");

  }

</script>

</body>

</html>

是否打开使用摄像头权限

　　注意：打开摄像头后获取到的视频流展示在Video标签中，video标签需要加上autoplay属性视频才可以播放，在调试中可以把getUserMedia方法参数中的audio设置为：false，避免杂音太大，同理，把video设置为false只能听到自己说话而没有画面，可以代替普通电话使用。

5.限制视频流

　　我们可以通过设置参数来控制视频和音频是否使用，除此之外，我们可以传入一个对象做更复杂的限制，如分辨率，视频宽高比等等。

navigator.getUserMedia({video: {

        width: 320,

        /*height:240,*/

        aspectRatio:1.77

      }, audio: false}, function (stream) {

      console.log(stream);

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

      video.src=window.URL.createObjectURL(stream);

    }, function (err) {

      console.log(err);

    });

可以根据自己业务需求来设置固定的宽高或分辨率等等。

6.完成一个拍照室Demo

　　通过调用摄像头获取到的视频流以及H5的canvas标签我们可以完成一个简易的拍照功能。

增加一个拍照按钮以及一个canvas,修改后的整个页面代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>获取媒体流</title>

</head>

<body>

<div id="app">

  <h1>获取媒体流</h1>

  <video id="video" autoplay></video>

  <button type="button" onclick="capture()">点击拍照</button>

  <canvas id="canvas" width="320" height="240"></canvas>

</div>

<script>

  function hasUserMedia() {

    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);

  }

  if (hasUserMedia()) {

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

    navigator.getUserMedia({video: {

        width: 320,

        height:240,

      }, audio: false}, function (stream) {

      console.log(stream);

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

      video.src=window.URL.createObjectURL(stream);

    }, function (err) {

      console.log(err);

    });

  } else {

    alert("Sorry, your browser does not support getUserMedia.");

  }

  function capture(){

    console.log('capture...');

    var cxt=document.getElementById('canvas').getContext('2d');

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

    cxt.drawImage(video,0,0);

  }

</script>

</body>

</html>

现在单击一个点击拍照按钮，可以捕捉视频的某一帧并同时绘制到canvas上，加上canvas功能本来就很强大，后期对照片的旋转，剪裁，滤镜也都是可以实现的。

延伸：现在很多WebApp上要实时上传证件功能，我们通过这种WebRTC+canvas也是可以实现的，而且是浏览器直接调的硬件拍照，有没有很溜。

7.开发中遇到的问题

　　在直接用http打开本地服务器页面是调用不了摄像头的，浏览器的限制认为http下是不安全的，但是可以用127.0.0.1或者localhost来代替本机ip。网页部署到服务器时也得使用https协议来返回页面，否则，无法调用摄像头。

　　

　　以上简单的介绍了WebRTC的发展历史以及一些基本概念，让大家对其有个初步的了解，最后通过调用摄像头完成一个拍照室的Demo。后续文章再详细的写如何通过WebRTC来实现点对点通信，相信WebRTC功能会越来越强大，这只是第一步。

参考资料：

《Learning WebRTC 中文版》　

《JavaScript 标准参考教程（alpha） 阮一峰》

WebRTC百科

转载请注明出处，谢谢。

WebRTC系列(1)-手把手教你实现一个浏览器拍照室Demo的更多相关文章

  1. Android应用系列：手把手教你做一个小米通讯录（附图附源码）

    前言 最近心血来潮,突然想搞点仿制品玩玩,很不幸小米成为我苦逼的第一个试验品.既然雷布斯的MIUI挺受欢迎的(本人就是其的屌丝用户),所以就拿其中的一些小功能做一些小demo来玩玩.小米的通讯录大家估 ...

  2. Go语言系列之手把手教你撸一个ORM(一)

    项目地址:https://github.com/yoyofxteam/yoyodata 欢迎星星,感谢 前言:最近在学习Go语言,就出于学习目的手撸个小架子,欢迎提出宝贵意见,项目使用Mysql数据库 ...

  3. 只有20行Javascript代码！手把手教你写一个页面模板引擎

    http://www.toobug.net/article/how_to_design_front_end_template_engine.html http://barretlee.com/webs ...

  4. iOS回顾笔记（05） -- 手把手教你封装一个广告轮播图框架

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  5. PWA入门：手把手教你制作一个PWA应用

    摘要: PWA图文教程 原文:PWA入门:手把手教你制作一个PWA应用 作者:MudOnTire Fundebug经授权转载,版权归原作者所有. 简介 Web前端的同学是否想过学习app开发,以弥补自 ...

  6. R数据分析：跟随top期刊手把手教你做一个临床预测模型

    临床预测模型也是大家比较感兴趣的,今天就带着大家看一篇临床预测模型的文章,并且用一个例子给大家过一遍做法. 这篇文章来自护理领域顶级期刊的文章,文章名在下面 Ballesta-Castillejos ...

  7. 大数据江湖之即席查询与分析（下篇）--手把手教你搭建即席查询与分析Demo

    上篇小弟分享了几个“即席查询与分析”的典型案例,引起了不少共鸣,好多小伙伴迫不及待地追问我们:说好的“手把手教你搭建即席查询与分析Demo”啥时候能出?说到就得做到,差啥不能差人品,本篇只分享技术干货 ...

  8. 手把手教你画一个 逼格满满圆形水波纹loadingview Android

    才没有完结呢o(￣︶￣)n .大家好,这里是番外篇. 拜读了爱哥的博客,又学到不少东西.爱哥曾经说过: 要站在巨人的丁丁上. 那么今天,我们就站在爱哥的丁丁上来学习制作一款自定义view(开个玩笑,爱 ...

  9. 用Python手把手教你搭一个Transformer！

    来源商业新知网,原标题:百闻不如一码!手把手教你用Python搭一个Transformer 与基于RNN的方法相比,Transformer 不需要循环,主要是由Attention 机制组成,因而可以充 ...

随机推荐

  1. 强大的代码编辑器 phpstorm version 2016.2 License Server激活

    "磨刀不误砍柴工","工欲善其事必先利其器",找个一个好的代码开发编辑工具可以让我们事半功倍,并且代码质量得到保障,在这里就推荐一款强大的代码编辑器,不对其实可 ...

  2. Elasticsearch JavaApi

    官网JavaApi地址:https://www.elastic.co/guide/en/elasticsearch/client/java-api/current/java-search.html 博 ...

  3. cocos2dx中的坐标系统

    一. (1)OpenGL坐标系 Cocos2D-x以OpenGL和OpenGL ES为基础,所以自然支持OpenGL坐标系.该坐标系原点在屏幕左下角,x轴向右,y轴向上. (2)屏幕坐标系 屏幕坐标系 ...

  4. Jenkins配置报告与邮件插件

    用jenkins做持续集成时,需要发送报告与邮件,下面说一下如何配置报告与邮件的插件 1:配置报告插件 我们先装一个Report插件,在系统管理-管理插件中找  HTML Publisher plug ...

  5. Makefile基础---编译

    首先写一个自己的库: #include "../MyAPI.h" #include <cstdlib> #include <ctime> int getRa ...

  6. spring的7个模块

    Spring 是一个开源框架,是为了解决企业应用程序开发复杂性而创建的.框架的主要优势之一就是其分层架构,分层架构允许您选择使用哪一个组件,同时为 J2EE 应用程序开发提供集成的框架. Spring ...

  7. CAP原理和BASE思想

    分布式领域CAP理论,Consistency(一致性), 数据一致更新,所有数据变动都是同步的Availability(可用性), 好的响应性能Partition tolerance(分区容错性) 可 ...

  8. .NET Orm 性能测试

    .NET Orm 性能测试 简介 OrmBenchmark 这个项目主要是为了测试主要的Orm对于 SqlServer 数据库的查询并将数据转换成所需 POCO 对象的耗时情况(好吧,实际上不完全or ...

  9. 多线程统计次数问题：即count++

    场景:日志需要统计每天数据上传的次数和上传的数据量. 如果是单线程可以使用简单的int count = 0:count++,但很多情况都是多线程环境所以就不能单纯的使用count++了!!! 多线程环 ...

  10. checkbox事件的变化

    <input type="checkbox" checked={this.state.checked} onChange={this.checkedChangeHandler ...