2018-08-09 用浏览器拍张照吧

最近在MDN上学习svg的时候，看到了WebRTC。很有意思嘛，浏览器也可以调用摄像头了。发现浏览器可以做的事情好多好多，不仅仅是提交表单和浏览网页。

2010年5月，Google 以6,820万美元收购 VoIP 软件开发商 Global IP Solutions 的 GIPS 引擎，将其开源并改为名为“WebRTC”。随即 WebRTC 被纳入万维网联盟的 W3C 推荐标准。2014年7月1日，WebRTC 浏览器 API 标准的1.0版由 W3C 发布。WebRTC 是一个由 Google、Mozilla和 Opera 主导的开源项目，通过在浏览器中调用简单的 JavaScript API 和标准的 HTML5 标签，浏览器、手机平台还有其他设备可通过一个通用的协议进行实时通信。

什么是WebRTC

WebRTC 是Web Real-Time Communications的缩写，是一个由 Google、Mozilla和 Opera 主导的开源项目，通过在浏览器中调用简单的 JavaScript API 和标准的 HTML5 标签，浏览器、手机平台还有其他设备可通过一个通用的协议进行实时通信。

历史及兼容性

2010年，Google开源WebRTC。
2014年，WebRTC浏览器API标准1.0版发布。
2017年5 月4号，WebRTC的API标准1.1稳定版发布。

兼容性

预备一下，学习API

getUserMedia

这个接口会请求用户的允许使用摄像头或者麦克风，返回是一个promise，返回值就是媒体流。

navigator.mediaDevices.getUserMedia({audio: true, video: true})

image.png

RTCPeerConnection

使用RTCPeerConnection时，需要加前缀。可以使用Adapter.js来处理不同浏览器间的差异性。它提供了点对点的通信，可以保持、监视并且关掉连接，并且可以进行信号处理，编码解码，安全保证和控制带宽。

RTCDataChannel

RTCDataChannel允许点对点的双向通信，和WebSockets的API相同，但是比其时延小。

getStats

getStats是统计方法，可以统计WebRTC会话的相关信息。

video 标签

属性	意义	取值	备注
autoplay	自动播放		autoplay=“false”不能取消自动播放，需要去掉autoplay属性
buffered	一个只读属性，返回TimeRanges对象，这个对象返回的是访问这个属性时，浏览器已经缓存的媒体的时间范围		TimeRanges有两个方法start，end，查询起始时间和终点时间
controls	进度条等控制组件的显示
height	video标签的高度
width	video标签的宽度
src	视频资源的Url		source标签也可以用来设定视频资源Url，和src同样的效果
preload	预加载	1.‘none’，不尽兴预加载。 2. ‘metadata’，指返回video的metadata信息，例如长度等。 3.‘auto’，视频预加载。这个值的默认值各个浏览器不同，推荐设定成metadata。	preload属性和autoplay属性同时设定时，autoplay属性优先级更高，即设定autoplay，preload设为none时，会按照autoplay的逻辑执行，忽略preload
poster	视频下载时显示的图片		不论视频是否预加载，设定这个值后，在视频播放前就显示这个图片
loop	是否循环播放视频
muted	播放视频时是否静音
playsinline	在iphone手机上，如果加了这个属性，那么在播放时，可以不进入到全屏，如果不加的话，播放时会进入全屏模式

接口

如上图所示，HTMLVideoElement继承自HTMLMediaElement。所以HTMLVideoElement有play方法，可以控制video的播放。

开始实战

拍照

1. 用video标签显示获得的视频流
2. canvas 绘制video截图
const video = document.querySelector('#video')
const canvas = document.querySelector('#canvas')
const photo = document.querySelector('#img')
navigator.mediaDevices.getUserMedia({video:true}).then(stream=>{
    video.srcObject = stream
    video.play()
})
            
function take () {
    const context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, '200', '300');
    var data = canvas.toDataURL('image/png');
    photo.setAttribute('src', data);
}