快捷導(dǎo)航

2分鐘實(shí)現(xiàn)一個(gè)Vue實(shí)時(shí)直播系統(tǒng)的示例代碼

更新時(shí)間：2020年06月05日 09:27:32 作者：Vam的金豆之路

這篇文章主要介紹了2分鐘實(shí)現(xiàn)一個(gè)Vue實(shí)時(shí)直播系統(tǒng)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

我們?cè)诓磺么a的時(shí)候可能會(huì)去看游戲直播，那么是前臺(tái)怎么實(shí)現(xiàn)的呢？下面我們來(lái)講一下。

第一步，購(gòu)買云直播服務(wù)

首先，你必須去阿里云或者騰訊云注冊(cè)一個(gè)直播服務(wù)。也花不了幾個(gè)錢，練手的話，幾十塊錢就夠了。

這里我拿阿里云舉例，購(gòu)買完了，配置好推流域名跟播流域名，下面我們將進(jìn)行地址生成。記住下面生成的地址，下面會(huì)用到。

第二步，下載本地推流工具

https://obsproject.com/

第三步，設(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: