201604深圳云栖大会Workshop - 用OSS搭建一个视频直播网站

目标

  • 使用OSS搭建一个完整的视频直播网站,可以创建删除直播频道,并且能够使用直播软件从PC端或者移动端推送视频流,并在PC或者移动端观看直播。

准备工作

  • RTMP推流软件

这里使用开源软件OBS作为推流的来源,OBS可以在官网上下载,这里为了加速我们提供了OSS上的OBS下载地址。

OBS(WINDOWS)

OBS(MAC)

OBS主页

  • OSS主页和控制台

OSS主页

OSS控制台

AccessKey获取页面

OSS文档和SDK

  • 注意事项:预计耗费的费用

OSS是一个按量计费的服务,收费为存储量加上从OSS流出的流量费用,上传到OSS不收费。具体的价格可以查看OSS价格总览这个页面来获取。

在搭建视频网站的过程中,主要有观看视频直播的流量费用和OSS的存储费用。

步骤

1. 创建OSS的Bucket。将创建好的Bucket信息注册到之前创建的视频网站上。

打开OSS控制台。点击右上角创建Bucket。

这里注意,由于只有深圳地区的OSS支持直播功能,因此为了成功完成课程,请创建深圳地区的Bucket。

201604深圳云栖大会Workshop - 用OSS搭建一个视频直播网站

创建完成之后我们点击Bucket信息页面,查看Bucket的一些基本信息。

201604深圳云栖大会Workshop - 用OSS搭建一个视频直播网站
201604深圳云栖大会Workshop - 用OSS搭建一个视频直播网站

之后要做的事情就是将对应的Bucket信息填入视频网站的设置中,这里要填入的信息有三个,Bucket名称、云账号的AccessKeyId和AccessKeySecret。

201604深圳云栖大会Workshop - 用OSS搭建一个视频直播网站

完成设置之后可以回到视频列表页面,这个时候就可以看到获取视频列表已经成功了,如果已经有一些频道的话就会在这里显示出来。

201604深圳云栖大会Workshop - 用OSS搭建一个视频直播网站

在添加频道之前,因为直播播放器使用的是js直接获取视频内容,因此需要设置一下跨域访问(cors)配置。
201604深圳云栖大会Workshop - 用OSS搭建一个视频直播网站
201604深圳云栖大会Workshop - 用OSS搭建一个视频直播网站

2. 自己创建一个直播频道,并获取用于推送rtmp视频流的地址。

点击网站页面上方的创建频道页面,填写一些基本信息之后点击按钮创建直播频道。创建成功之后可以看到新创建的直播频道的一些信息,比如频道的名称、描述和HLS直播地址。

201604深圳云栖大会Workshop - 用OSS搭建一个视频直播网站
201604深圳云栖大会Workshop - 用OSS搭建一个视频直播网站

创建成功之后点击返回链接返回视频列表页面,可以看到新创建的直播频道,因为目前还没与直播流,因此无法显示视频的缩略图,在直播频道的下方的链接中就是RTMP的推送地址。

为了防止未授权用户推送RTMP流,因此这里的RTMP地址是签名过的。

201604深圳云栖大会Workshop - 用OSS搭建一个视频直播网站

在该链接上点击右键复制链接就可以得到rtmp的推流地址了。

3. 在电脑上安装一个视频流的推送软件,并使用上一步获得的地址来进行视频流的推送。

在电脑上安装一个直播软件,这里使用开源软件OBS作为推流的来源。可以通过以下链接来下载。

OBS(WINDOWS)

OBS(MAC)

这里以mac版本为示例,安装完成之后显示如下:

201604深圳云栖大会Workshop - 用OSS搭建一个视频直播网站

按照下面的步骤来完成推流的设置:

201604深圳云栖大会Workshop - 用OSS搭建一个视频直播网站
201604深圳云栖大会Workshop - 用OSS搭建一个视频直播网站

这里可以选择很多输入源,我们这里选择的是视频捕获设备,也就是笔记本的摄像头。

201604深圳云栖大会Workshop - 用OSS搭建一个视频直播网站

将上一步获取的rtmp地址填入然后开始推送视频流。这里有两个需要填入的地址,但是上一步获取到的rtmp链接是类似以下这种形式的。

rtmp://live-test.demo-oss-cn-shenzhen.aliyuncs.com/live/workshop-test?OSSAccessKeyId=nB3kv50SCg8phHsQ&Expires=1461075552&Signature=%2BNXTXdYjerP%2F4fbY3vmmStbK2Sw%3D

那么这里填入的url为live/之前的部分。

rtmp://live-test.demo-oss-cn-shenzhen.aliyuncs.com/live/

流秘钥为之后的部分。

workshop-test?OSSAccessKeyId=nB3kv50SCg8phHsQ&Expires=1461075552&Signature=%2BNXTXdYjerP%2F4fbY3vmmStbK2Sw%3D

201604深圳云栖大会Workshop - 用OSS搭建一个视频直播网站

201604深圳云栖大会Workshop - 用OSS搭建一个视频直播网站
201604深圳云栖大会Workshop - 用OSS搭建一个视频直播网站

这样就可以成功推送了。

4.从PC端或者移动端观看推送的视频流。

刷新原来的视频页面,就可以看到已经能正确显示缩略图了。点击缩略图即可开始播放视频。

201604深圳云栖大会Workshop - 用OSS搭建一个视频直播网站

201604深圳云栖大会Workshop - 用OSS搭建一个视频直播网站

补充材料

上一篇:杭州银行:坚定投入移动化战略,借助EMAS研发平台迈入移动开发3.0时代


下一篇:厦门航空:EMAS助力研发效率提升50%