webRtc 启动录音和屏幕录制、启用摄像头、实时回放和下载

基于浏览器的视频面试及在线会议系统均具备屏幕共享与摄像头开启等功能，这些交互操作均在浏览器端完成。

浏览器中实现音视频通信的核心技术被称为WebRTC（real time communication），该标准API随着网络传输速度的提升以及音视频应用需求的增长，被集成至浏览器中以支持实时音视频交互。

音视频通信的基本流程包括：采集、编码、传输、解码与渲染。

主要功能涵盖：屏幕内容的录制、摄像头画面的采集、录制内容的回放以及支持导出下载。

采集阶段：

浏览器提供了两个关键接口用于获取并播放媒体流：

navigator.mediaDevices.getDisplayMedia：用于捕获屏幕内容的流数据

navigator.mediaDevices.getUserMedia：用于获取麦克风及摄像头输入的流数据

在获取到媒体流之后，将其赋值给video标签的srcObject属性即可实现媒体内容的播放。

视频录制过程：

通过MediaRecorder API实现，该接口能够监听媒体流中的数据。将捕获的数据存储于数组中，在回放时将其赋值给另一个video标签的srcObject属性即可完成播放。

文件下载功能：

同样依赖于MediaRecorder所记录的数据，将其转换为blob格式后，通过a标签触发下载操作。

代码实现：

    <!--页面中放放两个v