WebRTC 移动端的视频画面旋转问题

最近遇到一个比较有意思的问题，这里记录一下，免得日后忘记细节。

事情的起因是因为我们的技术团队做了一个合流的功能，就是把来自各种设备的多个视频流进行解码、按照一定布局（可以简单理解为画中画）重新构造新的视频帧数据再编码，最后转推CDN。这个合流没什么可说的，是一种常见的处理多流的手段。那么遇到了什么问题呢？来自移动端设备视频画面的方向问题。

大家知道，Android设备的取景器正向一般情况下是音量键那一侧，而非自然正向（竖着拿手机的正上方）。即取景器正向采集进来的画面，是需要旋转90°或者270°（前后置）才能使捕捉的画面按照自然正向显示。这部分知识大家可以自行上网搜索相关资料，例如：

Android 手机Camera Orientation问题的深入研究
Android Camera 踩坑

那么，为什么我们通过WebRTC native SDK开发的Android应用程序，视频画面到达桌面端Chrome浏览器、或者其他移动端设备，显示的是正确的呢？是不是WebRTC已经把采集画面，加上设备显示方向信息，对原始帧做了旋转后再编码发送的呢？

其实不然，在Android端，采集到的视频帧并没有旋转，之所以在桌面端Chrome显示正常，是因为有一个方向信息隐藏在RTP的扩展字段里，它的名字是：

urn:3gpp:video-orientation

请参考：https://www.iana.org/assignments/rtp-parameters/rtp-parameters.xhtml
如果你曾经分析过SDP信息，你会发现，各个端其实都有这项信息，例如下面是桌面端Chrome的：

所以真相是，接收端会根据存在RTP扩展字段里的这项信息来对解码后的图像进行旋转，以保证正确的显示方向，而不是在编码前就旋转了画面。

OK，回到文章一开始我提到的合流，我们遇到的问题。那就是合流那一方，在解码视频流时，并没有理会RTP扩展字段中的方向，直接对发来的视频帧进行了合屏，导致的结果就是，来自移动端的视频画面和Chrome中显示的不一致。例如，如果Android设备没有锁定方向，且竖着拿手机（音量键向右），Chrome中显示的是自然正向，而合屏显示的是向右：

OK，那么原因很清楚了，怎么解决？有两种方法：

方法一：修改合流端，即从RTP扩展字段中读取video-orientation来对视频帧进行旋转，以保持和Chrome及其他设备相同的显示方向

方法二：修改推流端，去掉video-orientation，直接对取景器采集到的视频画面进行旋转，然后再编码发送，接收端不需要理解video-orientation，直接解码显示（或解码后合屏再编码）就可以了。

两种方法都各有利弊，具体还要看应用场景。我们技术团队经过几次讨论沟通，最终选择了方法一。

到这里事情还没有结束，虽然选择了方法一，但我还是偷偷花了点时间验证了一下方法二，看看在推流端旋转后产生的结果是怎样的。

通过阅读WebRTC的代码，找到了WebRTC已经实现的对视频帧的旋转代码，位于：

\media\base\adapted_video_track_source.cc

摘抄代码片段如下（注，这里的代码基于 WebRTC M73分支，因WebRTC代码演变较快，可能未来不一定在这里了）：

void AdaptedVideoTrackSource::OnFrame(const webrtc::VideoFrame& frame) {rtc::scoped_refptr<webrtc::VideoFrameBuffer> buffer(frame.video_frame_buffer());/* Note that this is a "best effort" approach towants.rotation_applied; apply_rotation_ can change from false totrue between the check of apply_rotation() and the call tobroadcaster_.OnFrame(), in which case we generate a frame withpending rotation despite some sink with wants.rotation_applied ==true was just added. The VideoBroadcaster enforcessynchronization for us in this case, by not passing the frame onto sinks which don't want it. */if (apply_rotation() && frame.rotation() != webrtc::kVideoRotation_0 &&buffer->type() == webrtc::VideoFrameBuffer::Type::kI420) {/* Apply pending rotation. */webrtc::VideoFrame rotated_frame =webrtc::VideoFrame::Builder().set_video_frame_buffer(webrtc::I420Buffer::Rotate(*buffer->GetI420(), frame.rotation())).set_rotation(webrtc::kVideoRotation_0).set_timestamp_us(frame.timestamp_us()).set_id(frame.id()).build();broadcaster_.OnFrame(rotated_frame);} else {broadcaster_.OnFrame(frame);}
}

代码很简单，如果满足以下三个条件，就对视频帧进行旋转：

apply_rotation() 是真
frame.rotation() 不是 0
buffer->type() 是 i420

根据appliy_rotation()的实现顺藤摸瓜，它的值来自于 VideoSendStreamImpl 的构造函数，代码位于：

video\video_send_stream_impl.cc

摘抄赋值语句如下：

// Only request rotation at the source when we positively know that the remote
// side doesn't support the rotation extension. This allows us to prepare the
// encoder in the expectation that rotation is supported - which is the common
// case.
bool rotation_applied =std::find_if(config_->rtp.extensions.begin(),config_->rtp.extensions.end(),[](const RtpExtension& extension) {return extension.uri == RtpExtension::kVideoRotationUri;}) == config_->rtp.extensions.end();

注释说明了，只有你确定远端不支持rotation extension的情况下，再对source进行旋转请求。这正是我们上面提到的情况。

OK，如果想让rotation_applied为true，那么从find_if语句看到，在config_->rtp.extensions中就不能存在RtpExtension::kVideoRotationUri （这个常量值就是上面提到的 urn:3gpp:video-orientation）。我在这里加了日志，打印出来看到 rtp.extensions包含以下几项信息：

{uri: http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time, id: 3},
{uri: http://www.webrtc.org/experiments/rtp-hdrext/playout-delay, id: 6},
{uri: urn:3gpp:video-orientation, id: 4}

显然，rtp.extensions中含有urn:3gpp:video-orientation，那么 rotation_applied 就是 false，继而 apply_rotation() 返回的就是false，就不会执行旋转。

第二个条件；frame.rotation() 不能是0，这个没有什么好解释的，如果设备方向未锁定，横屏处于取景器正向，不用做旋转，大家都相安无事，显示正常。

第三个条件，buffer->type()必须是i420。这个参考以下代码：

sdk\android\src\jni\android_video_track_source.cc

代码片段摘抄如下：

void AndroidVideoTrackSource::OnFrameCaptured(JNIEnv* jni,int width,int height,int64_t timestamp_ns,VideoRotation rotation,const JavaRef<jobject>& j_video_frame_buffer) {// 略过若干语句// AdaptedVideoTrackSource handles applying rotation for I420 frames.if (apply_rotation() && rotation != kVideoRotation_0) {buffer = buffer->ToI420();}}

可以看到，很显然，我们还是只需要保证rtp extension中没有video-orientation即可让 appliy_rotation()为true，buffer就会被转为 i420。

OK，让WebRTC帮助我们完成视频帧旋转，其实归根结底就是做一件事：去掉urn:3gpp:video-orientation

因为我只是做实验，所以用简单粗暴的方法，直接从以下位置拿掉了它：

media\engine\webrtc_video_engine.cc

RtpCapabilities WebRtcVideoEngine::GetCapabilities() const {RtpCapabilities capabilities;capabilities.header_extensions.push_back(webrtc::RtpExtension(webrtc::RtpExtension::kTimestampOffsetUri,webrtc::RtpExtension::kTimestampOffsetDefaultId));capabilities.header_extensions.push_back(webrtc::RtpExtension(webrtc::RtpExtension::kAbsSendTimeUri,webrtc::RtpExtension::kAbsSendTimeDefaultId));// 我注释掉了以下代码  // capabilities.header_extensions.push_back(//     webrtc::RtpExtension(webrtc::RtpExtension::kVideoRotationUri,//                          webrtc::RtpExtension::kVideoRotationDefaultId));// 省略若干代码return capabilities;
}

最后，编译WebRTC Android native SDK，放到工程里跑一下看下效果吧。

通过上面的方法，可以同时解决各个拉流端，包括合流端不支持解析video rotation信息的情况。

不过，在我的实验中，最后还是遗留了一个问题。如下图：

在H.264编码格式情况下，旋转视频画面后再去执行硬编码，在拉流端得到的图像色彩失真了。这个问题只在部分Android手机上发生（例如华为荣耀、Mate20 Pro），但在小米某旗舰机上是正常的。另外，如果把视频编码改为VP8，则在任何一款手机上旋转后，都没有这个问题（VP8是软编码）。所以我推断这个应该是和芯片类型有关系，华为芯片是海思，小米是高通。通过现象猜测色彩空间可能没有解析对，这个就需要花时间去看编解码相关代码了。

因为只是实验性质，加上上面提到的，我们技术团队准备从合流端统一解决，所以这个画面色彩失真的问题就暂时不打算投入时间继续研究了。如果有知道原因的朋友，欢迎告诉我。

WebRTC 移动端的视频画面旋转问题相关推荐

视频旋转方向，让视频画面旋转90度播放
简单好用的视频剪辑工具--视频剪辑高手,可以支持对视频旋转90度播放的吗?这个当然是可以了.而且还支持视频合并.转换格式.横屏改竖屏等等功能.下面就来看看如何将多个视频同时旋转90度播放的操作方法. ...
有逆时针将视频画面旋转90度的方法吗？
在遇到想要将多个视频的画面批量逆时针旋转90度的时候都是用什么方法操作的呢?今天小编要给大家安利一个剪辑工具,可以轻松批量的剪辑视频,小白都可以轻松操作. 大家先来看看小编用这个方法操作的逆时针旋转9 ...
ffmpeg php 水平翻转,FFmpeg 视频画面旋转的命令详解及旋转失败的解决方法
这两天在处理一段用 iPhone 拍摄的视频,在手机上看正常,导出到电脑上发现视频是倒的,或者说反的.没办法,剪辑之前必须先将它"转正".于是打算将它在 iPhone 里进行处理, ...
顺时将视频画面旋转90度的步骤
有没有可以一键快速批量将视频顺时针旋转90度的方法呢?当然有了,小编接下来就给大家推荐一个好用的方法,小编自己都一直在使用,现在就一起来看看这个方法的操作步骤吧! 大家先看看小编之前用这个方法剪辑的顺 ...
相机裁剪旋转_怎么旋转视频画面角度
在用手机或相机拍摄视频时,有时候画面会出现镜像.画面倒转的情况,影响观看体验,那么视频怎么旋转才能将画面变为正常播放?有很多方法可以做到,以下我为你挑选了最简单的工具,详细给你说说: 在线视频旋转按 ...
html里怎么旋转视频教程,怎么把视频调正视频倒了怎么正过来旋转视频画面
应该很多看官们都试过拿手机拍摄视频的时候经常会把画面弄得横着或者直接就是倒着的,视频倒了怎么正过来?或许在手机上观看不怎么一回事,因为手机小巧旋转一下就可以了,但是放到电脑上就有点坑了,总不至于要把电 ...
旋转视频画面方向,多角度旋转的两种方法
由于各种原因,有时候我们的视频方向可能不大正确,或者想对视频方向进行旋转调整,该怎么实现呢?下面随小编一起来试试. 方法1:顺时90度运行视频剪辑高手,将多段视频导入,一行导入一个在"新 ...
怎样旋转视频画面方向,多角度旋转方法
随着越来越多的人使用智能手机来拍录视频,你会经常遇到很多侧面拍摄的视频短片,很多情况下,用手机拍摄视频,不注意拍摄的角度,在电脑播放出来就是视频是竖版,影响观看同时,不方便编辑视频,你需要旋转视频画面 ...
[WFD]播放DRM视频时，SINK端显示全黑画面或者默认图片
[WFD]播放DRM视频时,SINK端显示全黑画面或者默认图片 [DESCRIPTION] 假设WFD SINK为TV ,和手机通过WFD连接上后,TV画面显示正常. 但是打开第三方视频播放软件(如i ...

WebRTC 移动端的视频画面旋转问题

WebRTC 移动端的视频画面旋转问题相关推荐

最新文章

热门文章