干货 前端rtmp流 视屏监控 在线直播

老规矩先看图

• 简洁版（demo)

• 项目实战版(直播&监控）
  
  ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201027122151371.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTExODM5NA==,size_16,color_FFFFFF,t_70#pic_center

再直接干代码(推荐先把简洁版搞出来，提升信心，在撸项目）

• 这是项目中代码，里面接口因为项目奇葩需求进行特殊封装（下面有简洁版的）

 <div class="main-chart-container">
          <div class="main-top-title" style="margin-bottom:10px;padding-left:15px">
            <b>实时视频监控</b>
          </div>
          <section class="video-box">
            <div v-if="videoSrc===''" class="no-video">暂未播放视频</div>
            <video-player
              v-else
              class="video-player vjs-custom-skin"
              ref="videoPlayer"
              :playsinline="true"
              :options="playerOptions"
            ></video-player>
          </section>
        </div>

import videojs from "video.js";
import "video.js/dist/video-js.css";
import "vue-video-player/src/custom-theme.css";
import {
    videoPlayer } from "vue-video-player";
import "videojs-flash";
import SWF_URL from "videojs-swf/dist/video-js.swf";

videojs.options.flash.swf = SWF_URL; // 设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件


export default {
   
  name: "about",

  components: {
   
    videoPlayer,
  },
  created()