从0开始制作H5直播源码的教程

本文为转载文章,原作者由于公司需要开发一款直播软件,以前也并没有接触过直播这一方面,所以就来从0开始做一个直播,本着开放的原则,发此博文以供后者参阅,视频流服务使用阿里云,H5直播源码。

视频直播服务提供商的选择:
在选择视频直播提供商的时候,目标选择有三家:七牛云、腾讯云与阿里云。由于七牛云以及腾讯云的视频直播需要审核,而且审核速度较慢,本次选择的是阿里云提供的视频直播的服务。

视频直播的原理:

H5直播源码

从上图可以清楚的看到,我们的身份属于 管理员,在整个流程中主要负责视频的推流以及对整个实时视频流的处理。

可以看到,视频直播主要是依托于CDN来实现的,因为这样可以让 内容消费方(也就是用户)选择最佳的视频观看节点,减少视频延时。

具体实现步骤:

1、登陆阿里云官网视频直播控制台:

登陆阿里云账号后,进入控制台,找到左上角的 产品与服务->移动与视频服务->视频直播;
H5直播源码

2、添加直播域名:

点击新建域名
H5直播源码

扫描二维码关注公众号,回复: 10618944 查看本文章

输入域名,审核通过后即可

H5直播源码

3、将直播域名绑定到CNAME:
H5直播源码

将添加的直播域名的DNS CNAME纪录修改为直播域名管理详情页面上显示的CNAME绑定地址。

以阿里云的域名解析为例:

H5直播源码

记录类型选择CNAME,主机记录写新建域名时候的二级域名,记录值填写域名的CNAME值。

4、获取推流和播放地址:

点击管理:
H5直播源码
H5直播源码

其中推流地址的APPname和streamname可以自定义。

5、推流:

推流地址:

rtmp://video-center.alivecdn.com/APPName/StreamName?vhost=test.example.com

说明

video-center.alivecdn.com是直播中心服务器,允许自定义,例如您的域名是your.example.com(注意:该域名不可以和你的直播加速域名相同),可以设置DNS,将您的域名CNAME指向video-center.alivecdn.com即可
APPName是应用名称,支持自定义,可以更改
StreamName是流名称,支持自定义,可以更改
vhost参数是最终在边缘节点播放的域名,即你的直播加速域名。

使用OSB进行推流,OBS下载地址:https://obsproject.com/download#mp

安装完毕后点击设置:.

H5直播源码

在串流中填写相关配置:
H5直播源码

以推流地址:rtmp://video-center.alivecdn.com/APPName/StreamName?vhost=test.example.com为例,

其中URL填写:rtmp://video-center.alivecdn.com/APPName,流秘钥填写:StreamName?vhost=test.example.com;

然后在OBS主界面下方的来源中选择需要直播的画面,点击开始串流即可:
H5直播源码

6、播放:

回到视频云直播控制台,点击流管理就可以看到当前正在直播的视频流了:

H5直播源码

点击后面的直播地址 即可看到3条直播的连接,将鼠标放到连接上,后面会显示一个播放,点击就可以在当前页面播放:

H5直播源码

或者可以将 M3U8格式的直播地址复制到 H5的video标签进行播放。

到此,一个简单的H5直播源码就已经完成了。

发布了119 篇原创文章 · 获赞 27 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/yun_bao_2144899870/article/details/105403276