基于vue项目 vue-video-player实现rtmp hls视频流播放

视频直播 在线监控——基于vue项目 vue-video-player实现rtmp hls视频流播放

问题背景

现在很多后台管理系统都会在项目中添加实时监控/实时直播的功能，最近刚好遇到项目需求，于是就分享一下经验以及在配置过程中出现的一些问题的 解决方案 。

引入

这里省去vue项目环境的搭建：

1. 安装vue-vide-player 和 videojs-flash 两个包

npm install vue-video-player videojs-flash --save

2. 安装完成后能在package.json里查看到版本号
   
3. 接下来就在需要的页面里去引入这两个包

注意 vue-video-player 必须在 videojs-flash 之前引入 ，否则在解析的时候会出现不可预知的错误，另外最好引入默认样式

import "video.js/dist/video-js.css";
import {
      videoPlayer } from "vue-video-player";
import "videojs-flash";

搭建页面

1. 页面写点基础样式，楼主采用的是 d2 admin这套框架样式，所以在外层嵌套的标签是 ,大家在写的时候，最外层就用template标签嵌套就行了；

**核心标签就是 videoPlayer，其他样式仅供参考 vjs-custom-skin videoPlayer这两个class是默认的样式 记得写上 。:options=“数据源” **

<template>
  <d2-container>
    <div class="video-container">
      <videoPlayer class="vjs-custom-skin videoPlayer" :options="playerOptions" width="70%"></videoPlayer>
    </div>
    <div class="video-detail">
      <el-card>
        <div class="title">xx大厦后侧消防通道</div>
        <div class="title">设备型号：某康SXC-3</div>
        <div class="title">人群密度：低</div>
        <div class="title">清晰度：高</div>
        <div class="title">设备状态：开启</div>
        <el-switch
          class="title"
          style="display: block"
          v-model="value2"
          active-color="#13ce66"
          inactive-color="#00adb5"
          active-text="信号源2"
          inactive-text="信号源1"
        ></el-switch>
      </el-card>
    </div>
  </d2-container>
</template>

配置视频流地址

1. 接下来在deta里面配置 视频流地址 ；
2. 注意！ 配置地址前可以先去下载一个vlc播放器（根据你的操作系统选择对应版本），放地址之前先在vlc播放器上测试一下视频是否有问题。避免不必要的麻烦
3. 安装完成后如下图所示
   
4. 接下来测试rtmp/rtsp/hls等视频流是否可用
   选择打开网络串流
5. 在地址中输入后台提供给你的视频流地址
   
   这里提供两个地址：
   韩国GOOD TV:rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp
   香港电视台：rtmp://live.hkstv.hk.lxdns.com/live/hks

7. 如果地址不通，去找后端，如果地址通了，那就可以在data里面配置数据了；
8. data配置如下:

     playerOptions: {
     
        height: "600",//播放器高度
        sources: [
          {
     
            type: "rtmp/mp4",//视频流协议，如果是hls，需要后端开启跨域
            // 内测地址
            src: "rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp"
          }
        ],
        techOrder: ["flash"],
        autoplay: true,//自动播放
        controls: true//编辑器控件
        //更多参数建议查看vue-video-player官网，这里只提供参考
      }

10.接下来导出该页面，并配置路由或者在其他页面以子组件方式引入（这里不多做说明）

export default {
     
  name: "Video",
  components: {
     
    videoPlayer
  },
  data(){
     
  //上一步的playerOptions数据写在这里
  }
  }

11. 最后一步npm run dev 就可以看到效果了！。
12. 

注意事项

1、后端提供的地址如果在vlc中测试没有问题，但在项目中引入后报错

request connection failed

如rtmp://192.168.142.70:1935/Vehicle
在项目中需要写成rtmp://192.168.142.70:1935/Vehicle/

2、如果本地局域网能实现，到真实项目上线时，需要在nginx上做nginx反向代理TCP,取RTMP流
否则也会出现request connection failed的错误

3、项目需要在服务器环境运行，本地直接访问浏览器是无效的！！！（重要的事情打三个感叹号）

4、其他问题可以在留言区讨论