WebRTC系列(1)-手把手教你实现一个浏览器拍照室Demo
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系列(1)-手把手教你实现一个浏览器拍照室Demo的更多相关文章
- Android应用系列：手把手教你做一个小米通讯录（附图附源码）
前言 最近心血来潮,突然想搞点仿制品玩玩,很不幸小米成为我苦逼的第一个试验品.既然雷布斯的MIUI挺受欢迎的(本人就是其的屌丝用户),所以就拿其中的一些小功能做一些小demo来玩玩.小米的通讯录大家估 ...
- Go语言系列之手把手教你撸一个ORM(一)
项目地址:https://github.com/yoyofxteam/yoyodata 欢迎星星,感谢 前言:最近在学习Go语言,就出于学习目的手撸个小架子,欢迎提出宝贵意见,项目使用Mysql数据库 ...
- 只有20行Javascript代码！手把手教你写一个页面模板引擎
http://www.toobug.net/article/how_to_design_front_end_template_engine.html http://barretlee.com/webs ...
- iOS回顾笔记（05） -- 手把手教你封装一个广告轮播图框架
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- PWA入门：手把手教你制作一个PWA应用
摘要: PWA图文教程 原文:PWA入门:手把手教你制作一个PWA应用 作者:MudOnTire Fundebug经授权转载,版权归原作者所有. 简介 Web前端的同学是否想过学习app开发,以弥补自 ...
- R数据分析：跟随top期刊手把手教你做一个临床预测模型
临床预测模型也是大家比较感兴趣的,今天就带着大家看一篇临床预测模型的文章,并且用一个例子给大家过一遍做法. 这篇文章来自护理领域顶级期刊的文章,文章名在下面 Ballesta-Castillejos ...
- 大数据江湖之即席查询与分析（下篇）--手把手教你搭建即席查询与分析Demo
上篇小弟分享了几个“即席查询与分析”的典型案例,引起了不少共鸣,好多小伙伴迫不及待地追问我们:说好的“手把手教你搭建即席查询与分析Demo”啥时候能出?说到就得做到,差啥不能差人品,本篇只分享技术干货 ...
- 手把手教你画一个 逼格满满圆形水波纹loadingview Android
才没有完结呢o(￣︶￣)n .大家好,这里是番外篇. 拜读了爱哥的博客,又学到不少东西.爱哥曾经说过: 要站在巨人的丁丁上. 那么今天,我们就站在爱哥的丁丁上来学习制作一款自定义view(开个玩笑,爱 ...
- 用Python手把手教你搭一个Transformer！
来源商业新知网,原标题:百闻不如一码!手把手教你用Python搭一个Transformer 与基于RNN的方法相比,Transformer 不需要循环,主要是由Attention 机制组成,因而可以充 ...
随机推荐
- ADC0832的应用
ADC0832是美国国家半导体公司生产的一种8位逐次比较型CMOS双通道A-D转换器,采用5V电源电压供电,模拟电压输入范围为0~5V,内部时钟250KHz时转换速度为32微秒. 仿真图为: 程序为: ...
- 结构化您的Python工程
我们对于"结构化"的定义是您关注于怎样使您的项目最好地满足它的对象性,我们 需要去考虑如何更好地利用Python的特性来创造简洁.高效的代码.在实践层面, "结构化&qu ...
- spring boot之从零开始开发自己的网站
概述 首先要感谢两位大神,该项目的想法来源自tale和MyBlog,本项目的想法. 做了一些改造,增加了一些功能和一些代码的重构,并且更换了博客主题. 关于项目,对于开发的练手项目,能够工程化,严谨一 ...
- 利用box-shadow属性实现页面层叠效果
效果图如下 box-shadow的语法 代码展示 .footer { color: #777; padding: 10px 15px; height: 20px; text-align: center ...
- PAT1120: Friend Numbers
1120. Friend Numbers (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Two in ...
- java序列化反序列化深入探究（转）
When---什么时候需要序列化和反序列化: 简单的写一个hello world程序,用不到序列化和反序列化.写一个排序算法也用不到序列化和反序列化.但是当你想要将一个对象进行持久化写入文件,或者你想 ...
- Mysql：查询每个月下的数据，根据状态或者年份的sql语句
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本次的MySQL开篇记录了一道面试题,我给其扩展一下 这面试题它难点在什么地方,不外乎是操作月份和将其展示的 ...
- app后端设计(9)-- 动态通知
在app中,例如在通知界面,当新通知的时候,需要显示有多少条通知,用户点击"获取新通知"后,就能看到新的通知. 那么在app端,怎么才能知道有多少条新通知? 实现的技术有两种: 1 ...
- ECMAScript简介以及es6新增语法
ECMAScript简介 ECMAScript与JavaScript的关系 ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现.(前者是后者的 ...
- [TJOI2015] 棋盘
Description 为了提高智商,ZJY去新世界旅游了.可是旅游过后的ZJY杯具的发现要打开通往原来世界的门,必须要解开门上面画的谜题.谜题是这样的:有个\(n\)行\(m\)列的棋盘,棋盘上可以 ...