vue + typescript + video.js实现 流媒体播放 视频监控功能

作者:element 时间:2024-05-09 15:10:38 

视频才用流媒体,有后台实时返回数据, 要支持flash播放, 所以需安装对应的flash插件。当视频播放时,每间隔3秒向后台发送请求供检测心跳,表明在线收看状态,需要后台持续发送视频数据。

1. yarn add video.js videojs-flash

2. 创建videp.js声明文件 

vue + typescript + video.js实现 流媒体播放 视频监控功能 

3. 创建video_player.vue组件,供外部调用。源码如下


<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator';

import 'video.js/dist/video-js.css';

import _videojs from 'video.js';
const videojs = (window as any).videojs || _videojs;
import 'videojs-flash';

@Component({
name: 'video-player',
})
export default class VideoPlayer extends Vue {
/* ------------------------ INPUT & OUTPUT ------------------------ */
@Prop({ type: Object, default: () => {}}) private options!: object;

/* ------------------------ VUEX (vuex getter & vuex action) ------------------------ */

/* ------------------------ LIFECYCLE HOOKS (created & mounted & ...) ------------------------ */
private mounted() {
 this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
  // console.log('onPlayerReady');
 });
}

private beforeDestroy() {
 if (this.player) {
  this.player.dispose();
 }
}
/* ------------------------ COMPONENT STATE (data & computed & model) ------------------------ */
private player: any;

/* ------------------------ WATCH ------------------------ */

/* ------------------------ METHODS ------------------------ */
}

</script>

<template>
<div class="module_video_player">
<video ref="videoPlayer" class="video-js" autoplay></video>
</div>
</template>

<style lang="stylus" scoped>
@import '~@/assets/styles/var.styl';

.module_video_player
position relative
width 780px

</style>

4. 在需要使用的模块(如show_monitor.vue)调用。组件创建后,向后台发送轻轻获取rtmp视频播放地址,并更新videoOptions中的src。触发video_player的创建、挂载等。


import VideoPlayer from '@/components/video_player.vue';

components: {
VideoPlayer,
}

private videoOptions = {
 techOrder: ['flash', 'html5'],
 sourceOrder: true,
 flash: {
  hls: { withCredentials: false },
 },
 html5: { hls: { withCredentials: false } },
 sources: [{
  type: 'rtmp/flv',
  src: '', // 'rtmp://live.hkstv.hk.lxdns.com/live/hks2', // 香港卫视,可使用此地址测试
 }],
 autoplay: true,
 controls: true,
 width: '778',
 height: '638',
};
<video-player :options="videoOptions" v-if="videoOptions.sources[0].src !== ''"></video-player>

5. 心跳检测

在show_monitor.vue创建时,新建定时器,每隔3秒向后台发送一个包含当前监控设备id的请求,告知后台此设备监控被调用播放。show_monitor.vue销毁时,清空定时器,后台将停止传输视频数据。


private intervalFunc: any;

private created() {
// ****
this.intervalFunc = setInterval(() => {
 EquipmentService.monitor_continue_test(this.eqmtid);
}, 3000);
}

private destroyed() {
clearInterval(this.intervalFunc);
}

注: 可以再电脑安装VLC media player下载 , 播放获取到的rtmp路径,已检测数据获取是否成功

总结

以上所述是小编给大家介绍的vue + typescript + video.js实现 流媒体播放 视频监控功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

来源:https://segmentfault.com/a/1190000019678916

标签:vue,typescript,video.js
0
投稿

猜你喜欢

  • 对Python中一维向量和一维向量转置相乘的方法详解

    2022-01-24 12:44:14
  • 纯CSS下拉菜单代码

    2008-09-10 12:35:00
  • 亲自教你使用 ChatGPT 编写 SQL JOIN 查询示例

    2024-01-14 18:54:01
  • 微软建议的ASP性能优化28条守则(6)

    2008-02-29 11:43:00
  • 用python实现简单EXCEL数据统计的实例

    2021-12-30 09:59:01
  • 在Vue项目中取消ESLint代码检测的步骤讲解

    2024-05-29 22:23:03
  • python实现双人版坦克大战游戏

    2022-08-30 06:52:57
  • VuePress使用Algolia实现全文搜索

    2024-04-28 09:29:56
  • TensorFlow的自动求导原理分析

    2023-06-14 15:22:02
  • C# 如何调用python脚本

    2023-11-26 19:06:47
  • 基于Python制作一个文件解压缩工具

    2021-01-10 08:00:13
  • SQL Server Reporting Services 匿名登录的问题及解决方案

    2024-01-20 04:24:05
  • Python实现的txt文件去重功能示例

    2021-12-22 23:42:49
  • ROS  TF坐标变换基本概念及使用案例

    2022-02-01 10:25:35
  • 微信小程序之多文件下载的简单封装示例

    2023-10-19 21:10:06
  • NCCL深度学习Bootstrap网络连接建立源码解析

    2022-02-25 22:28:10
  • mysql常用函数汇总(分享)

    2024-01-29 03:30:56
  • 解决python大批量读写.doc文件的问题

    2023-11-05 03:20:02
  • Python实现合成多张图片到PDF格式

    2023-02-26 04:57:25
  • Python中的引用和拷贝实例解析

    2022-02-26 00:59:13
  • asp之家 网络编程 m.aspxhome.com