2分鐘實(shí)現(xiàn)一個(gè)Vue實(shí)時(shí)直播系統(tǒng)的示例代碼
前言
我們?cè)诓磺么a的時(shí)候可能會(huì)去看游戲直播，那么是前臺(tái)怎么實(shí)現(xiàn)的呢？下面我們來(lái)講一下。
第一步，購(gòu)買(mǎi)云直播服務(wù)
首先，你必須去阿里云或者騰訊云注冊(cè)一個(gè)直播服務(wù)。也花不了幾個(gè)錢(qián)，練手的話，幾十塊錢(qián)就夠了。
這里我拿阿里云舉例，購(gòu)買(mǎi)完了，配置好推流域名跟播流域名，下面我們將進(jìn)行地址生成。記住下面生成的地址，下面會(huì)用到。
第二步，下載本地推流工具
第三步，設(shè)置OBS
在第一步中圖片底部有推流地址，需要注意，分為兩部分填入下方圖所示。
在AppName字段 為分界線分為兩部分。輸入完畢，點(diǎn)擊確定，就好了。
第四步，開(kāi)啟推流
在OBS右方有個(gè)開(kāi)啟推流工具，第一次點(diǎn)開(kāi)你會(huì)覺(jué)得黑屏，那是你沒(méi)有
選擇直播畫(huà)面，在來(lái)源選項(xiàng)中，點(diǎn)擊加號(hào)，選擇對(duì)應(yīng)來(lái)源，我這里選擇的是顯示器捕獲。
第五步，寫(xiě)代碼
安裝hls.js
npm i hls.js -S
安裝dplayer，你可以進(jìn)入官網(wǎng)，配置更加豐富的api。
npm i dplayer -S
<!-- 現(xiàn)場(chǎng)課堂 -->
<template>
<div class="center">
<div class="live">
<div id="dplayer"></div>
</div>
</div>
</template>
<script>
/*
我這里使用的是m3u8流，你們也可以選擇其他方式，dplayer官網(wǎng)都有詳細(xì)介紹。
*/
let Hls = require('hls.js');
import DPlayer from 'dplayer';
export default {
name: "Live",
methods: {
// 直播
live(){
const dp = new DPlayer({
live:true,
container: document.getElementById('dplayer'),
video: {
url: 'https://live.carvedu.com/a/b.m3u8?auth_key=1589281526-0-0-02d0913b6a725efdb53f0deed823e418', // 示例地址
type: 'customHls',
customType: {
customHls: function (video, player) {
const hls = new Hls();
hls.loadSource(video.src);
hls.attachMedia(video);
},
},
},
});
}
},
mounted() {
this.live();
},
};
</script>
<style scoped>
#dplayer{
width: 100%;
height: 500px;
}
</style>
結(jié)語(yǔ)
以下為效果圖：
到此這篇關(guān)于2分鐘實(shí)現(xiàn)一個(gè)Vue實(shí)時(shí)直播系統(tǒng)的示例代碼的文章就介紹到這了,更多相關(guān)Vue實(shí)時(shí)直播系統(tǒng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue中的項(xiàng)目打包及部署全流程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue-iview動(dòng)態(tài)新增和刪除的方法
這篇文章主要為大家詳細(xì)介紹了vue-iview動(dòng)態(tài)新增和刪除的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全選、反選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Vue 3開(kāi)發(fā)中VueUse強(qiáng)大Hooks庫(kù)
VueUse提供了一個(gè)豐富且強(qiáng)大的Hooks庫(kù),可以幫助開(kāi)發(fā)者快速實(shí)現(xiàn)各種功能,提高開(kāi)發(fā)效率,本文來(lái)詳細(xì)的介紹一下,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-08-08
Vue實(shí)現(xiàn)兩個(gè)列表之間的數(shù)據(jù)聯(lián)動(dòng)的代碼示例
在Vue.js應(yīng)用開(kāi)發(fā)中,列表數(shù)據(jù)的聯(lián)動(dòng)是一個(gè)常見(jiàn)的需求,這種聯(lián)動(dòng)可以用于多種場(chǎng)景,例如過(guò)濾篩選、關(guān)聯(lián)選擇等,本文將詳細(xì)介紹如何在Vue項(xiàng)目中實(shí)現(xiàn)兩個(gè)列表之間的數(shù)據(jù)聯(lián)動(dòng),并通過(guò)多個(gè)具體的代碼示例來(lái)幫助讀者理解其實(shí)現(xiàn)過(guò)程,需要的朋友可以參考下2024-10-10
插槽（Slot）是Vue.js中一個(gè)非常重要的概念,它極大地提高了組件的復(fù)用性和靈活性,通過(guò)插槽,我們可以自定義組件的內(nèi)容,使其能夠適應(yīng)不同的場(chǎng)景,本文將結(jié)合實(shí)際案例,詳細(xì)介紹Vue中插槽的基本用法、類(lèi)型以及高級(jí)技巧,需要的朋友可以參考下2024-11-11
這篇文章主要為大家詳細(xì)介紹了Vue如何將頁(yè)面導(dǎo)出成PDF文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
vue-cli3項(xiàng)目升級(jí)到vue-cli4 的方法總結(jié)
這篇文章主要介紹了vue-cli3項(xiàng)目升級(jí)到vue-cli4 的方法總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了Vue 事件處理操作,結(jié)合實(shí)例形式較為詳細(xì)的分析了vue.js事件處理相關(guān)的事件監(jiān)聽(tīng)、處理、修飾符等相關(guān)概念、用法及操作注意事項(xiàng),需要的朋友可以參考下2019-03-03
vue中獲取滾動(dòng)table的可視頁(yè)面寬度調(diào)整表頭與列對(duì)齊(每列寬度不都相同)
這篇文章主要介紹了vue中獲取滾動(dòng)table的可視頁(yè)面寬度，調(diào)整表頭與列對(duì)齊(每列寬度不都相同),需要的朋友可以參考下2019-08-08