vue项目接入视频监控系列-------播放器的选择

在智慧城市发展迅速的今天，视频监控接入web平台的需求似乎成了不可或缺和潮流。博主准备对自己开发视频监控项目的经历做个记录，整理成一个系列的文章。

在前端发展迅速的今天，h5的出现让在web平台实现无插件播放似乎成了可能，但是video对于RTMP或者RTSP协议的视频流却无能为力，在这里向大家推荐一个播放器： LivePlayer，这是一家视频公司封装的一个播放器，可以免费使用：说明文档

（获取的播放地址为后端配置服务后调用接口获取的）

使用：

第一步：安装：

npm install @liveqing/liveplayer

npm i -D copy-webpack-plugin

第二步：引入：

在webpack.dev.conf.js中引入和声明插件：

const CopyWebpackPlugin = require('copy-webpack-plugin')

在该文件夹下plugins中声明插件new CopyWebpackPlugin

plugins: [

new CopyWebpackPlugin([

{ from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},

{ from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'},

{ from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'}

])]

第三步：

在index.html中引入：<script type="text/javascript" src="./js/liveplayer-lib.min.js"></script>

路径中的js为上面输出的js地址

第四步：

引入使用组件：

<template><div class="video"><el-button type="primary" size="mini" @click="getDeviceChanleData" icon="el-icon-search">选择通道</el-button><el-button type="primary" size="mini" @click="doStart" icon="el-icon-search">开始直播</el-button><live-player :videoUrl="videoUrl" fluent autoplay live stretch></live-player></div>
</template>
<script>
import LivePlayer from '@liveqing/liveplayer'
import {getDeviceList,getDeviceChanleList,start
} from './apis/index.js'
export default {data() {return {id: '',videoUrl: ''}},components: {LivePlayer},created() {this.getDeviceData()},methods: {// 获取设备数据列表getDeviceData() {const para = {start: 1,limit: 10,online: true,q: ''}var par = {params: para}getDeviceList(par).then(res => {console.log('设备数据', res)this.id = res.DeviceList[0].ID})},// 查询设备通道列表getDeviceChanleData() {const para = {serial: this.id}var par = {params: para}getDeviceChanleList(par).then(res => {console.log('设备通道数据', res)})},// 开始直播doStart() {const para = {serial: this.id}var par = {params: para}start(par).then(res => {console.log('开始直播', res)this.videoUrl = res.RTMP// this.videoUrl = res.HLS// this.videoUrl = res.FLV})}}
}
</script>
<style scoped>
.video{position: relative;width:500px;height:300px;
}
img{width:100%;height:100%;
}
.time1{position: absolute;top:13px;right:150px;
}
</style>

效果图：

vue项目接入视频监控系列-------播放器的选择相关推荐

手机影音第十一天，显示视频缓冲，显示卡顿时的网速，播放系统视频时调用播放器的选择...
代码已经托管到码云,有兴趣的小伙伴可以下载看看 https://git.oschina.net/joy_yuan/MobilePlayer 一.设置视频缓冲进度显示视频播放进度的效果图如下:灰色的是 ...
C# 视频监控系列（13）：H264播放器——控制播放和截图
C# 视频监控系列(13):H264播放器--控制播放和截图前言本该把这部分和上一篇合成一篇的,无奈挣扎半天,还是想对称起来,客户端3篇.服务器端3篇--所有播放器也勉强凑3篇吧(封装API的文章 ...
C# 视频监控系列（11）：H264播放器——封装API[HikPlayM4.dll]
前言当你认真的写完客户端和服务器端的时候可能不需要再继续往下看关于播放器的代码和说明,因为你已经掌握了如何转换VC++代码的技巧了,加上GOOGLE再来完成这个播放器应该算小菜了.但是作为我的系列, ...
vue2项目中如何接入视频监控
前言想必各位作为开发者的程序员,有时候公司会给你安排在项目中实现视频实时监控视频实时监控功能,在很多领域都广泛应用,能帮我们在各行各业都解决很多事情,像智慧工地中AI识别(安全帽.在离岗等).国标 ...
C# 视频监控系列（10）：服务器端——验证、设置画面质量、字幕叠加、板卡序列号...
C# 视频监控系列(10):服务器端--验证.设置画面质量.字幕叠加.板卡序列号豆豆网技术应用频道 2009年04月08日 [字号:小中大] 收藏本文被过滤广告关键字: NetB ...
C# 视频监控系列（9）：服务器端——数据捕获(抓图 + 录像)
前言录像功能是监控系统中最重要的功能之一,除了本文的功能实现外,还需要你自己考虑合适的存储策略:存储大小.时间段.存储盘符等. 注意本系列文章限于学习交流,注重过程,由于涉及公司,所以不提供源代码 ...
C# 视频监控系列（2）：客户端——封装API
前言本章主要是在C#封装的海康DVR客户端SDK 的代码上修改的,并参考<Hikvision 板卡网络开发包编程手册V4.7.pdf>补上更完整的注释,并且参照VC++源码做了小部分修改 ...
C# 视频监控系列(14)：总结贴——VC++代码转成C#小结
前言关键字:c++ to C# 原计划是再写一篇H264播放器转换AVI的文章才开始写总结的,至今未能成功,由于时间问题并且也暂时没有这个需求,所以决定从原计划中去掉这一章节直接进入总结贴,然后结束 ...
C# 视频监控系列(15)：总结贴——可能用到的C# WinForm技术小结
前言本章主要把可能用到的C# WinForm 功能性代码在这里汇总一下,以备实现其他功能来满足客户的其他需求,或者方便自己开发. 注意本系列文章限于学习交流,注重过程,由于涉及公司,所以不提供源代 ...

vue项目接入视频监控系列-------播放器的选择

vue项目接入视频监控系列-------播放器的选择相关推荐

最新文章

热门文章