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方案，這個對移動端的適配挺好，安卓和蘋果的瀏覽器都提供了原生支持，所以移動端開發應該優先考慮這個方案。
總結
以上是生活随笔為你收集整理的vue项目使用大华摄像头怎样初始化_Vue接入监控视频技术总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： yii2 调用未定义函数_Python
- 下一篇： 【LeetCode笔记】208. 实现T