全部产品
存储与CDN 数据库 域名与网站(万网) 应用服务 数加·人工智能 数加·大数据基础服务 互联网中间件 视频服务 开发者工具 解决方案 物联网 钉钉智能硬件
视频直播

接入步骤详述

更新时间:2018-01-25 11:50:03

本文档用于实现从零开始搭建直播问答服务,包括使用直播推流并下发题目、app和appserver交互完成答题的详细过程。

说明流程

步骤一:准备工作

1. 开通阿里云视频直播服务

2. 登陆控制台,在视频直播直播>域名管理中,选择管理,获取推流和拉流地址。详细操作请查看《视频直播文档》。

域名管理

3. 提出工单,申请开通在视频直播的推流时添加SEI信号的功能,并附上相关的直播域名和appname信息。

注意:由于鉴权功能默认为开启状态,您须使用 鉴权URL 才能进行推流,避免被盗链的风险。详情参考 直播鉴权

步骤二:开始直播推流

在获取推流地址后,可进行推流。如用OBS进行推流,可查看OBS设置文档

注意:

  1. 开启云端添加SEI功能,务必在推流地址中加上参数wm=1
  2. 推流开始之后,在“流管理”中查看拉流地址时,您会看到除了目标推流地址之外,还会显示存在一个带有“_sei-copy”字符串的推流地址,请忽略即可。您还是从自行配置的推流地址中去获取拉流地址。

步骤三:答题播放器接入

阿里云播放器SDK支持SEI信号的解析,您可以直接集成使用(下载 )。

1. Android

  • 系统支持

播放器SDK支持Android4.0以上。手机芯片要求armv7或arm64架构。

  • 运行环境

推荐开发者使用 Android Studio 作为自己的开发工具,本开发文档也是基于 Android Studio开发环境下进行编写的。

  • 如何导入

(1)将如下aar添加到libs文件夹中

lib导入aar

(2)在app的gradle中添加对aar的引用

gradle引用aar

  • 播放器使用

在需要使用播放器SDK的activity里面添加如下方法:

  1. //初始化播放器(只需调用一次即可,建议在application中初始化)
  2. AliVcMediaPlayer.init(getApplicationContext());
  3. //创建播放器的实例
  4. mPlayer = new AliVcMediaPlayer(this, mSurfaceView);
  5. mPlayer.setSEIDataListener(new MediaPlayer.MediaPlayerSEIDataListener() {
  6. @Override
  7. public void onSEI_userUnregisteredData(String data) {
  8. //这里接收到直播流中的用户数据,解析数据,见下【步骤五:播放器解析题目信息】
  9. parserData(data);
  10. }
  11. });
  12. mPlayer.setMaxBufferDuration(3 * 1000);
  13. mPlayer.prepareAndPlay(liveUrl);//准备并且播放

此外,andriod播放器更详细的使用方式介绍请见基础播放器;andriod播放器更多功能和接口请参考相关接口文档

2. iOS

  • 系统支持

播放器SDK支持iOS8.0以上。

  • 运行环境

建议使用XCode8.0以上版本进行编译。

  • 如何导入

播放器SDK支持普通导入和Cocoapods两种导入方式,选择一种即可。

(1)普通导入

  1. 需要导入AliyunPlayerSDK.frameworkAliyunLanguageSource.bundle到工程中。

打开工程,选中目标target,依次选择”General”->”Embededed Binaries”,点击”+”号,点击“Add Other…”,基础播放器仅需导入下载好的AliyunPlayerSDK.framework到项目中,并勾选copy选项。

102

头文件引入:

105

设置Build Settings → Build Options → Enable Bitcode为“NO”。

104

(2)Cocoapods导入

添加如下语句加入你的Podfile文件中。

  1. pod 'AliyunPlayer_iOS/AliyunPlayerSDK'

106

执行pod install或者pod update后集成SDK到项目工程。

  1. pod install :每次你编辑你的Podfile(添加、移除、更新)的时候使用

运行项目名.xcworkspace文件打开工程

  • 播放器使用
  1. -(AliVcMediaPlayer *)mediaPlayer{
  2. if (!_mediaPlayer) {
  3. //1.创建播放器
  4. _mediaPlayer = [[AliVcMediaPlayer alloc] init];
  5. }
  6. return _mediaPlayer;
  7. }
  8. -(void)player{
  9. self.contentView.frame = CGRectMake(0, 0, self.view.width, self.view.height-64);
  10. [self.view addSubview:self.contentView];
  11. [self.mediaPlayer create:self.contentView];
  12. self.mediaPlayer.scalingMode = scalingModeAspectFit;
  13. self.mediaPlayer.circlePlay = YES;
  14. self.mediaPlayer.dropBufferDuration = 3000;
  15. self.mediaPlayer.printLog = YES;
  16. AliVcMovieErrorCode err = [self.mediaPlayer prepareToPlay:[NSURL URLWithString:self.playUrl]];
  17. //5.判定错误,是否可以播放。
  18. if (err != ALIVC_SUCCESS) {
  19. NSLog(@"chinese-播放失败");
  20. }else{
  21. [self.mediaPlayer play];
  22. }
  23. }

此外,iOS 播放器更详细的使用方式见基础播放器;iOS播放器更多功能和接口请参考 接口文档

步骤四:题目信息下发(从服务端)

当主持人准备播报题目时,现场工作人员需要调用AppServer的接口下发题目。下发题目的接口中包含以下参数:

  • liveId 表示直播场次。此ID代表了唯一一场直播。
  • questionId 表示需要下发题目的ID。
  • expiredSeconds 答题失效时间(秒)。即多少秒内答题有效。

AppServer在接收到请求后完成以下动作:

  • 根据liveId查到直播流信息,从而调用视频云OpenAPI的接口【详见直播答题方案中的OpenAPI接口定义】,往直播流中添加自定义的SEI信号(里面包含questionId信息);

  • 初始化答题session。一个答题session包含:题目内容、答题失效绝对时间戳、各选项选择人数。

1. OpenAPI调用示例

  1. https://live.aliyuncs.com?Action=AddTrancodeSEI&Domain=test101.cdnpe.com&App=xxx&Stream=xxx&Text=hahaha&Pattern=frame&Repeat=300&Delay=0&<公共请求参数>

注意:在直播答题这种场景下,参数Pattern建议取值frameRepeat建议为3倍的关键帧间隔(示例中为300)。这样设置可以保证在3个关键帧间隔内,即便发生丢帧,只要播放器收到1帧,即可取得SEI信息。由于SEI在多帧内重复,所以播放器需要做SEI去重的工作。

2. 注意事项

  • 由于推流会产生固定的延时,而现场人员是通过云端服务插入SEI信号,有可能插入SEI的画面比真实插入时间早一点。因此现场人员在活动前需要预先测量出推流延时,从而在插入SEI信号时加入一个固定延迟。

  • 测量推流延时的方法,可以在画面上摆一个秒表。假设在T0时间插入了SEI,而播放器在播放到Ts时间的时钟画面时检测到了SEI,那么推流延时就等于T0 - TsTs < T0)。

举例:现场主持人在12:00:00时提出问题,假设现场到阿里云的推流延时有1秒,那么现场工作人员应在12:00:01时调用添加SEI的OpenAPI(或者在12:00:00时调用,但是OpenAPI里面的delay参数设置为1000),这样正好保证SEI插入的是12:00:00主持人提出问题时的画面。

  • 客户端在收到SEI信号后,需要向服务器获取问题,这会产生一定的通信耗时。因此在下发题目时,可酌情加大expiredSeconds,比如在原有答题失效时间上+1秒。

步骤五:播放器解析SEI信息

播放器会监听SEI信号的回调,通过播放器的SEI信号回调接口,可以获取到下发过来的SEI信息。

1. Android解析SEI信息

(1)设置回调

setSEIDataListener

public void setSEIDataListener(MediaPlayerSEIDataListener listener)

(2)监听SEI回调

MediaPlayer.MediaPlayerSEIDataListener

public void onSEIdata(String data)

2. iOS解析SEI信息

(1)添加监听通知接口

  1. //直播答题接收的消息
  2. [[NSNotificationCenter defaultCenter] addObserver:self
  3. selector:@selector(onSeiData:)
  4. name:AliVcMediaPlayerSeiDataNotification object:self.mediaPlayer];

(2)处理监听通知中SEI数据:

  1. - (void)onSeiData:(NSNotification *)notification{
  2. NSDictionary* dict = [notification userInfo];
  3. if (dict) {
  4. NSString* seiData = [dict objectForKey:@"seiData"];
  5. if (seiData) {
  6. NSLog(@"sei data is %@",seiData);
  7. }

步骤六:APP获取完整题目并展示

APP在获取到SEI中携带的questionId后,向AppServer请求对应的题目内容(请求中包含liveIdquestionId)。

AppServer收到请求后,返回题目内容和剩余答题秒数remainSeconds。剩余答题秒数通过以下方式计算:

  1. 剩余答题秒数 = 答题失效绝对时间戳 - 当前绝对时间戳

APP收到响应后,显示题目,并根据remainSeconds开始倒计时。

步骤七:APP答题计时并提交答案

1. APP显示题目,并根据appServer返回的remainSeconds字段来进行倒计时。如果用户上次答题正确,则可选择选项答题。如果已经淘汰,则不能答题。

2. 当用户点击选项,则用户不能更改选项,同时APP需要向AppSever上报用户选择的答案(请求中包含liveIdquestionIdanswerIduserId)。

3. 当用户没有选择,则不许要上报用户的选择答案,答题结果为失败,下次不能答题。

4. 上报答案之后,APP需要记录下来作为用户的答题结果,下次答题需要根据上次答题的结果判断用户是否能够答题。

步骤八:答题服务收集答案

AppServer收到APP上报的答案,需要做如下处理:

1. 根据上报答案请求中的liveIdquestionId,查找答题session是否存在。若不存在则拒绝。

2. 根据当前时间是否超过答题失效绝对时间,判断答题是否超时,超时则答题无效。

注意:考虑到APP上传答案存在一定的网络延时,在判断答题是否超时时,可宽限一定时间,如2秒。**

3. 统计答题人数:对应选项的答题人数+1。

步骤九:答题结果下发

当主持人宣布答题结束,准备公布答题结果时,现场工作人员需要调用AppServer的接口下发答题结果(请求中包含liveIdquestionId)。

同样地,此时AppServer调用视频云OpenAPI的接口,往直播流中插入SEI信号(包含questionId信息),告知APP可以来请求答题结果。

步骤十:APP展示答题结果,进入下一轮

1. APP播放器获取到显示答题汇总的SEI信息之后,这个时候APP端需要区分是答题SEI信号还是答题汇总SEI信号,区分是答题汇总SEI后,向APPServer请求答题汇总(包括liveIdquestionId)。

2. APP在接收到答题汇总之后,显示汇总对话框,将是否答对以及各个答案的答题人数显示出来。

3. 当显示到一定时间后,隐藏汇总对话框,可以进入下一轮答题。

本文导读目录