使用vue-video-player实现监控设备实时视频播放（RTMP流）

一开始咱们就来聊聊一件很酷的事情：利用vue-video-player插件实现监控设备的rtmp直播流实时视频播放。这项技能对于开发者或是对监控系统有所兴趣的人来说堪称宝物，但对于很多初学者来说可能有些难度。

vue项目安装vue-video-player

这个插件安装是关键。2020年时，已有明确的操作指南。例如，在处理vue项目时，需执行npminstallvue-video-player--save指令。这并非随意输入，而是官方规定的正确安装步骤。插件相当于一个工具箱，内置了视频播放功能。若不按此方法安装，后续的视频播放工作将无法进行。正确安装后，我们才能在项目中运用其功能。否则，就如同盖楼无砖瓦。

装好这个插件是基础中的基础，一旦这一步出错，不管怎么努力都无济于事。不少新手在项目起步时都会在这里碰壁，因为这类指令稍有不慎就会出错。你是否有过因为安装不当而无法理解后续功能的困扰？

编写视频播放组件

接下来要编写视频播放的模块。得提供一个完整的示例。这相当于给用户提供了一个模板。父模块调用时，只需按照规定设置videoSrc和playerOptions的sources[0].src，视频就能正常播放。这里要特别注意样式部分。如果项目中使用了lang=scss，但本项目中并未使用，就需要修改样式。就像我们穿衣服，如果尺码不对就得调整。这部分要小心处理，以免出现错误。比如在某个公司的监控系统项目中，就有成员因为没调整好样式，导致视频播放组件一直出错，浪费了很多时间。

这部分就像是构建视频播放的基础结构，一旦这个结构出了问题，播放出来的效果自然会受到影响。在做前端项目的时候，你有没有遇到过因为组件编写的小错误而导致大问题的经历？

父组件调用视频播放组件

父组件的调用至关重要。这好比指挥家引导乐队，确保各部分默契配合。在此过程中，只需点击“播放视频”，便能替换组件中的视频流地址，实时观看视频。设想在商场监控中心等大型监控场景，工作人员便是如此操作来监控实时画面。这一操作的准确性直接影响到能否准确观看视频。若操作失误或地址替换顺序出错，便无法看到期望的实时视频。曾有一城市交通监控系统在测试时，因该环节操作失误，导致长时间无法查看某些路段的实时交通状况。

在使用过程中，能否顺畅地使用组件，就好比是开启大门的钥匙。若不能找到那把合适的钥匙，便无法一睹门后风光。你在尝试操作前端组件调用时，是否遇到过类似的难题？

// vue.config.js
const path = require('path')
const webpack = require('webpack')
 

module.exports = {
 baseUrl: process.env.NODE_ENV === 'production' ? '/bcmp-web/' : '/',
 outputDir: process.env.NODE_ENV === 'production' ? 'bcmp-web' : 'dist',
 lintOnSave: true,
 productionSourceMap: false,
 
 devServer: {
  open: true,
  host: '0.0.0.0',
  port: 9005,
  https: false,
  hotOnly: false,
  proxy: null
 },
 configureWebpack: {
  plugins: [
   new webpack.ProvidePlugin({
    jQuery: 'jquery',
    $: 'jquery',
    'windows.jQuery': 'jquery'
   })
  ]
 },
 chainWebpack: config => {
  config.module
   .rule('swf')
   .test(/\.swf$/)
   .use('url-loader')
   .loader('url-loader')
   .options({
    limit: 10000
   })
 },
 
 pluginOptions: {
  'style-resources-loader': {
   preProcessor: 'scss',
   patterns: [
    path.resolve(__dirname, './src/assets/baseStyle/var.scss'),
    path.resolve(__dirname, './src/assets/baseStyle/mixin.scss')
   ]
  }
 }
}

vue.config.js文件里的操作

关于vue.config.js文件，需要添加chainwebpack的配置。这相当于为视频播放系统添加了特定设置。以2020年8月为例，当时vue-video-player的版本是5.0.2，且经过测试是可用的。不同版本在这个配置上可能存在细微差别。因此，开发者需要持续关注版本变化。就好比不同型号的手机充电接口各不相同。在某个监控项目的开发中，由于未重视对应版本的配置，导致视频播放持续处于加载状态，无法正常显示。

在整个播放过程中，这种配置相当于一条潜规则。若不遵循，便会引发各种难以解释的错误。你听说过因版本与配置不匹配而引发项目问题的案例吗？

补充知识视频监控前端发展

现在得聊聊补充的知识点。在智慧城市快速发展的今天，尤其是2020年左右，将视频监控接入网络平台变得既普遍又关键。当video在处理RTMP或RTSP协议的视频流时显得力不从心，就需要其他播放器来帮忙。这里得提一下LivePlayer。这是由一家视频公司开发的一款免费播放器。它就像是一个及时的救星。比如，在那些新兴的物联网安防监控项目中，人们就会用这个播放器来填补video的不足。

这些额外的知识如同备用武器，说不定何时就能派上用场。你是否曾探寻过那些虽小众却实用的播放器？

播放器相关的步骤操作

关于LivePlayer播放器的操作步骤，我最后来说明一下。首先，得进行安装，需要运行npminstall@liveqing/liveplayer和npmi-Dcopy-webpack-plugin这两个命令。接下来是引入环节，在webpack.dev.conf.js文件里要引入并声明插件，并在同一文件夹的plugins子目录中声明newCopyWebpackPlugin插件，同时还要在index.html文件中引入相应的js路径。这一系列动作必须准确无误，否则就像迷路一样，一旦走错，可能就回不去了。在实际项目搭建中，若这些步骤执行不当，就无法正确引入播放器，进而影响整个视频播放系统的运作。

每一步都很重要，缺少其中任何一部分都如同锁链断裂。关于这类播放器的使用，你认为最容易出现问题的地方在哪里？欢迎在评论区留下你的看法。同时，别忘了点赞和转发这篇文章！

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/'}
])]

有智慧工地的问题可以咨询蘇小鱼