vue pc端實現 直播功能+彈幕

vue專案中實現直播功能同時具備彈幕和聊天室功能

一、vue中實現直播功能

1.首先，需要知道直播的常用協議，RTMP 和 HLS，我這邊採用的直播流為HLS。下面就是對播放選取，做過 H5 播放器的對與 video.js 並不陌生，實現的出發點也是在 video.js 上，預設大家都有 Vue 搭建和簡單運用能力了，這裡對video.js不做詳細介紹，ok下面來進行實現直播。先來看一下頁面的效果圖。

2.涉及到視訊顧名思義就需要播放器，這裡選用的是vue-video-player（底層還是依賴 video.js），上面圖中的測試直播流是cctv6。

(1)安裝依賴

npm install vue-video-player --save

(2)在main.js中引入

// vue-video-player
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
import 'videojs-contrib-hls' //單是 RTMP 的話不需要第三方庫，如果是 HLS 的話需要引入videojs-contrib-hls，看具體情況而定。
Vue.use(VideoPlayer);

(3)下面就可以在元件中直接去使用這個播放器了

<template>
<div class="player">
    <video-player class="video-player vjs-custom-skin"
                  ref="videoPlayer"
                  :playsinline="true"
                  :options="playerOptions"
                  @play="onPlayerPlay($event)"
                  @pause="onPlayerPause($event)"
            >
    </video-player>
</div>
</template>
<script>
export default {
name: 'Play',
data () {
return {
	playerOptions: {
          playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
          autoplay: true, //如果true,瀏覽器準備好時開始回放。
          muted: false, // 預設情況下將會消除任何音訊。
          loop: false, // 導致視訊一結束就重新開始。
          preload: 'auto', // 建議瀏覽器在<video>載入元素後是否應該開始下載視訊資料。auto瀏覽器選擇最佳行為,立即開始載入視訊（如果瀏覽器支援）
          language: 'zh-CN',
          aspectRatio: '16:9', // 將播放器置於流暢模式，並在計算播放器的動態大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數字（例如"16:9"或"4:3"）
          fluid: true, // 當true時，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應其容器。
          sources: [{
            withCredentials: false,
            type: "application/x-mpegURL", //播放型別，如果為rtmp配置為rtmp/mp4
            src: "http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8" //直播流地址
          }],
          poster: "poster.jpg", //你的封面地址
          width: document.documentElement.clientWidth,
          notSupportedMessage: '此視訊暫無法播放，請稍後再試', //允許覆蓋Video.js無法播放媒體源時顯示的預設資訊。
          controlBar: {
          	timeDivider: true,
          	durationDisplay: true,
          	remainingTimeDisplay: false,
          	fullscreenToggle: true //全屏按鈕
          	}
        },
 }
}

二、vue專案中直播功能新增彈幕

（1）vue能實現彈幕功能的外掛有很多（如：barrage，vue-baberrage），這裡我選用的是第二種官方幫助文件。由於專案需求是聊天內容飄彈幕，所以彈幕的實現需要配合websocket，這篇內容先不介紹聊天室的實現，這裡的介紹暫且按照官方提供的，只是簡單實現彈幕沒有融入到通訊功能裡，換句話說就是你發的彈幕只有你自己可見emmm，後面一篇文章中更新websocket，將彈幕融入到通訊。所以老套路還是先安裝：

npm i vue-baberrage

(2)在main,js中引入

//涉及到原始碼樣式要更改所以這裡靜態引入
import vueBaberrage from '../static/vue-baberrage'
Vue.use(vueBaberrage);

//不需要更改原始碼樣式的話
import { vueBaberrage } from 'vue-baberrage'
Vue.use(vueBaberrage);

(3)在元件中使用彈幕

Template
 <div class="danmu">
       <vue-baberrage
           :isShow= "barrageIsShow"
           :barrageList = "barrageList"
           :loop = "barrageLoop"
          >
       </vue-baberrage>
 </div>

Script
import { MESSAGE_TYPE } from 'vue-baberrage'

export default {
  name: 'app',
  data () {
    return {
      msg: 'Hello vue-baberrage',
      barrageIsShow: true,
      currentId : 0,
      barrageLoop: false,
      barrageList: []
    }
  },  
  methods:{
    addToList (){
      this.barrageList.push({
        id: ++this.currentId,
        avatar: "./static/avatar.jpg",
        msg: this.msg,
        time: 5,
        type: MESSAGE_TYPE.NORMAL
      });
  ...

引數說明
isShow
- Default: `true`
- Acceptable-Values: Boolean
- Function: This is the switch that if barrage is displayed.
barrageList
- Default: `[]`
- Acceptable-Values: Array
- Function: The is the container for managing the all barrage messages.
boxWidth
- Default: `parent's Width`
- Acceptable-Values: Number
- Function: Determine the width of the stage.
boxHeight
- Default: `window's Height`
- Acceptable-Values: Number
- Function: Determine the height of the stage.
messageHeight
- Default: `message's Height`
- Acceptable-Values: Number
- Function: Determine the height of the message.
maxWordCount
- Default: 60
- Acceptable-Values: Number
- Function: Determine the word count of the message.
loop
- Default: `false`
- Acceptable-Values: Boolean
- Function: Loop or not.
throttleGap
- Default: 2000
- Acceptable-Values: Number
- Function: The gap time between the message
Barrage Message Options
id
- Default: `null`
- Acceptable-Values: Number
- Function: For distinguish with other barrage messages.
avatar
- Default: `#`
- Acceptable-Values: String
- Function: Show the avatar of the barrage message.
msg
- Default: `null`
- Acceptable-Values: String
- Function: The content of the barrage message.
barrageStyle
- Default: `normal`
- Acceptable-Values: String
- Function: the css class name of the barrage message.
time
- Default: `10`
- Acceptable-Values: Number
- Function: How long does the barrage message show.(Seconds)
type
- Default: MESSAGE_TYPE.NORMAL
- Acceptable-Values: Symbol
- Function: The type of the barrage message. 
			MESSAGE_TYPE.NORMAL for scroll from right to left. 
			MESSAGE_TYPE.FROM_TOP for fixed on the top of the stage.

websocket與彈幕配合使用，點選進入檢視
本部落格為原廠加工生產，轉載請註明出處，謝謝