久久99精品国产麻豆婷婷洗澡,在线亚洲高清揄拍自拍一品区

uniapp開(kāi)發(fā)直播業(yè)務(wù)指南

發(fā)布者：深藍(lán)互聯(lián)

發(fā)布時(shí)間：2020-05-08

點(diǎn)擊：次

引言

直播是很多開(kāi)發(fā)者的需求。
HTML5的video，雖然可以播放流媒體，但不支持rtmp等常用直播格式。更無(wú)法實(shí)現(xiàn)推流，就是實(shí)時(shí)流式上傳視頻。
5+App、uni-app給開(kāi)發(fā)者提供了完整的直播解決方案。
HTML5Plus規(guī)范提供了plus.video擴(kuò)展規(guī)范，實(shí)現(xiàn)了原生的視頻播放和推流錄制上傳。

HTML5Plus的規(guī)范是通行規(guī)范，可支持任何直播云服務(wù)廠商的直播服務(wù)器。
但又拍云公司作為HTML5中國(guó)產(chǎn)業(yè)聯(lián)盟成員，為HTML5plus的開(kāi)發(fā)者提供了更多完善服務(wù)。

注冊(cè)優(yōu)惠
點(diǎn)此鏈接注冊(cè)，可得眾多優(yōu)惠。
a) 認(rèn)證完畢后贈(zèng)送 61 元免費(fèi)代金券；
b) 首次充值后，獎(jiǎng)勵(lì)充值金額 10% 代金券
c) 一周后再贈(zèng)送200元的代金劵
以上優(yōu)惠不是三選一，是全都有。有效期1個(gè)月時(shí)間。
便捷的服務(wù)器搭建
無(wú)需關(guān)心rtmp服務(wù)器的搭建和網(wǎng)絡(luò)cdn的優(yōu)化，注冊(cè)后提供自己的直播推流和播放的域名，做cname映射到又拍云的服務(wù)器，然后自己隨便定義二級(jí)目錄地址就可以用了。
詳見(jiàn)又拍云文檔http://docs.upyun.com/live/guide/

代碼示例-推流上傳（live-pusher）

直播推流控件會(huì)調(diào)用手機(jī)攝像頭采集視頻流，編碼后通過(guò)rtmp協(xié)議提交到直播服務(wù)器。

創(chuàng)建直播推流控件
1. uni-app下nvue頁(yè)面
  uni-app下的nvue頁(yè)面在uni-app編譯模式下，實(shí)現(xiàn)了live-pusher組件及uni.createLivePusherContext API

并實(shí)現(xiàn)了一套代碼兼容App和小程序，具體參考上述組件及API文檔。

uni-app下的vue頁(yè)面
app平臺(tái)的vue頁(yè)面中使用直播推流，不能使用uni的api，而需要使用plus的API

復(fù)制代碼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模式示例：
在頁(yè)面中直播推流控件需要綁定div確定位置及大小，創(chuàng)建直播推流控件需要傳入div的id，示例如下：

復(fù)制代碼<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(){  
   // 創(chuàng)建直播推流控件  
   pusher = new plus.video.LivePusher('pusher',{url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb'});  
   // 監(jiān)聽(tīng)狀態(tài)變化事件  
   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()第一個(gè)參數(shù)'pusher'為綁定div的id值，第二個(gè)參數(shù)中的url屬性值為直播推流服務(wù)器地址，必須為rtmp協(xié)議。創(chuàng)建后返回直播推流控件（LivePusher）對(duì)象，后續(xù)可通過(guò)此對(duì)象進(jìn)行操作控制。

使用HBuilderX新建5+App項(xiàng)目時(shí)自帶的Hello H5+模板，真機(jī)運(yùn)行，可以看到video示例，里面有推流和播放的示例代碼。

采集直播推流提交到服務(wù)器
創(chuàng)建直播推流控件后可通過(guò)setOptions方法更新直播控件參數(shù)，如下更新直播推流服務(wù)器地址：
```
復(fù)制代碼pusher.setOptions({url:'rtmp://新的直播推流服務(wù)器地址'});
```
配置完成后調(diào)用start方法開(kāi)始采集直播流提交到服務(wù)器：
```
復(fù)制代碼pusher.start();
```

推流時(shí)支持美顏、攝像頭切換。不支持其他特效濾鏡。
目前不支持錄屏直播，無(wú)法實(shí)現(xiàn)手機(jī)錄制。除非使用原生sdk自行開(kāi)發(fā)離線打包。
目前暫不支持直播連麥功能。

更多API參考文檔http://www.html5plus.org/doc/zh_cn/video.html#plus.video.LivePusher。
推流到直播服務(wù)器后可通過(guò)原生視頻播放控件進(jìn)行播放。

代碼示例-使用視頻播放控件播放直播視頻流

HTML5標(biāo)準(zhǔn)的video是無(wú)法播放直播視頻流的，所以需要使用原生增加的播放控件。
HTML5plus擴(kuò)展的原生視頻播放控件（也是uni-app的App端自帶的）支持視頻格式包括mp4和flv，視頻傳輸協(xié)議支持http/https和rtmp/hls/rtsp（直播流）

創(chuàng)建視頻播放控件

uni-app模式
uni-app模式直接使用組件進(jìn)行播放，無(wú)需其他復(fù)雜設(shè)置。

5+App模式
在頁(yè)面中視頻播放控件需要綁定div確定位置及大小，創(chuàng)建視頻播放控件需要傳入div的id，示例如下：

復(fù)制代碼<!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(){  
// 創(chuàng)建視頻播放控件  
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()第一個(gè)參數(shù)'video'為綁定div的id值，第二個(gè)參數(shù)中的src屬性值為要播放的直播視頻地址，直播視頻必須為rtmp協(xié)議。創(chuàng)建后返回視頻播放控件（VideoPlayer）對(duì)象，后續(xù)可通過(guò)此對(duì)象進(jìn)行操作控制。

播放視頻流
創(chuàng)建視頻播放控件后可通過(guò)setOptions方法更新播放控件參數(shù)，如下更新視頻服務(wù)器地址:
```
復(fù)制代碼video.setOptions({src:'新的視頻服務(wù)器地址'});
```
用戶(hù)可以點(diǎn)擊播放控件上的播放按鈕進(jìn)行播放，也可調(diào)用play方法進(jìn)行播放：
```
復(fù)制代碼video.play();
```

如果想在視頻上繪制一些內(nèi)容，比如滾動(dòng)的聊天記錄，5+App可以在上面創(chuàng)建一個(gè)透明webview，具體代碼在Hello H5+的video示例里有；uni-app可以在上面創(chuàng)建一個(gè)subnvue，在HBuilderX1.9.10+版本中自帶的hello uni-app - API - 界面 - 原生子窗體中也有示例。

包括防盜播的跑馬燈也可以這么做。

三方示例模板

這個(gè)是插件市場(chǎng)里三方開(kāi)發(fā)者做的直播業(yè)務(wù)模板，開(kāi)源，可以參考：http://ext.dcloud.net.cn/plugin?id=226

還有一些開(kāi)發(fā)者封裝了三方原生sdk，比如騰訊直播sdk，可以在插件市場(chǎng)獲取

上一篇：蘋(píng)果審核注意問(wèn)題

下一篇：Linux下壓縮文件或文件夾為zip文件方法

返回列表

无码人妻精一区二区三区,eeuss影院www在线观看,无码精品久久久久久人妻中字,日韩av高清在线看片

13530005652

引言

代碼示例-推流上傳（live-pusher）

代碼示例-使用視頻播放控件播放直播視頻流

三方示例模板