我们为什么用WebRTC做视频点播

作者:flashphoner(原文链接

翻译:刘通

原标题:Why we made VOD on WebRTC

vod1

VOD,视频点播服务,也就是在YouTube和其他视频流服务播放视频的方式。WebRTC可以提供的低延迟的实时视频。你可能会问这两者之间有什么相似之处。我们将在本篇文章中进行说明。

支持和bug修复

一如以往从支持开始。我们接到一家外包公司程序员的支持要求,他们正在开发一款远程医疗的移动应用。客户想要的一项功能是在iOS应用中可以把进行的WebRTC视频聊天录制下来,以后在应用上回放观看。录制功能是可以正常工作的,但是在回放的时候出现了绿屏的情况。绿屏占据了四分之三的屏幕范围,这肯定是无法接受的。所以我们开始着手解决这个问题。

vod2

在移动视频播放应用中,我们使用的是标准对象:MPMoviePlayer或者AVPlayerViewController。当URL的形式像http://host/sample.mp4时,上述两者都可以播放mp4视频。这两个对象在正常情况下可以播放MP4视频,但是当播放iOS应用录制的视频时,屏幕上就出现了绿色的大块并且把一切都搞砸了。

WebRTC动态地更改流分辨率

我们发现出现绿屏情况是WebRTC随时调整视频分辨率的功能所造成的。所以导致聊天录制成的mp4文件最后具有很多不同的帧尺寸。详细举例,一段是640×480分辨率的,然后接了一段320×240分辨率的,等等。这种非典型的视频可以在VLC中正常播放,没有损伤什么的,但是通过内置于iOS中的HTTP回放视频时,就会在比特流的视频分辨率发生变化时产生绿色的块。

现在,让我们从iOS应用进行一次广播,以确认这是造成绿屏的真正原因。在测试中,我们将会使用我们的iOS应用—Two Way Streaming,以及demo服务器WCS5-EU

下图展示的是应用程序将视频流传输到服务器的时候是什么样子的:

vod3

下面显示的是视频分辨率是如何改变的:

vod4

上图视频流的时间线就是图像分辨率会自动改变的原因。这么做是为了适应当前移动设备压缩视频的能力,网络质量等等的改变。WebRTC正是通过这种调节分辨率的功能来达到低延迟的目的。

转码和重新缩放

可能的解决方案是通过转码进行重新缩放,就是通过解码视频帧来像上或者向下将它们调整到相同的分辨率上,比如640×480,然后将视频录制到这个分辨率上。但是如果我们给每条发给服务器的流都这么做的话,CPU资源会在处理10到20个视频流之后被耗尽。所以我们必须寻找到一个非转码的解决方案。

WebRTC VOD是一个解决方案

然后我们想到,如果WebRTC在推流视频的时候会改变分辨率,那么它也应该可以在播放录制视频的时候也这么做。如果我们读取一个mp4视频并且将其通过WebRTC输入给一个浏览器或者一个移动应用,出现在iOS应用程序的绿屏情况就会消失。

剩下的工作就是实现读取录制的mp4文件,然后传给网络通话服务器引擎来进一步转换为WebRTC。首先测试是否达到我们想要达到的结果—绿色的块消失了。

这样我们接收的视频点播并不是只是通过WebRTC的,而是覆盖了所有支持的协议和技术:RTMP,RTMFP,RTSP,HTML5 Canvas,Media Source,HLS,WebRTC。

WebRTC VOD直播

之后我们问了自己一个问题:“如果用户想要将视频作为一个流同时广播给每一个人呢?”

因此我们必须做两种类型的VOD。

第一个是个人VOD。对于每个想要播放视频的用户来说都打开一个新的通道,然后视频开始从头播放。

第二个是直播VOD。如果一个用户开始播放视频,另一个用户稍晚连入,那么他们会看同一个广播视频,也就是说服务器只会推送一个视频流同时给这两个连入的用户。所以他们可以一起观看一个足球比赛然后互相讨论评价。

在我们的播放器和API中,你需要知道播放的流的名字。

对于VOD我们创建下面几个选项:

当用户想要自己观看视频的时候,他要这么输入流的名称:

vod://sample.mp4

如果视频流是一个在线广播的话,我们就要这样输入流的名称:

vod-live://sample.mp4

sample.mp4文件应该在WCS_HOME/media文件夹中,而且必须是MP4/H.264 + AAC格式的。

你可能会问在iOS应用中表现如何呢?iOS应用通过WebRTC播放VOD流没有任何问题,不会发生任何损伤。

网页播放器中的WebRTC VOD

现在让我们来看看网页中的WebRTC VOD是什么样的。为了这么做,需要将MP4文件复制到/usr/local/FlashphnerWebCallServer/media文件夹中。

打开test player页,指定流的名字为vod://sample.mp4,然后点Test Now。

vod5

播放器就会通过WebRTC开始播放视频流。在chrome://webrtc-internals中,你会看到这些反馈图表:

vod6

所以我们有了一个大团圆的结局。我们解决了在iOS应用中回放录制视频所产生的绿屏问题,并且还做了一个网页浏览器的WebRTC-VOD功能。

填写常用邮箱,接收社区更新

WebRTC 中文社区由

运营