vue项目使用大华摄像头怎样初始化_Vue接入监控视频技术总结

最近一直在搞监控视频接入方面的事情,积累了不少的经验,这里总结一下。提前说一句,本文提到的视频接入均是以RTSP为基础转码而来的,至于用海康大华等插件播放的咱们就闭口不提了可以看这个文章,在vue中接入ocx控件播放监控视频。

现在监控视频在前端的播放主要有如下三种方式:

RTSP视频流播放

RTMP视频流播放

HLS视频流播放

RTSP

咱们一种一种的说,首先是RTSP这种其实和海康插件是一样的,需要VLC插件的支持,所以也是要用老版本的浏览器才可以使用。其实刚接触的时候查到了一个js包vxg-video可以前端在线播放RTSP,但是接入的效果差强人意,虽然能播放但是延迟太高,遂放弃,感兴趣的可以自己了解一下。

RTMP

然后是RTMP视频流,这里放一个链接,感兴趣的可以自己了解它和RTSP有什么区别。

简单来说呢,就是RTMP是Adobe维护的,没开源,而RTSP和HTTP一样都是开源的。所以呢,要在前端播放RTMP视频就必须得使用flash插件,看主流浏览器对flash的态度,只能说且用且珍惜吧。

现在在前端播放RTMP主要有三种方案,videojs,jwplayer,ckplayer。先说接入效果吧,ckplayer和videojs成功了,jwplayer虽然失败了,但是在这里也谈一下吧,记录下失败的地点,等日后有实力了再试试能不能成功。

流行的不得了的videojs

当初要做RTMP播放的时候我第一个想到的就是videojs,毕竟这个太流行了,也有大神给vue封装了videojs,名字叫做vue-video-player,这两者我都尝试了,很尴尬的是,引入原生videojs成功了,但是使用vue-video-player却失败了,可能是后者的作者大大很久没维护的原因了吧,下面先贴一下videojs播放的源码

class="video-js

vjs-default-skin

vjs-big-play-centered"

preload="auto"

width="500"

height="400"

data-setup='{ "html5" : { "nativeTextTracks" : false }}'>

/* 下载的包

"video.js": "^5.6.0",

"videojs-flash": "^2.2.0"

"videojs-swf": "^5.4.2",

*/

import videojs from 'video.js'

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

import 'vue-video-player/src/custom-theme.css'

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: 'videojsTest',

mounted(){

this.player1 = videojs('my-player', this.VideoOptions, function onPlayerReady() {

videojs.log('播放器已经准备好了!')

this.on('play', function() {

console.log('开始/恢复播放')

})

this.on('pause', function() {

console.log('暂停播放')

})

this.on('ended', function() {

console.log('结束播放')

})

})

setTimeout(() => {

this.player1.player()

}, 1000)

},

data () {

return {

VideoOptions: {

autoplay: true, // 是否自动播放

muted: false, // 是否静音

controls: false,

fluid: true, // 宽高自适应

techOrder: ["flash"],

sources: [{

src: 'rtmp://192.168.100.205:10935/hls/stream_1',

type: 'rtmp'

}]

},

}

}

}

在引入的时候要注意 video.js 的版本,6.0以上的版本有可能会出现问题,如果不行的话建议切换 5.6.0 版本。

在引入的时候遇到了一个问题,这个看一下报错就清楚了,vue找不到swf文件的loader引起的,我使用vue-cli3搭建的项目,所以在vue.js.config里做了配置,如果你用的是webpack的话,在webpack.base.js里添加下就可以了,当然写法不一样,这里我都贴上了。

swf文件解析失败

vue.config.js

module.exports = {

// 选项...

chainWebpack: config => {

config.module

.rule('swf')

.test(/\.swf$/)

.use('url-loader')

.loader('url-loader')

.tap(options => {

return {

limit: 10000

}

})

}

}

webpack.base.js

module: {

rules: [

{

test: /\.swf$/,

loader: 'url-loader',

options: {

limit: 1024,

name: 'file/[path][name].[hash7].[ext]'

}

}

]

}

vue-video-player

然后是使用vue-video-player集成的代码,大佬集成的很好,写起来很舒服:

video-player(:options="playerOptions")

import { videoPlayer } from 'vue-video-player'

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

import 'videojs-flash'

export default {

data() {

return {

playerOptions: {

height: '360',

width: '500',

sources: [{

type: 'rtmp/mp4',

src: 'rtmp://192.168.100.205:10935/hls/stream_1'

}],

techOrder: ['flash'],

autoplay: true,

controls: true,

},

}

},

components: { videoPlayer },

methods: { },

}

但是测试的时候出问题了,很难受,一直在报The "flash" tech is undefined错误,试过很多方法,什么用cnpm代替npm下载啊、给videojs-flash添加file loader啊,无论怎么尝试都不行。如果有大佬知道请一定要教教我。

vue-video-player集成失败

CkPlayer

然后就是Ckplayer的接入,这个算是比较简单的,因为ckplayer是静态的第三方依赖。所以我们要把他放在public(vue-cli3)或者static(vue-cli2)文件夹下,然后在index.html里引入,注意,这里要使用绝对路径引入,因为相对路径会被解析为非静态资源。

vue-project

网站未响应,请稍后再试。

引入之后就可以直接在组件里调用了:

.video

height 400px

width 800px

.video ckplayer将会挂载到该div上

export default {

data() { return { }},

mounted() {

var videoObject = {

container: '.video', //容器的ID或className

variable: 'player', //播放函数名称

live: true,

flashplayer: true,//如果强制使用flashplayer则设置成true

video: 'rtmp://192.168.100.205:1935/oflaDemo/hkvideo'//视频地址

}

// 定义一个对象

var player = new ckplayer(videoObject)

}

}

测试之后发现视频黑屏、控制台无报错、播放时间正常进行的问题

无报错但视频黑屏

经过搜索后解决了该问题,要先到ckplayer的源文件目录下打开ckplayer.js文件,然后修改bufferTime为0,playCorrect为true,如下:

function ckplayerConfig() {

return {

flashvars: {},//用来补充flashvars里的对象

languagePath: '',//语言包文件地址

stylePath: '',//风格包文件地址

config: {

...

bufferTime: 0,//缓存区的长度,单位:毫秒,不要小于10

...

playCorrect: true,//是否需要错误修正,这是针对rtmp的

...

}

}

}

然后就可以播放了,但是还有个小问题,就是点击播放之后视频依旧黑屏,要再次暂停后点继续才可以正常播放。这个问题暂时没找到原因,ckplayer播放easyNVR转出来的 rtmp 源就可以,播放ffmpeg转出的 rtmp 就有这个问题,而videojs播放哪种源都是没问题的。videojs牛批!

JwPlayer

jwplayer和ckplayer一样都属于静态的第三方依赖,但是迷一般的,现在网上关于接入jwplayer的文章几乎为零,在遇到错误之后找不到解决方法,随放弃。下面贴一下代码和报错,求有缘人解决:

.player

export default {

data() { return { }},

mounted() {

jwplayer('player').setup({

'flashplayer': 'player.swf',

'file': 'hkvideo',

'streamer': 'rtmp://39.96.37.119/oflaDemo',

'controlbar': 'bottom',

'width': '848',

'height': '360'

})

}

}

jwplayer 报错信息

HLS

HLS是苹果公司提出的一种视频流类型,所以苹果的设备对它有原生支持,不过其他的浏览器也可以通过js包的形式进行播放,和rtmp相比,hls最大的坏处就是延迟高,rtmp基本可以控制在1秒内播放,而hls基本都是5-6秒开外。而且RTMP是基于TCP协议,播放更加的稳定。

我这里接入HLS也是用的vue-video-player,下面贴一下源码,我把它封装成了一个公共组件,只接受一个hls的播放地址src,调用时把播放地址传递进来就可以播放了,因为没有打印什么log,所以播放成功的页面就不截图了

.size

width 900px

video-player.size.video-player.vjs-custom-skin(ref="videoPlayer"

:playsinline="true"

:options="playerOptions")

import videojs from 'video.js'

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

import 'vue-video-player/src/custom-theme.css'

import 'videojs-contrib-hls'

import { videoPlayer } from 'vue-video-player'

export default {

name: 'IVideoPlayer',

data() { return { }},

props: {

src: String

},

components: { videoPlayer },

computed: {

playerOptions() {

return {

autoplay: true,

muted: false,

loop: false,

preload: 'auto',

language: 'zh-CN',

aspectRatio: '16:9',

fluid: true,

sources: [{

type: "application/x-mpegURL",

src: this.src

}],

width: document.documentElement.clientWidth,

notSupportedMessage: ' ',//'此视频暂无法播放,请稍后再试',

}

}

}

}

总结

最后总结一下,虽然海康插件和RTSP的形式可以播放,但是受浏览器限制的影响,最后是肯定需要放弃的,而RTMP播放质量高效果好,可以说是当下最值得应用的监控视频接入技术了,当然了,需要flash也确实要考虑进来,这个接入方案在未来估计也会逐渐的降温,然后是hls方案,这个对移动端的适配挺好,安卓和苹果的浏览器都提供了原生支持,所以移动端开发应该优先考虑这个方案。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/504148.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python 实现显著性检测_强!汽车车道视频检测:python+OpenCV为主实现

1 说明:1.1 完整版:汽车车道动态视频检测讲解和注释版代码,小白秒懂。1.2 pythonOpenCVmoviepynumpy为主的技术要点。1.3 代码来源:https://github.com/linghugoogle/CarND-Advanced-Lane-Lines #虽然感觉也是fork别人的&#xff…

var和function谁先优先执行_变量var声明和函数function声明优先级

变量声明优先级使用var关键字和function关键字声明的变量,会被JS的解释器优先解析执行,具有优先级使用var关键字声明变量1. 看代码说话// 在script中直接打印输出变量aconsole.log(a); // Uncaught ReferenceError: a is not defined2. 看代码说话consol…

python的变量名有哪些_【python字符串做变量名的方法有哪些?这些方法对python应用很重要】- 环球网校...

【摘要】python的功能都是建立在代码之上的,不过你知道python字符串做变量名的方法有哪些?这些方法对python应用很重要,如果你想学好python,那么本文内容一定要自己试试,毕竟实践出真知,那么python字符串做变量名的方…

如何学习c语言 零基础20天学会C语言

C语言开发 学习C语言不是一朝一夕的事情,但也不需要花费十年时间才能精通。如何以最小的代价学习并精通C语言是本文的主题。请注意,即使是“最小的代价”,也绝不是什么捷径,而是以最短的时间取得最多的收获,同时也意味…

钟平逻辑英语语法_逻辑英语-钟平笔记.pdf

英语主干定位:(状1 )主 (定1)谓 (状2 )( 宾 )(定 2 、状 1 )中文主干定位:(状1 、定 1)主 (状2 )谓 (定2 )( 宾 )(状 1 )主语:句首的独立名词性结构谓语:排除过程首先排除从句中和介词短语中动词宾语:谓语后的独立名词…

python爬虫分析_Python爬虫解析网页的4种方式

文章目录 爬虫的价值 正则表达式 requests-html BeautifulSoup lxml的XPath 爬虫的价值 常见的数据获取方式就三种:自有数据、购买数据、爬取数据。用Python写爬虫工具在现在是一种司空见惯的事情,每个人都希望能够写一段程序去互联网上扒一点资料下来&a…

学习C/C++的简单方法

如何学习C呢。C和C是很多专业的必修课,尤其对计算机专业来说,更是重中之重。C语言是早期发展的高级语言,具备执行速度快,语法优美等特点。是底层高效率系统的首选开发语言。今天就和大家分享一下怎么学好C/C语言吧 _ 怎么学好C、…

python3环境运行python2代码_使用Anaconda实现Python2和Python3共存及相互转换

前言 初学Python时,总是被python的两个不太兼容的版本搞得头昏脑胀。按目前的发展趋势,python未来的主流版为python3。但是我们经常会遇到一些很有意思代码使用的是python2版本。于是我们需要同时拥有python2和python3的运行环境。这里介绍一个强大的软件…

python中用于标识字符串的定界符_001.python-基础-Template的字符串格式化

Template是Python string模板中定义的一种字符串类型。用途:用于字符串替换操作。默认的定界符:$。# -*- coding: utf-8 -*-from string import Template# # 在python中Template可以将字符串的格式固定下来,重复利用。# Template属于string中…

零基础自学编程应读书籍

如果你是一个程序员,除了编码之外,你还需要大量的阅读。书籍是知识和智慧的重要来源。但不幸的是,现在很多人已经不愿意看书了。程序员更是罕见地会去读书,最常见的是依靠互联网搜索结果来找寻答案。  技术向前的步伐比人类历史上…

chromecast投屏_利用谷歌Chromecast,3个简单的步骤教你将手机投屏到电视上

无论是在线观看电影、视频通话、展示度假照片还是在电视上玩游戏,把你的安卓(Android)手机的屏幕内容投屏到电视机上都很简单。放过你的家人和朋友们吧,与其让他们挤在你的Android手机或平板电脑的小屏幕上前浏览照片或观看最新的疫情播报视频&#xff0…

python在线解题_20. 有效的括号-----leetcode刷题(python解题)

[TOC] 题目 给定一个只包括 (,),{,},[,] 的字符串,判断字符串是否有效。 有效字符串需满足: 左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭合。 注意空字符串可被认为是有效字符…

零基础学c语言如何开始

如果是想通过计算机等级考试 就买一本全国计算机等级考试二级试题认真做就可以了 当然也要加强上机实践。 怎样才能学好C语言 第一:C语言语法结构很简洁精妙,写出的程序也很高效,很便于描述算法,大多数的程序员愿意使用C语言去描述…

python数据预处理代码_Python中数据预处理(代码)

本篇文章给大家带来的内容是关于Python中数据预处理(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。1、导入标准库import numpy as np import matplotlib.pyplot as plt import pandas as pd 2、…

零基础想学好C语言编程,首先要掌握的是正确的学习思路!

如果新手要学习编程,一些前辈都会建议从Python、PHP、Java开始学。 不过,有些程序员是直接从C语言强势入门编程的。 那么,如何学习C语言呢?下面提供4种入门C语言的方法: 0、刷题 绝大多数的程序员学编程的时候,还…

java8 时间加一秒_Java8中对时间的处理

Java8中对时间的处理主要是LocalDate、LocalTime、LocalDateTime这几个类实现,直接看下面的测试代码,注释很详细。java8时间处理测试/*** java8时间处理测试* LocalDate、LocalTime、LocalDateTime* 说明:* * 创建人: LGQ * 创建时间: 2018年…

python创建数据库表_Python 操作数据库(1)SQL基础

一、数据库 关系型数据库 常见的关系型数据库:SQL Server、MySql、MariaDB、SQLite、ORACLE、PostgreSQL等 非关系型数据库 常见的非关系型数据看:MongoDB、HBASE、redis、CouchDB、Neo4j、Cassandra、memcached 非关系型数据库又分为:1. 文档…

C/C++初学者快速提升?

如今,软件开发行业继续向前大步迈进。信息技术越来越吃香,越来越多人学习学习c语言,那么如何系统有效的学习C语言?下面分享给大家的有效学习语言的方法,希望可以帮到你! 一、了解大纲,通览教材 想学好C语言最重要的一…

python以运行效率高著称吗_提升Python程序运行效率的6个方法

Python是一个很酷的语言,因为你可以在很短的时间内利用很少的代码做很多事情。不仅如此,它还能轻松地支持多任务,比如多进程等。Python批评者有时会说Python执行缓慢。本文将尝试介绍6个技巧,可加速你的Python应用程序。 1.让关键…

bytebuf池_图文分析ByteBuf是什么

ByteBuf是什么ByteBuf是Netty中非常重要的一个组件,他就像物流公司的运输工具:卡车,火车,甚至是飞机。而物流公司靠什么盈利,就是靠运输货物,可想而知ByteBuf在Netty中是多么的重要。没有了ByteBuf&#xf…