大屏如何通过flv视频流实时展示监控？

关于大屏视频监控有三种解决方案：

1.海康威视 优点：实时性强。多画面运行流畅，缺点：会覆盖在DOM最上方无法选中可能会导致样式挤压变形等样式问题

2.[flv视频流]+[nodeServer] 优点：可配置性强 缺点：服务端大流量稳定性不确定

3.rtsp视频流(默认带声音播放) 优点：插件稳定，可网页调试视频流； 缺点：需向后端发送rtsp地址 背景：项目需要在大屏中实时显示车间监控视频在不刷新页面要求画面同步不卡顿；

技术原理：Flv.js 是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。由 bilibili 网站开源。它的工作原理是将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，然后通过 Media Source Extensions 将 MP4 片段喂进浏览器。

实现方案：本文需要node服务端知识需要一定基础。flv优点是不需要安装插件服务端自配置灵活性更强；其他实现方案->海康威视实现方案请移步这篇文章--vue如何实时展示海康威视摄像头多画面？

安装 flv执行如下命令 yarn add flv.js 或 npm install flv.js

父组件：

<!--node搭建服务端 + vue通过FLV视频流解析-->
<template>
    <flvVideo :flv="flvList.camera1"></flvVideo>
 </template>

在父组件中引入flv预览视频组件

import flvVideo from "../flvideo.vue";
export default {
    name: "videoBox",
    components: {
        flvVideo
    },
    data() {
        return {
           flvList: {
                camera1: {
                    name: 'camera1',
                    url: 'rtsp://admin:123456@192.168.1.212:554/Streaming/Channels/201'
                },
                camera2: {
                    name: 'camera2',
                    url: 'rtsp://admin:123456@192.168.1.212:554/Streaming/Channels/101'
                },
                camera3: {
                    name: 'camera3',
                    url: 'rtsp://admin:123456@192.168.1.215:554/Streaming/Channels/201'
                },
                camera4: {
                    name: 'camera4',
                    url: 'rtsp://admin:123456@192.168.1.215:554/Streaming/Channels/101'
                },
                camera5: {
                    name: 'camera5',
                    url: 'rtsp://admin:123456@192.168.1.216:554/Streaming/Channels/201'
                },
                camera6: {
                    name: 'camera6',
                    url: 'rtsp://admin:123456@192.168.1.216:554/Streaming/Channels/101'
                }
            },
        }
    }，    
}

子组件：新建flvdideo.vue

<template>
    <div>
        <video :id="player" class="cameracommer"  muted autoplay
	  style="height: 100%; max-width: none"></video>
    </div>
</template>

<script>
import flvjs from "flv.js";

export default {
    name:"flvVideo",
    props:{
        flv:{
            type:Object || Array,
            required:true
        }
    },
    watch:{
        flv:{
            deep:true,
            immediate:true,
            handler(n,o){
                this.flvUrl = n.url;
                this.player = n.name;
            }
        },
    },
    data() {
        return {
            player: null,
            flvUrl:{},
        };
    },
    mounted() {
        setTimeout(() => {
        this.init();
        }, 1000);
    },
    methods: {
        init() {
            let videoElement = document.getElementById(this.player);
            // let rtspUrl = 'rtsp://admin:123456@192.168.1.212:554/Streaming/Channels/401';
            let rtspUrl = this.flvUrl;
            if (flvjs.isSupported()) {
                var flvPlayer = flvjs.createPlayer({
                    type: 'flv',					//媒体类型
                    // url: `ws://192.168.0.245:8888/rtsp/1/?url=${rtspUrl}`,//245服务器
                    url: `ws://192.168.3.116:8888/rtsp/1/?url=${rtspUrl}`,// YG本地--前端通过node搭建webSocketer视频解析服务--见下文
                    isLive: true,					//数据源是否为直播流
                    hasAudio: false,				//数据源是否包含有音频
                    hasVideo: true,					//数据源是否包含有视频
                    enableStashBuffer: false		//是否启用缓存区
                }, {
                    enableWorker: false, 			//不启用分离线程
                    enableStashBuffer: false, 		//关闭IO隐藏缓冲区
                    autoCleanupSourceBuffer: true 	//自动清除缓存
                });
                flvPlayer.attachMediaElement(videoElement);	//将播放实例注册到节点
                flvPlayer.load(); 					//加载数据流
                flvPlayer.play();					//播放数据流
            }
        }
    }
}
</script>
<style scoped lang="less">
 .cameracommer{
   width: 466px;
   height:287px;
 }
</style>

请看下一篇文章 通过node搭建webSockert视频解析流服务来搭建node服务端； 需要完全实现flv视频流实时展示监控，还差最后一步了。让我们一起来搭建node视频解析服务端。加油哦