DCloud_App_Array
DCloud_App_Array
  • 发布:2018-06-21 19:41
  • 更新:2019-07-11 10:55
  • 阅读:12223

直播业务指南

分类:HTML5+

*注意要使用HBuilderX而不是HBuilder

引言

直播是很多开发者的需求。
HTML5的video,虽然可以播放流媒体,但不支持rtmp等常用直播格式。更无法实现推流,就是实时流式上传视频。
5+App、uni-app给开发者提供了完整的直播解决方案。
HTML5Plus的规范新增了video规范,提供了原生的视频播放和推流录制上传。

HTML5Plus的规范是通行规范,可支持任何直播云服务厂商的直播服务器。
但又拍云公司作为HTML5中国产业联盟成员,为HTML5plus的开发者提供了更多完善服务。

  1. 注册优惠
    点此链接注册,可得众多优惠。
    a) 认证完毕后赠送 61 元免费代金券;
    b) 首次充值后,奖励充值金额 10% 代金券
    c) 一周后再赠送200元的代金劵
    以上优惠不是三选一,是全都有。有效期1个月时间。
  2. 便捷的服务器搭建
    无需关心rtmp服务器的搭建和网络cdn的优化,注册后提供自己的直播推流和播放的域名,做cname映射到又拍云的服务器,然后自己随便定义二级目录地址就可以用了。
    详见又拍云文档http://docs.upyun.com/live/guide/

代码示例-推流上传

使用HBuilderX新建项目时自带的Hello H5+模板,真机运行,可以看到video示例,里面有推流和播放的示例代码。
这里简单描述下代码逻辑。

直播推流控件会调用手机摄像头采集视频流,编码后通过rtmp协议提交到直播服务器。

  • 创建直播推流控件

    1. uni-app模式示例:
      const currentWebview = this.$mp.page.$getAppWebview()  
      var pusher = plus.video.createLivePusher("", {    
      url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb',    
      top:'100px',    
      left:'0px',    
      width: '100%',    
      height: '300px',    
      position: 'static'    
      });    
      currentWebview.append(pusher);    
    2. 5+App模式示例:
      在页面中直播推流控件需要绑定div确定位置及大小,创建直播推流控件需要传入div的id,示例如下:
      <html>  
      <head>  
            <meta charset="utf-8"/>  
            <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  
            <title>Hello H5+</title>  
            <script type="text/javascript">  
      var pusher = null;  
      // H5 plus事件处理  
      function plusReady(){  
      // 创建直播推流控件  
      pusher = new plus.video.LivePusher('pusher',{url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb'});  
      // 监听状态变化事件  
      pusher.addEventListener('statechange', function(e){  
            console.log('statechange: '+JSON.stringify(e));  
      }, false);  
      }  
      document.addEventListener('plusready', plusReady, false);  
            </script>  
      </head>  
      <body>  
            <br/>  
            <div id="pusher" style="width:300px;height:400px;background-color:#000000;margin:auto"></div>  
      </body>  
      </html>  

      其中new plus.video.LivePusher()第一个参数'pusher'为绑定div的id值,第二个参数中的url属性值为直播推流服务器地址,必须为rtmp协议。创建后返回直播推流控件(LivePusher)对象,后续可通过此对象进行操作控制。

  • 采集直播推流提交到服务器
    创建直播推流控件后可通过setOptions方法更新直播控件参数,如下更新直播推流服务器地址:

    pusher.setOptions({url:'rtmp://新的直播推流服务器地址'});  

    配置完成后调用start方法开始采集直播流提交到服务器:

    pusher.start();  

推流时支持美颜、摄像头切换。不支持其他特效滤镜。
目前不支持录屏直播,无法实现手机录制。除非使用原生sdk自行开发离线打包。
目前暂不支持直播连麦功能。

更多API参考文档http://www.html5plus.org/doc/zh_cn/video.html#plus.video.LivePusher
推流到直播服务器后可通过原生视频播放控件进行播放。

代码示例-使用视频播放控件播放直播视频流

HTML5标准的video是无法播放直播视频流的,所以需要使用原生增加的播放控件。
HTML5plus扩展的原生视频播放控件(也是uni-app的App端自带的)支持视频格式包括mp4和flv,视频传输协议支持http/https和rtmp/hls/rtsp(直播流)

  • 创建视频播放控件

    1. uni-app模式
      uni-app模式直接使用组件进行播放,无需其他复杂设置。
    2. 5+App模式
      在页面中视频播放控件需要绑定div确定位置及大小,创建视频播放控件需要传入div的id,示例如下:
      <!DOCTYPE HTML>  
      <html>  
      <head>  
            <meta charset="utf-8"/>  
            <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  
            <title>Hello H5+</title>  
            <script type="text/javascript">  
      var video = null;  
      // H5 plus事件处理  
      function plusReady(){  
      // 创建视频播放控件  
      video = new plus.video.VideoPlayer('video',{  
            src:'rtmp://live.hkstv.hk.lxdns.com/live/hks'  
      });  
      }  
      document.addEventListener('plusready', plusReady, false);  
            </script>  
      </head>  
      <body>  
            <br/>  
            <div id="video" style="width:98%;height:300px;background-color:#000000;margin:auto"></div>  
      </body>  
      </html>  

      其中new plus.video.VideoPlayer()第一个参数'video'为绑定div的id值,第二个参数中的src属性值为要播放的直播视频地址,直播视频必须为rtmp协议。创建后返回视频播放控件(VideoPlayer)对象,后续可通过此对象进行操作控制。

  • 播放视频流
    创建视频播放控件后可通过setOptions方法更新播放控件参数,如下更新视频服务器地址:

    video.setOptions({src:'新的视频服务器地址'});  

    用户可以点击播放控件上的播放按钮进行播放,也可调用play方法进行播放:

    video.play();  

如果想在视频上绘制一些内容,比如滚动的聊天记录,5+App可以在上面创建一个透明webview,具体代码在Hello H5+的video示例里有;uni-app可以在上面创建一个subnvue,在HBuilderX1.9.10+版本中自带的hello uni-app - API - 界面 - 原生子窗体中也有示例。

包括防盗播的跑马灯也可以这么做。

更多API参考文档http://www.html5plus.org/doc/zh_cn/video.html#plus.video.VideoPlayer

三方示例模板

这个是插件市场里三方开发者做的直播业务模板,开源,可以参考:http://ext.dcloud.net.cn/plugin?id=226

还有一些开发者封装了三方原生sdk,比如腾讯直播sdk,可以在插件市场获取

15 关注 分享
Trust qq820805144 霸王 835582871@qq.com 461338425@qq.com Ayumi 高司令 企鹅55070177 416867448@qq.com 917647288@qq.com 小诺小言 吃辣条的大妖怪 admin@shuliangfu.com DCloud_UNI_HT 没得好名字

要回复文章请先登录注册

哈哈八百

哈哈八百

回复 1170841058@qq.com:
是啊,我也发现了,请问你解决了吗??pusher.stop();pusher.close();都不管用
2019-07-11 10:55
1170841058@qq.com

1170841058@qq.com

uni-app上面 plus.video.createLivePusher 推流已经关闭了 ,但是手机还是显示在录音,就是推流画面停止了,但是还能听到对面的声音
2019-07-08 14:15
1170841058@qq.com

1170841058@qq.com

uni-app上面 plus.video.createLivePusher 推流已经关闭了 ,但是手机还是显示在录音,就是推流画面停止了,但是还能听到对面的声音
2019-07-08 14:15
1170841058@qq.com

1170841058@qq.com

plus.video.createLivePusher 推流已经关闭了 ,但是手机还是显示在录音,就是推流画面停止了,但是还能听到对面的声音
2019-07-08 14:12
大苏

大苏

直播推流功能很多不能用,垃圾的一笔
2019-06-17 16:08
879450223@qq.com

879450223@qq.com

使用视频播放控件播放直播视频流 uniapp直接使用组件进行播放 怎么使用啊 难道就我一个不会吗
2019-06-14 16:29
漫天飞雪

漫天飞雪

推流后,声音特别卡顿,无法听清怎么办
2019-05-11 08:49
liuRabt

liuRabt

关注一下
2019-03-22 10:57
DCloud_heavensoft

DCloud_heavensoft

回复 2664644993@qq.com:
videoplayer是原生的,高于任何web组件。无法被其他div遮挡
2019-03-21 22:03
545097807@qq.com

545097807@qq.com

请问为什么推流上去的视频内容第二次进去会变成黑白的,播放推流内容 只有声音没有图像
2019-03-12 11:10
545097807@qq.com

545097807@qq.com

请问为什么推流上去的 视频内容第二次进去会变成黑白的,另一个手机 播放推流内容 比方不出来
2019-03-12 11:03
2664644993@qq.com

2664644993@qq.com

请问这个怎么把videoplayer放到指定的div中啊,用vue开发的单页面,有可以测试的直播地址吗?
2019-02-28 12:03
416225569@qq.com

416225569@qq.com

小米6X 手机直播 非常模糊 对接腾讯云 怎么解决
2019-01-03 14:38
627271099@qq.com

627271099@qq.com

methods:{
// 创建直播推流控件
createLivePusher:function() {
var pages = getCurrentPages();
var page = pages[pages.length - 1];
var currentWebview = page.$getAppWebview();
var pusher = plus.video.createLivePusher('sdfe', {
url:'rtmp://live.80511.net/live/c2fb2431d1?bizid=39334&txSecret=d697af7b7d55001c8f7238a86be954fa&txTime=5C1FB0FF',
top:'100px',
left:'0px',
width: '100%',
height: '100%',
position: 'static',
beauty:'1',
whiteness:'5',
mode:'SD'
});
currentWebview.append(pusher);
},
},
请问这样写有问题吗 为什么无法推流
2018-12-23 17:31
DCloud_heavensoft

DCloud_heavensoft

回复 1823127286@qq.com:
云服务肯定是收费的,不管用又拍云还是其他家,都没有免费让你用的
2018-11-28 21:53
1823127286@qq.com

1823127286@qq.com

回复 guoshunfeng@sina.com:
我的怎么推不上去啊,大佬,求指教啊,还有那个直播服务是收费的吧
2018-11-27 15:52
1823127286@qq.com

1823127286@qq.com

这个直播服务,是收费的吧,大佬们
2018-11-27 15:02
Mike_li

Mike_li

推流能设置码率吗?
2018-11-08 15:48
937869175@qq.com

937869175@qq.com

请问不支持 手机录制,不支持连麦功能 意思是 就是主播录制的功能 要自己另外开发是吗
2018-11-05 10:43
DCloud_heavensoft

DCloud_heavensoft

回复 Lspring:
支持离线打包
2018-10-31 04:52
243724806@qq.com

243724806@qq.com

回复 878898167@qq.com:
同问 解决了么
2018-09-15 21:12
Lspring

Lspring

请问离线打包能提供直播的sdk吗
2018-09-12 16:01
ouweican@126.com

ouweican@126.com

为什么我在创建推流控件的时候只能在参数里面放url参数,只要加一些其他参数就推流不了。比如静音美颜那些都没用
2018-09-10 15:39
guoshunfeng@sina.com

guoshunfeng@sina.com

我的延时在5秒左右大家的有延时没用的阿里云服务
2018-08-07 12:17
一路格桑花

一路格桑花

回复 qq820805144:
要求可不少啊
2018-08-03 09:28
835582871@qq.com

835582871@qq.com

回复 281960910@qq.com:
我也没有看到效果
2018-07-30 14:43
Ayumi

Ayumi

正在关注 直播
2018-07-27 10:49
DCloud_App_Array

DCloud_App_Array (作者)

回复 835582871@qq.com:
VideoPlayer播放控件可以创建多个。
2018-07-20 17:40
835582871@qq.com

835582871@qq.com

回复 835582871@qq.com:
好多改了没有用
2018-07-20 13:54
835582871@qq.com

835582871@qq.com

options在直播过程中能改吗?
2018-07-20 11:43
835582871@qq.com

835582871@qq.com

一个页面只能定义一个播放吗?我想在页面里放置多个视频
2018-07-18 15:21
qq820805144

qq820805144

回复 DCloud_App_Array:
非全屏模式像爱奇艺APP那样固定在顶部。
2018-07-18 13:14
qq820805144

qq820805144

回复 DCloud_App_Array:
对啊,还有如何判断是播放连续剧,放完一集自动播放下一集和判断出是连续剧播放器上有点下一集的按钮,还有那个加载中转圈那个可以修改个好看点的样子吗
2018-07-18 11:49
DCloud_App_Array

DCloud_App_Array (作者)

回复 qq820805144:
非全模式怎么还需要返回按钮呢?这种情况下返回按钮应该是页面的才对呀
2018-07-16 11:13
qq820805144

qq820805144

如果载入连续剧在播放器里面有没有点一集的按钮,还有播放器不是全屏的时候没有返回按钮
2018-07-15 01:41
海阔天空_94

海阔天空_94

怎么下载9.1 版本?
2018-07-14 16:05
qq820805144

qq820805144

希望可以缓冲,比如用户网络不好暂停的时候可以缓冲视频还有预加载
2018-07-11 00:11
37797427@qq.com

37797427@qq.com

回复 37797427@qq.com:
而且要卡屏
2018-07-07 12:54
37797427@qq.com

37797427@qq.com

还有就是不播放m3u8 资源吗?
2018-07-07 12:53
37797427@qq.com

37797427@qq.com

安卓8.0 又BUG 返回主页要从0秒开始播放
2018-07-07 12:52
454609449@qq.com

454609449@qq.com

异常:show-progress:播放时无法没有进度条
2018-06-28 17:23
itxiaoxiao

itxiaoxiao

视频在竖屏下没法拖动改变音量和亮度
2018-06-27 09:59
itxiaoxiao

itxiaoxiao

阿里视频防盗链问题怎么解决,毕竟app页面没有referer
2018-06-27 09:56
qq820805144

qq820805144

视频传输协议建议增加支持ftp协议的
2018-06-26 22:09
DCloud_Android_zl

DCloud_Android_zl

回复 878898167@qq.com:
{"initial-time":"30",
"autoplay":"true",
"objectFit":'fill',
"show-fullscreen-btn":"true",
"show-play-btn":"true",
"show-progress":"true",
"show-center-play-btn":"true",
"enable-progress-gesture":"true"}
VideoPlayerOptions参照上面设置,属性名称用引号括起来
2018-06-26 12:30
281960910@qq.com

281960910@qq.com

美颜、美白的值范围是多少 感觉设置了不起作用
2018-06-25 18:51
281960910@qq.com

281960910@qq.com

回复 DCloud_heavensoft:
还有个问题,进入拉流控件屏幕就自动暗了下来怎么回事儿,后面也不能恢复了。要退出app重新进去app页面才会恢复,再进去拉流播放页面又暗了,手机的自动调节屏幕亮度都不行
2018-06-25 10:50
281960910@qq.com

281960910@qq.com

回复 DCloud_heavensoft:
是的,我已经解决了,就是和你说的一样。
2018-06-25 10:46
qq820805144

qq820805144

播放器的封面截图怎么弄呢
2018-06-25 06:59
DCloud_heavensoft

DCloud_heavensoft

回复 281960910@qq.com:
不是调视频的全屏功能,而是把视频的占位div设成全屏大,然后在参考Hello H5+里的示例,创建一个新的半透明webview在上面,显示那些元素。元素点击交互需要跨webview通信
2018-06-23 20:53
mqcmqc@21cn.com

mqcmqc@21cn.com

厉害 希望越来越牛逼
2018-06-23 16:38
菜鸡

菜鸡

性能怎么样...
2018-06-23 16:31
281960910@qq.com

281960910@qq.com

要在全屏视频上加推流控制的按钮比如 开始推流 暂停推流怎么弄 现在一开始推流这些在上层的元素都被视频覆盖了 看不见了 点还是能点到
2018-06-23 15:07
281960910@qq.com

281960910@qq.com

回复 878898167@qq.com:
是有问题我也发现了 例如 show-progress 改成 show_progress
2018-06-23 14:30
健健

健健

回复 878898167@qq.com:
我怎么 没有更新呢?
2018-06-22 17:27
健健

健健

赞赞赞
2018-06-22 13:23
878898167@qq.com

878898167@qq.com

回复 DCloud_heavensoft:
调试正常,离线打包出错了,还有一点希望能在setOptions加上视频标题及返回上一页按钮
2018-06-22 02:28
Trust

Trust

回复 王者地带:
HBuilder 发版后,新建最新的 hello h5+ 模板,里面有示例哦。
2018-06-21 21:48
王者地带

王者地带

回复 DCloud_heavensoft:
可以做个dome 更新到 Hello mui 上
2018-06-21 21:44
王者地带

王者地带

要在线打包,才能体验吗?
2018-06-21 20:10
回梦無痕

回梦無痕

很好,明天试一下这个播放器。
2018-06-21 19:48