內(nèi)容簡(jiǎn)介
采用uni-app中的renderjs 引入?？礖5 SDK
后端接入?？稻C合安防平臺(tái)的開(kāi)放API獲取預(yù)覽流
?？礖5 SDK 下載地址
接入原因
因在移動(dòng)端接入不管是hls flv rtsp rtmp流的播放穩(wěn)定性和速度均很慢，特采用ws直連流來(lái)播放，效率很穩(wěn)定性均顯著提高。因采用前者流可以直接使用原生的播放組件，所以會(huì)比較便捷不用進(jìn)行封裝。后者ws流需要引入專用開(kāi)發(fā)包。
?？倒倬W(wǎng)也提供了其它的SDK比如直連攝像頭的，但是需要映射多個(gè)攝像頭或者單獨(dú)的硬盤錄像機(jī)，接入方式也是采用renderjs的辦法接入。而我們采購(gòu)了安防平臺(tái)提供了開(kāi)放API所以采用接口的形式獲取。
準(zhǔn)備工作
下載開(kāi)發(fā)包放置項(xiàng)目static目錄下
源碼如下
引入h5player.min.js 注意點(diǎn) src地址要采用相對(duì)路徑。
JS部分 此處代碼均在renderjs中 renderjs使用方法請(qǐng)研究官網(wǎng)示例或看掘金中這位大哥的用法 地址
mounted(){
if (typeof window.JSPlugin === 'function') {
this.intWindow();
} else {
const script = document.createElement('script')
script.src = 'static/HK/h5player.min.js' //h5player.min.js 相對(duì)路徑
script.onload = this.intWindow.bind(this)
document.head.appendChild(script)
};
},
methods：{
// 初始化播放窗口
intWindow(){
let that = this;
this.rPlay = new JSPlugin({
szId: "play_window", //需要英文字母開(kāi)頭 必填
szBasePath: "static/HK", // 必填,引用H5player.min.js的js相對(duì)路徑
oStyle: {
border: "none",
borderSelect: "none",
background: "#000",
}
});
},
// 接收邏輯層發(fā)送的播放地址
receiveUrl(newValue, oldValue, ownerVm, vm) {
let that = this
if(newValue.url){
let playUrl = newValue.url
that.rPlay.JS_Play(playUrl,{
playURL:playUrl,
}).then(
()=>{
that.$ownerInstance.callMethod('playStatus',{
type:"success",
msg:"播放成功"
})
},
(e)=>{
that.loading = false;
that.$ownerInstance.callMethod('playStatus',{
type:"error",
msg:e
})
}
)
}
}
}
Html代碼如下 因?yàn)槭菃为?dú)抽了的播放組件 所以播放地址是從外部傳遞過(guò)來(lái)的，故使用watch監(jiān)聽(tīng)一下，如果是在一個(gè)組件里面只用獲取到播放地址后直接給player中的url賦值即可
//此處js代碼均在邏輯層中
//播放窗口dom元素 高度 info:player 用來(lái)傳遞播放地址 stop:stopPlay 用來(lái)控制銷毀播放器 其它方法請(qǐng)自行封裝原理類似
<view id='play_window'
:style="{'height':height + 'px'}"
:info='player'
:stop='stopPlay'
:change:info='hk.receiveUrl'
:change:stop='hk.receiveStop'>
</view>
data() {
return {
//接收播放地址
player:{
url:""
},
//銷毀播放窗口狀態(tài)
stopPlay:false,
}
},
methods:{
playStatus(val){
if(val.type === 'success'){
console.log('播放成功');
}else{
console.log('播放失敗')
console.log(val.msg)
}
},
}
watch:{
playUrl(newValue,oldValue){
if(newValue){
this.loading = true;
this.player.url = newValue;
}
}
}
最終效果圖如下：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-505327.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-505327.html
到了這里，關(guān)于【Uni-app 引入?？礹5player并接入ws視頻流】的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
