简单直播实现与实践

原创

相柳

修改于 2019-09-16 14:41:38

1.9K0

修改于 2019-09-16 14:41:38

文章被收录于专栏：灵光独耀灵光独耀

随着国家政策的管控，直播已经开始要求客户用自己的已备案域名进行直播的推拉流，政策虽说发生了变化，但是直播却开始变的简单了起来，今天我们就来聊一聊简单直播的实现与实践。

本次用到的产品有 OBS推流器，自用web子页面，安卓投屏大师，腾讯云直播能力。

第一步：在控制台开通直播并添加域名

https://cloud.tencent.com/product/lvb 点立即使用会跳转后台。

https://console.cloud.tencent.com/live?from=product-banner-use-lvb

添加播放域名

到解析处添加cname

加速域名需CNAME到CDN节点上，直接访问此网站无效，请参考CNAME配置。配置完成后约15分钟生效。若您设置多层CNAME，云直播无法有效监测解析结果，请以实际的访问情况为参考。

当此处显示为已启用时，我们就可以开始创建推流了。

第二步，创建推拉流与OBS实现推流

找到地址生成器

https://console.cloud.tencent.com/live/addrgenerator/addrgenerator

注意推流的过期时间。播放域名同理。

新版控制台还提供web推流功能

当我们有推拉流地址后，就可以通过OBS等方式进行推流了。

这里以OBS为例。

在OBS官网 https://obsproject.com/ 下载对应的版本，安装并打开。

在设置推流中，写入刚才拿到的推流地址信息

创建场景和进行窗口捕获，打开安卓投屏大师进行投屏。

后台测试推流地址播放效果。

第三步，写播放器代码测试web直播

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2.js" charset="utf-8"></script>

  <title>直播测试页面</title>
 </head>
 <body>
  <div id="id_test_video" style="width:100%; height:auto;">


   
	

  </div>

<script>
var player = new TcPlayer('id_test_video', {
"m3u8": "http://play.test.com/live/11b55ed18c.m3u8", //请替换成实际可用的播放地址
"m3u8": "http://play.test.com/live/11b55ed18chd.m3u8", //请替换实际地址，后台配置模板后，可切换清晰度

"autoplay" : true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
"poster" :"http://www.test.com/myimage.jpg",
"width" :  '480',//视频的显示宽度，请尽量使用视频分辨率宽度
"height" : '320'//视频的显示高度，请尽量使用视频分辨率高度
"wording": { 
    2032: "请求视频失败，请检查网络",  //自定义错误提示，如发现页面不显示或提示未知，可能“wording”字段不受支持
    2048: "请求m3u8文件失败，可能是网络错误或者跨域问题" //如若不支持，删除此字段部分代码即可
}
});

</script>

 </body>
</html>

打开页面直播测试页面发现如下信息：