简单直播实现与实践

2019-09-16 14:41:38 浏览数 (1)

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

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

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

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

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

控制台预览控制台预览

添加播放域名

选择直播地域选择直播地域

到解析处添加cname

添加cname添加cname

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

控制台检查域名状态是否生效控制台检查域名状态是否生效

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

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

找到地址生成器

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

生成推流生成推流

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

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

web推流web推流

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

这里以OBS为例。

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

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

OBS推流配置OBS推流配置

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

OBS推流窗口捕获,如直播效果可多捕获一路摄像头OBS推流窗口捕获,如直播效果可多捕获一路摄像头

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

直播可用直播可用

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

代码语言:javascript复制
<!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>

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

报错报错

可能原因有以下几种:

第一,推流地址和播放地址存在错误或不一致。

第二,推流超出有效时间被系统断流。

第三,OBS或推流配置错误。

第四,本地html测试存在跨域错误,无法调用js

这里还可以通过后台来判断。

https://console.cloud.tencent.com/live/tools/streamevent 断流诊断。

控制台断流诊断控制台断流诊断

经过测试。

直播画面已经出现直播画面已经出现

第四步,考虑自动化,通过API方式来获取,以及考虑多清晰度录屏等方式。

转码模板实现多清晰度支持转码模板实现多清晰度支持

API方式后续介绍

0 人点赞