uniapp直播推流、拉流实现

https://www.h5w3.com/10106.html作者链接uniapp直播开发教程发表于：2020年3月10日标签：标签：Hbuilderx, Javascript, Js, Vue, 打包*注意要使用HBuilderX而不是HBuilder引言直播是很多开发者的需求。HTML5的video，虽然可以播放流媒体，但不支持rtmp等常用直播格式。更无法实现推流，就是实时流式上传视频。5

wpy724189991

18558人浏览 · 2020-07-21 16:58:40

wpy724189991 · 2020-07-21 16:58:40 发布

https://www.h5w3.com/10106.html作者链接
uniapp直播开发教程
发表于：2020年3月10日标签：标签：Hbuilderx, Javascript, Js, Vue, 打包
*注意要使用HBuilderX而不是HBuilder

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

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

注册优惠
点此链接注册，可得众多优惠。
a) 认证完毕后赠送 61 元免费代金券；
b) 首次充值后，奖励充值金额 10% 代金券
c) 一周后再赠送200元的代金劵
以上优惠不是三选一，是全都有。有效期1个月时间。
便捷的服务器搭建
无需关心rtmp服务器的搭建和网络cdn的优化，注册后提供自己的直播推流和播放的域名，做cname映射到又拍云的服务器，然后自己随便定义二级目录地址就可以用了。
详见又拍云文档http://docs.upyun.com/live/guide/
代码示例-推流上传（live-pusher）
直播推流控件会调用手机摄像头采集视频流，编码后通过rtmp协议提交到直播服务器。

创建直播推流控件
uni-app下nvue页面
uni-app下的nvue页面在uni-app编译模式下，实现了live-pusher组件及uni.createLivePusherContext API
并实现了一套代码兼容App和小程序，具体参考上述组件及API文档。

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);  `在这里插入代码片`

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。
推流到直播服务器后可通过原生视频播放控件进行播放。

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

创建视频播放控件
uni-app模式
uni-app模式直接使用组件进行播放，无需其他复杂设置。
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。

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

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

即构开发者社区

致力于链接即构和开发者，提供实时互动和元宇宙领域的前沿洞察、技术分享和丰富的开发者活动，共建实时互动世界。

更多推荐

WebSocket实现实时通信

WebSocket 是一种数据通信协议，也是用于客户端和服务端数据通信，类似于我们常见的 http既然有 http，为啥还要 WebSockethttp 通信是单向的请求 + 响应没有请求也就没有响应初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。举例来说