vue中使用rtmp流实现视屏监控、在线直播

最新推荐文章于 2024-09-27 17:17:29 发布

維他命～

最新推荐文章于 2024-09-27 17:17:29 发布

阅读量3.5k

点赞数 1

分类专栏： vue 视频监控文章标签： vue web

本文链接：https://blog.csdn.net/weixin_45118394/article/details/109307961

版权

本文介绍如何在Vue项目中利用RTMP流实现视频监控和在线直播功能。提供了一个简洁版DEMO和项目实战版代码示例，强调需要注意RTMP流的后台内存泄漏问题，以及使用Flash插件可能带来的延迟。建议开发者关注视频流延迟和前端样式自定义。

摘要由CSDN通过智能技术生成

干货前端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() {
   
    this.videoTimer(