【直播】一种基于H5网页进行网络直播的技术方案

随着快手、抖音、B站等视频平台的兴起，网络直播被广泛大量使用，同时由于今年的疫情原因，在高校的教学、会议中也大量使用了网络直播。我最近负责了“2020年中外新闻传播学院院长会议”的会议直播工作[1]，在此记录一下直播的技术方案。

一、直播需求与方案选择

由于此次中外院长会议的议题严肃、规格高，对于网络直播的需求如下：

直播间需要有相应品牌标识，最好是官方网站或平台；
用户可以打开直接访问，最好不要安装软件；
不提供评论或弹幕功能，如果有类似功能要禁掉；
要能够统计直播间的观看人数，最好可以实时显示；
保证音视频的流畅性，能够支持较大规模的并发量；

综合此次会议的网络直播需求，本次直播放弃了使用快手、B站等直播平台。选择在官网上新建直播网页的方式进行，保证了品牌效果，同时支持用户直接打开访问，不提供评论和弹幕功能，满足了需求1、2、3；针对需求4，可以在直播的H5网页添加一段JS代码，完成观看人数的统计和显示；针对需求5，由于预期可能直播观看人数会较大，较大规模的直播视频访问并发量大，为了保证可靠性，选择使用腾讯云进行直播流视频的分发，保障音视频的流畅性。

二、直播技术细节

（1）直播视频推流

本次会议直播采用7台固定机位的摄像机、1台轨道摄像机，利用切换台切换各机位的视频信号，软件利用vMix[2]设置台标、字幕，将现场直播的PGM音视频利用 RTMP 协议进行直播推流。

RTMP 协议： Real Time Message Protocol(实时信息传输协议)的缩写，它是由Adobe公司提出的一种应用层的协议，用来解决多媒体数据传输流的多路复用（Multiplexing）和分包（packetizing）的问题。在各种视频直播中被广泛使用。

基于RTMP协议可以将音视频推流到视频直播平台（快手、抖音、B站等），在软件vMix的Stream中配置RTMP推流地址，配置方法如图1所示，需要注意配置RTMP推流的码率需要根据网络的实际情况配置，需要提前测试以确保视频直播的流畅度。

（2）腾讯云直播

为了降低大规模用户同时观看视频直播带来的高并发和带宽挑战，可以租用腾讯云的云直播服务[3]，这类云平台具有CDN加速、负载均衡等技术，能够解决高并发带来的挑战，同时基于流量的后付费模式价格上也比较经济。

在腾讯云直播的域名管理下，如图2所示添加推流域名和播放域名，将自己的域名重定向到腾讯云直播CNAME所示的地址，然后点击管理操作，生成RTMP的推流地址和播放地址。推流地址填写到vMix等推流软件，播放地址嵌入到H5网页中，即可在相应的网页中观看视频直播。推流地址和播放地址的配置如图3、图4所示。

（3）H5视频网页

我们在第2步的腾讯云直播中生成了流视频的视频播放地址，后缀名为.flv或.m3u8的网络流视频地址，只需要将该视频地址编写嵌入到H5网页中即可。下面的JS代码片段可以播放.m3u8的网络流视频（替换封面海报、流视频的地址），嵌入到H5网页中即可。

<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script>

<div style="display:none">
    <script type="text/javascript" src="https://s4.cnzz.com/z_stat.php?id=1279358729&web_id=1279358729" cdata_tag="script" _ue_custom_node_="true"></script>
</div>

<div>
    <video id="myVideo" width="640" height="400" class="video-js vjs-default-skin vjs-big-play-centered" poster="直播视频的封面海报.jpg" controls="controls" preload="auto" autoplay="autoplay" playsinline="true">
        <source id="source" src="腾讯云直播中生成的流视频地址.m3u8" type="application/x-mpegURL"></source>
    </video>
</div> 

<script>
    var myVideo = videojs('myVideo', {
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: false,
        errorDisplay: false,
    })
    myVideo.play()
</script>

</div>

<div>

</video>

</div>

var myVideo = videojs('myVideo', {

bigPlayButton: true,

textTrackDisplay: false,

posterImage: false,

errorDisplay: false,

})

myVideo.play()

</script>

（4）统计在线观看人数

最后，我们需要能够统计在线的观看人数，可以利用站长统计、百度统计、腾讯统计、Google Analytics等网页统计系统检测在线的人数，均是在相应的网站中生成一段网页访问在线人数的JS代码，将其嵌入H5网页中，即可实现。下面的JS代码显示了利用站长统计统计在线观看人数的代码（需将代码中“你网页的ID号”替换为真实的ID），其他几个统计工具原理和代码都很类似，这些代码片段均是在相应的网站上自动生成的，复制粘贴即可。

<div style="display:none">
    <script type="text/javascript" src="https://s4.cnzz.com/z_stat.php?id=你网页的ID号&web_id=你网页的ID号" cdata_tag="script" _ue_custom_node_="true"></script>
</div>

<script type="text/javascript">
    document.write(unescape("%3Cspan id='cnzz_stat_icon_你网页的ID号'%3E%3C/span%3E%3Cscript src='https://s4.cnzz.com/z_stat.php%3Fid%3D你网页的ID号%26online%3D1%26show%3Dline' type='text/javascript'%3E%3C/script%3E"));
</script>

</div>

document.write(unescape("%3Cspan id='cnzz_stat_icon_你网页的ID号'%3E%3C/span%3E%3Cscript src='https://s4.cnzz.com/z_stat.php%3Fid%3D你网页的ID号%26online%3D1%26show%3Dline' type='text/javascript'%3E%3C/script%3E"));

</script>

最后生成的直播网页如图5所示，可以自行设计添加标题、文字、直播时间等信息，在直播时间之外显示会议的海报，在直播时间显示网络直播视频。

总结

网络视频直播技术相对比较复杂，在现场需要设计好机位和角度，导播也需要根据现场的实际情况适当的切换机位以保障直播效果。一般的直播推流使用相应的网络直播平台即可，配置比较简单方便；本文利用云直播平台进行加速，同时将网络直播的流视频通过H5网页的方式，可以嵌入到官方网站，更好的保障了品牌效果。最后，本次院长会议的网络视频直播取得圆满成功，观看人数达两千余人，音视频的流畅度、清晰度均有保障。

由于涉及到的技术比较复杂，以上方案供专业技术人员参考。对于小型的会议直播，如果可以使用视频直播平台的，使用这类直播平台会更简单快捷。

参考资料

[1] 瞭望与关怀：全球疫情背景下的新闻传播 http://jcr.ruc.edu.cn/xinwen/dongtai/content-1970.html

[2] VMix官网 https://www.vmix.com/

[3] 腾讯云官网 https://cloud.tencent.com/

原创文章，作者：麒麟，如若转载，请注明出处：https://zhouqilin.tech/450.html

【直播】一种基于H5网页进行网络直播的技术方案

相关推荐