前言

我們在不敲程式碼的時候可能會去看遊戲直播，那麼是前臺怎麼實現的呢？下面我們來講一下。

第一步，購買雲直播服務

首先，你必須去阿里雲或者騰訊雲註冊一個直播服務。也花不了幾個錢，練手的話，幾十塊錢就夠了。

這裡我拿阿里雲舉例，購買完了，配置好推流域名跟播流域名，下面我們將進行地址生成。記住下面生成的地址，下面會用到。

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

https://obsproject.com/

第三步，設定OBS

在第一步中圖片底部有推流地址，需要注意，分為兩部分填入下方圖所示。

在AppName欄位 為分界線分為兩部分。輸入完畢，點選確定，就好了。

第四步，開啟推流

在OBS右方有個開啟推流工具，第一次點開你會覺得黑屏，那是你沒有

第五步，寫程式碼

安裝hls.js

npm i hls.js -S

安裝dplayer，你可以進入官網，配置更加豐富的api。

npm i dplayer -S

<!-- 現場課堂 -->
<template>
 <div class="center">
  <div class="live">
   <div id="dplayer"></div>
  </div>
 </div>
</template>
<script>
/*
 我這裡使用的是m3u8流，你們也可以選擇其他方式，dplayer官網都有詳細介紹。
*/
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>

結語

以下為效果圖：

到此這篇關於2分鐘實現一個Vue實時直播系統的示例程式碼的文章就介紹到這了,更多相關Vue實時直播系統內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！