iOS--根据视频分辨率切换播放器布局

前言

现在开直播一般存在电脑开播和手机开播两种方式，电脑开播的推流画面正常为横屏分辨率（即宽大于高），手机开播的推流画面正常为竖屏分辨率（即高大于宽），而当手机开播的主播进入连麦流程，两个主播的画面通常会合成一个横屏分辨率的画面。观众端直播间为了适配不同分辨率的画面，需要动态调整播放器的布局，如果播放器内部可以实时感知视频的分辨率变化通知到上层，此时播放器则可以实现流畅切换布局。

具体细节

• 横屏分辨率画面.jpg
  
  

  这是播放器在横屏分辨率画面下的布局，在竖屏手机上，为了保持横屏的分辨率，保证画面不被拉伸或者压缩，播放器需要缩小布局在中间，上下留黑，左右存在部分裁剪。

• 竖屏分辨率画面
  
  

  这是播放器在竖屏分辨率画面下的布局，播放器全屏布局，画面可以全屏显示在手机上，一样为了保持视频的分辨率，上下或者左右可能存在裁剪。
  因此如果主播从电脑开播切换到手机开播，或者从手机开播切换到电脑开播，为了保证视频画面正常显示，播放器需要去调整它的布局。一个更为常见的场景是手机开播的主播进入连麦流程，两个主播的视频画面合流变成一个横屏分辨率的画面，这时候播放器没有从竖屏分辨率布局调整为横屏分辨率布局，则会出现以下情况，播放器仍为全屏布局且出现拉伸。

• 观众端看到的异常连麦画面

正常为如下图显示的情况。

• 观众端看到的正常连麦画面

实现思路

1、服务端通知

主播在手机开播和电脑开播之间切换，或者是进入连麦和退出连麦之间切换，服务端是可以感知这些行为，通知到客户端，客户端收到通知后去调整播放器布局。但是这个通知可能下发不及时或者丢失，此时观众看到的画面就是异常的，同时很多切换场景服务端不能确定视频分辨率是在竖屏和横屏之间切换，可能存在竖屏切换后画面仍为竖屏分辨率，如手机开播进入连麦，视频分辨率可能还是竖屏，真正原因是服务端不能感知视频分辨率的变化。

2、播放器解析

客户端作为拉流端，视频流或者直播流从解析到播放是由播放器完成的。这里以ijkplayer为例，解析视频完成有多个回调给到app端。IJKMPMoviePlayerFirstVideoFrameRenderedNotification（首帧视频帧解析完成）IJKMPMediaPlaybackIsPreparedToPlayDidChangeNotification（准备播放）
IJKMPMovieNaturalSizeAvailableNotification（可获得的视频大小变化通知）
在这几个回调均可以拿到视频帧的大小player.naturalSize，可以通过比较视频帧的宽高player.naturalSize.width > player.naturalSize.height得到当前视频是横屏分辨率还是竖屏分辨率。但是前两个回调视频解析完成只回调一次，不满足播放过程分辨率动态变化通知到播放器的要求。
这时需要看ijkplayer的源码找到player.naturalSize在哪里变化

- (void)changeNaturalSize
{
    [self willChangeValueForKey:@"naturalSize"];
    if (_sampleAspectRatioNumerator > 0 && _sampleAspectRatioDenominator > 0) {
        self->_naturalSize = CGSizeMake(1.0f * _videoWidth * _sampleAspectRatioNumerator / _sampleAspectRatioDenominator, _videoHeight);
    } else {
        self->_naturalSize = CGSizeMake(_videoWidth, _videoHeight);
    }
    [self didChangeValueForKey:@"naturalSize"];

    if (self->_naturalSize.width > 0 && self->_naturalSize.height > 0) {
        [[NSNotificationCenter defaultCenter]
         postNotificationName:IJKMPMovieNaturalSizeAvailableNotification
         object:self];
    }
}

通过观察，player.naturalSize只在changeNaturalSize这个方法发生变化。

        case FFP_MSG_VIDEO_SIZE_CHANGED:
            NSLog(@"FFP_MSG_VIDEO_SIZE_CHANGED: %d, %d\n", avmsg->arg1, avmsg->arg2);
            if (avmsg->arg1 > 0)
                _videoWidth = avmsg->arg1;
            if (avmsg->arg2 > 0)
                _videoHeight = avmsg->arg2;
            [self changeNaturalSize];
            break;
        case FFP_MSG_SAR_CHANGED:
            NSLog(@"FFP_MSG_SAR_CHANGED: %d, %d\n", avmsg->arg1, avmsg->arg2);
            if (avmsg->arg1 > 0)
                _sampleAspectRatioNumerator = avmsg->arg1;
            if (avmsg->arg2 > 0)
                _sampleAspectRatioDenominator = avmsg->arg2;
            [self changeNaturalSize];
            break;

changeNaturalSize方法调用是在ijkplayer的视频解码器解析视频时得到FFP_MSG_VIDEO_SIZE_CHANGED（视频帧的大小变化）和FFP_MSG_SAR_CHANGED（Sample Aspect Radio采样宽高比变化）通知到上层。

 /* alloc or resize hardware picture buffer */
    if (!vp->bmp || !vp->allocated ||
        vp->width  != src_frame->width ||
        vp->height != src_frame->height ||
        vp->format != src_frame->format) {

        if (vp->width != src_frame->width || vp->height != src_frame->height)
            ffp_notify_msg3(ffp, FFP_MSG_VIDEO_SIZE_CHANGED, src_frame->width, src_frame->height);

        vp->allocated = 0;
        vp->width = src_frame->width;
        vp->height = src_frame->height;
        vp->format = src_frame->format;

        /* the allocation must be done in the main thread to avoid
           locking problems. */
        alloc_picture(ffp, src_frame->format);

        if (is->videoq.abort_request)
            return -1;
    }

打开视频编码器，设置编码器参数时

if (is->video_st && is->video_st->codecpar) {
        AVCodecParameters *codecpar = is->video_st->codecpar;
        ffp_notify_msg3(ffp, FFP_MSG_VIDEO_SIZE_CHANGED, codecpar->width, codecpar->height);
        ffp_notify_msg3(ffp, FFP_MSG_SAR_CHANGED, codecpar->sample_aspect_ratio.num, codecpar->sample_aspect_ratio.den);
    }

同时可以看到changeNaturalSize视频帧大小变化时会发送IJKMPMovieNaturalSizeAvailableNotification通知，所以监听该通知就可以实时感知视频帧的分辨率变化，回调上层通知播放器重新布局。

 if ([notify.name isEqualToString:IJKMPMovieNaturalSizeAvailableNotification]) {
        if ([self.playDelegate respondsToSelector:@selector(playView:resolution:)]) {
            [self.playDelegate playView:self resolution:_qfPlayer.player.naturalSize.width > _qfPlayer.player.naturalSize.height];
        }
    }

页面控制器声明一个变量isLandscapePlay保存当前是否为横屏分辨率播放，发生变化则实时更新播放器的布局

- (void)playView:(SHPlayView *)view resolution:(BOOL)isLandScape {
    if (isLandScape != _isLandscapePlay) {
        if (isLandScape == YES) {
            //更新为横屏分辨率布局（居中显示）
            [self updatePCPlayerFrame];
        } else {
            //更新为竖屏分辨率布局（全屏）
            self.isLandscapePlay = NO;
            self.viewRealPlayer.frame = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
        }
    }
}

总结

观众端播放页面，关键是为了保证视频的分辨率，保证画面不出现拉伸或者压缩等变形效果，需要去感知视频帧的宽高比是否发生变化，实时去调整播放器布局，同时应用场景很多，比如应用内小窗播放时，同样需要去动态调整播放器布局，完善显示效果。

• 横屏分辨率
• 竖屏分辨率