vue3使用flv.js播放flv直播流的代碼示例
目前有個(gè)需求是:管理直播機(jī)有一個(gè)列表需要查看每個(gè)直播機(jī)的實(shí)時(shí)內(nèi)容,所以需要在后臺加這個(gè)功能。
效果:我用ffmpeg模擬推流:
如何用ffmpeg模擬推流請看我上一篇文章
網(wǎng)頁:
如上是可以正確再網(wǎng)頁端拉流,這個(gè)功能費(fèi)了一天的時(shí)間,在這里免費(fèi)分享出來。
首先安裝flv.js(用npm的話我遇到過報(bào)錯(cuò)):
pnpm i flv.js
頁面核心代碼:
html:
<video ref="videoElementRef" controls autoplay muted style="width: 400px; height: 300px; object-fit: fill"></video>
js:
import { computed, ref, nextTick, watch } from 'vue'; const formValue = ref(newState(null)); const flvPlayer = ref<flvjs.Player | null>(null); const videoElementRef = ref<HTMLVideoElement | null>(null); // 明確類型 const createVideo = async () => { if (flvjs.isSupported()) { if (!videoElementRef.value) { console.warn('videoElementRef.value is null, retrying...'); return; // 如果 video 元素還未準(zhǔn)備好,則直接返回 } console.log('videoElement', videoElementRef.value); flvPlayer.value = flvjs.createPlayer({ type: 'flv', // 只支持flv和mp4 url: 'http://live.xxx.com/xxx/2.flv', //你的url地址 isLive: true, hasAudio: true, }); console.log('flvPlayer.value', flvPlayer.value); flvPlayer.value.attachMediaElement(videoElementRef.value); flvPlayer.value.load(); flvPlayer.value.play(); //處理視頻播放錯(cuò)誤的語法 flvPlayer.value.on('error', () => { message.error(`視頻加載失敗,請稍候重試!`); return false; }); } }; // 監(jiān)聽 formValue 的變化,當(dāng)數(shù)據(jù)加載完成后初始化視頻 watch( () => formValue.value, (newFormValue) => { if (newFormValue && showModal.value) { nextTick(() => { createVideo(); }); } }, { deep: true, immediate: false } // 深度監(jiān)聽,并且初始不執(zhí)行 ); ?
頁面關(guān)閉時(shí)銷毀flvPlayer:
//銷毀播放器
if (flvPlayer.value) { flvPlayer.value.pause(); flvPlayer.value.unload(); flvPlayer.value.detachMediaElement(); flvPlayer.value.destroy(); flvPlayer.value = null; }
總結(jié)
到此這篇關(guān)于vue3使用flv.js播放flv直播流的文章就介紹到這了,更多相關(guān)vue3 flv.js播放flv直播流內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue項(xiàng)目中如何調(diào)用多個(gè)不同的ip接口
這篇文章主要介紹了vue項(xiàng)目中如何調(diào)用多個(gè)不同的ip接口,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08vue主動(dòng)刷新頁面及列表數(shù)據(jù)刪除后的刷新實(shí)例
今天小編就為大家分享一篇vue主動(dòng)刷新頁面及列表數(shù)據(jù)刪除后的刷新實(shí)例,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue+elementUI實(shí)現(xiàn)簡單日歷功能
這篇文章主要為大家詳細(xì)介紹了vue+elementUI實(shí)現(xiàn)簡單日歷功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09Vue3實(shí)現(xiàn)動(dòng)態(tài)路由與手動(dòng)導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了如何在?Vue?3?中實(shí)現(xiàn)動(dòng)態(tài)路由注冊和手動(dòng)導(dǎo)航,確保用戶訪問的頁面與權(quán)限對應(yīng),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12Vue項(xiàng)目如何設(shè)置反向代理和cookie設(shè)置問題
這篇文章主要介紹了Vue項(xiàng)目如何設(shè)置反向代理和cookie設(shè)置問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04el-date-picker如何篩選時(shí)間日期選擇范圍
這篇文章主要介紹了el-date-picker篩選時(shí)間日期選擇范圍,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-12-12vue2與vue3中生命周期執(zhí)行順序的區(qū)別說明
這篇文章主要介紹了vue2與vue3中生命周期執(zhí)行順序的區(qū)別說明,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06淺談vue的props,data,computed變化對組件更新的影響
本篇文章主要介紹了淺談vue的props,data,computed變化對組件更新的影響,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01