HTML躬行记（2）——WebRTC基础实践

WebRTC (Web Real-Time Communications) 是一项实时通讯技术，在 2011 年由 Google 提出，经过 10 年的发展，W3C 于 2021 年正式发布 WebRTC 1.0 标准。

　　WebRTC 标准概括介绍了两种不同的技术：媒体捕获设备和点对点连接（P2P，Peer-to-Peer），可让用户无需安装任何插件或第三方软件的情况下，实现共享桌面、文件传输、视频直播等功能。

　　下图是官方给出的一张 WebRTC 整体架构设计图：

• 紫色部分是前端开发所使用的 API。

• 蓝色实线部分是各大浏览器厂商所使用的 API。

• 蓝色虚线部分包含可自定义的 3 块：音频引擎、视频引擎和网络传输。

　　由于各个浏览器对 WebRTC 的实现有所不同，因此 Google 官方提供了一个适配器脚本库：adapter.js，省去很多兼容工作。

　　本文的源码已上传至 Github，有需要的可以随意下载。

1、自拍

　　自拍是指通过摄像头拍照生成图片，先看下 HTML 结构，其实就 4 个元素。

<video id="video"></video>
<button id="btn">拍照</button>
<canvas id="canvas" width="300" height="300"></canvas>
<img id="img" alt="照片"/>
复制代码

1.1 getUserMedia

　　然后在脚本中声明各个元素，通过 navigator.mediaDevices.getUserMedia() 方法获取媒体流。

const video = document.getElementById('video');
const canvas = document.getElemen