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与弹幕配合使用，点击进入查看
本博客为原厂加工生产，转载请注明出处，谢谢