DCloud_App_Array
DCloud_App_Array
  • 发布:2018-06-21 19:41
  • 更新:2023-11-21 10:00
  • 阅读:54755

直播业务指南

分类:HTML5+

*注意要使用HBuilderX而不是HBuilder

引言

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

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

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

代码示例-推流上传(live-pusher)

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

  • 创建直播推流控件
  1. uni-app下nvue页面
    uni-app下的nvue页面在uni-app编译模式下,实现了live-pusher组件及uni.createLivePusherContext API

并实现了一套代码兼容App和小程序,具体参考上述组件及API文档。

  1. uni-app下的vue页面
    app平台的vue页面中使用直播推流,不能使用uni的api,而需要使用plus的API
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);  
  1. 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)对象,后续可通过此对象进行操作控制。

使用HBuilderX新建5+App项目时自带的Hello H5+模板,真机运行,可以看到video示例,里面有推流和播放的示例代码。

  • 采集直播推流提交到服务器
    创建直播推流控件后可通过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模式直接使用<video>组件进行播放,无需其他复杂设置。
  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,可以在插件市场获取

25 关注 分享
Trust [已删除] 霸王 8***@qq.com 4***@qq.com Ayumi 高司令 [已删除] 4***@qq.com 9***@qq.com 小诺小言 吃辣条的大妖怪 a***@shuliangfu.com DCloud_UNI_HT 没得好名字 9***@qq.com 1***@qq.com 2***@qq.com q***@icloud.com aliang888 苛学加 5***@qq.com 2***@qq.com 1***@qq.com 9***@qq.com

要回复文章请先登录注册

1***@163.com

1***@163.com

webrtc可以用吗
2023-11-21 10:00
九涯

九涯

uni-app下nvue页面直播推流控件 <live-pusher> 不支持RTSP流格式的地址吗?
2023-11-16 15:29
九涯

九涯

uni-app下nvue页面直播推流控件不支持RTSP流格式的地址吗?
2023-11-16 15:27
舌尖跳舞

舌尖跳舞

回复 huaQ :
我遇到的原因是: 小米 “仅在使用中允许”会出现这个问题,需要选择始终允许
2022-02-28 05:04
不过如此

不过如此

回复 飞酒 :
手机内存在燃烧0.0
2021-03-23 15:13
星海边

星海边

不知道延时 3秒的时间从哪解决
2021-03-11 15:58
Danny7512

Danny7512

如何实现用 snapshot(): 快照 得到的IMAGE只是 Width/Height 限定的范围内的场景。
使用Width/Height 设定的范围后, 取景范围对了, 但是得到的IMAGE依然是整张的, 不仅仅是取景框内的场景。
2020-12-26 19:53
huaQ

huaQ

为什么APP用live-pusher组件再nvue中推流视频,会没有声音? 我换其他APP软件推流正常
2020-09-15 22:15
4***@qq.com

4***@qq.com

你好,我想问一下,我暂停久了之后就会自动停止推流了,有什么好的解决办法吗
2020-09-08 16:01
1***@qq.com

1***@qq.com

回复 1***@163.com :
local-mirror ?
2020-09-05 11:05