html5视频录制,在HTML5视频录制方面，我们为什么选WebRTC而不选Media Recorder API

ゞ浴缸里的玫瑰 2022-10-07 07:59 10阅读 0赞

作者：Pipe(原文链接)

翻译：刘通

原标题：Why we chose WebRTC over Media Recorder API for HTML5 Video Recording

通过这篇文章，我们将要分析一下我们为什么在从浏览器录制视频的时候，选择使用WebRTC而不是Media Recorder API的原因。下面将给出技术细节。

直到2016年第四季度，Safari已经成为了第一大浏览器，这让Flash的处境更加艰难，因为Safari默认必须要点击才能播放网页上的Flash内容。在2017年内Chrome也计划实施相似的计划。因为我们的电脑视频录制用户是建在Flash中的，所以我们快速的对HTML5进行了调查。

结果显示并没有太多的选择，只有

1.HTML Media Capture(HTML媒体捕捉)

2.Media Recorder API

3.WebRTC视频录制

HTML Media Capture

我们已经可以在手机端浏览器中使用HTML Media Capture来稳定的录制视频，但是因为不能够在电脑端浏览器上实现，所以HTML Media Capture不可能成为本文讨论问题的一个选项。

这就只剩下Media Recorder API和WebRTC这两个选择来代替Flash进行视频录制了。

Media Recorder API

我们之前就已经讨论过Media Recorder API，这个API在本地录制并且上传到网页服务器的时候工作状况良好。但是在支持的浏览器数量方面不足，只有Firefox和Chrome支持。但真正严峻的问题是，其他主要浏览器并不必须实施这项标准，所以以WebRTC来讲，我们可能只能给65%的互联网用户提供服务。

WebRTC

在进行视频录制时WebRTC也存在部分问题：

1. 因为是为P2P直播流而设计的，WebRTC在进行流传输的时候不会使用本地缓存è它只能携带与实时UDP上传带宽所允许等量的视频质量。

2. 我们发现，想要让企业受限网络中的设备与你的WebRTC端点相连接是比较困难的，TokBox的报告称他们无法解释着0.05%的失败率。

但是另一方面：

1. WebRTC的未来支持情况一片大好。Firefox，Chrome和Opera已经能够稳定地支持WebRTC，Microsoft也声明在Edge浏览器中支持WebRTC 1.0，最近苹果也在Safari 11中加入了WebRTC功能。

2. WebRTC还有另外一个重要的优势：因为它是以数据流方式工作的，所以它没有上传时间，并且在浏览器崩溃的情况中不会造成数据丢失。而就是这个优点让我们决定选用WebRTC。

对比

如果你想要在自己的网站加入视频录制功能，这里是对WebRTC和Media Recorder API的对比：

WebRTC

Media Recorder API

支持浏览器

Chrome、Firefox、Opera、Edge 15、Safari 11

Chrome 49+、Firefox 30+、Opera 36+

基础设备

复杂：信令服务器，TURN/STUN服务器，WebRTC终端

简单：用于上传的网页服务器

连接过程

复杂：连接过程可能在信令，发现或者P2P连接的时候发生失败

无

录制过程

以数据流的形式发送到WebRTC终端并且保存

本地录制+稍后上传

视频质量

受到上传带宽的限制

受到网络摄像头质量的限制

上传过程

无

有，由上传带宽决定

数据完整性

因为数据是实时推流的所以数据永远不会丢失

在浏览器，操作系统或者电脑崩溃的时候会造成录制的数据丢失

安全性

数据在传输过程中被加密。信令和发现阶段必须单独进行加密

在使用https的时候，数据在传输过程中加密

文件类型

webm

webm

视频codec

规范强制：VP8，H.264

浏览器独立决定：VP8，VP9，H.264

音频codec

规范强制：Opus 48kHz

浏览器独立决定：Opus 48kHz，Vorbis 44kHz

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5 视频播放

![Center][] 具体代码实现  <!-- <video src=

冷不防/ 2024年02月17日 17:50/ 0 赞/ 79 阅读

相关 HTML5新增视频标签（HTML5）

HTML5新增视频标签（HTML5） <!DOCTYPE html> <html lang="en"> <head> <

悠悠/ 2023年10月03日 13:31/ 0 赞/ 43 阅读

相关 WebRTC音视频录制实战七、第二节录制音视频实战

这一节我来实际操练一下，看看具体如何通过MediaRecorder来录制音视频数据。在开发之前我们将整个流程给大家梳理一下，首先我们需要加几个标签，第一个标签是video

淡淡的烟草味﹌/ 2023年02月24日 15:30/ 0 赞/ 40 阅读

相关 WebRTC音视频录制实战七、第一节 WebRTC录制基本知识

今天我们介绍一下如何通过WebRTC录制媒体流，实际上就是录取我们之前获取的实时音视频数据，当然它还可以录制桌面的数据，对于桌面我们会在后面的课程中给大家介绍，我们现在就把她

约定不等于承诺〃/ 2023年02月24日 15:27/ 0 赞/ 28 阅读

相关 html5视频录制,在HTML5视频录制方面，我们为什么选WebRTC而不选Media Recorder API

作者：Pipe(原文链接) 翻译：刘通原标题：Why we chose WebRTC over Media Recorder API for HTML5 Video Re

ゞ浴缸里的玫瑰/ 2022年10月07日 07:59/ 0 赞/ 11 阅读

相关 ffmpeg API录制rtsp视频流

这里在录制时，并没有进行转码，只是相当于把rtsp视频直接保存到一个文件中。 include <stdio.h> ifdef __cplusplus

妖狐艹你老母/ 2022年08月26日 00:55/ 0 赞/ 260 阅读

相关 html5_视频播放

1. 视频播放 <table> <tbody> <tr> <td style="background:rgb(213,213,213);"><p><stro

悠悠/ 2022年05月25日 05:08/ 0 赞/ 403 阅读

相关 Android多媒体录制--MediaRecorder视频录制

Android使用MediaRecorder类进行视频的录制。需要注意，使用MediaRecorder 录音录像的设置代码步骤一定要按照API指定的顺序来设置，否则报错

浅浅的花香味﹌/ 2022年04月25日 03:54/ 0 赞/ 653 阅读

相关 html5视频播放

<!DOCTYPE html> <head> <meta charset=utf-8> <title>html5播放器</title>

逃离我推掉我的手/ 2022年03月18日 09:24/ 0 赞/ 438 阅读

相关视频录制

win自带录制： win+G 打开录制栏 Win+Alt+Prtsc 截屏 Win+Alt+R 开始/停止录制 OBS录制视频和直播开

谁践踏了优雅/ 2021年09月29日 03:34/ 0 赞/ 498 阅读