vue监控视频，wvp-GB28181-pro实现

已于 2024-08-06 09:39:40 修改
阅读量258 收藏 4
点赞数 3
文章标签： vue.js 音视频 javascript
于 2024-07-02 16:12:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45856221/article/details/140128556
版权

先下载wvp-GB28181-pro项目

git clone https://gitee.com/pan648540858/wvp-GB28181-pro.git

多了解的话可以看以下该项目的gitee：https://gitee.com/pan648540858/wvp-GB28181-pro

后端有很多难点，具体要做的事情访问，连接：https://www.cnblogs.com/linjiaxin/p/17664391.html

将项目下载下来后，从项目中找到 jessibuca 文件夹，将其拷贝并复制到自己项目的 public 文件夹中，然后在index.html 文件中引入，看图 1、2、3

图1

图2

图3

当环境准备好后，就可以将封装好的 jessibuca 组件拷贝到自己的项目了

至于如何使用就看具体的需求了，如果按照 wvp-GB28181-pro 项目里的 live.vue 文件使用，展现出的效果如图2所示

图1

图2

但我做这个项目要求的样式不一样，如下图所示

代码

<template>
    <div class="app-container fixed-full-size">
        <div-backtop ref="pagescrollpart" style="padding:20px;flex:auto;width:100%">
            <!-- <div style="position: fixed;width: 100vw;height: 100vh;background-color: red;top: 1px;left: 1px;z-index: 999999;"></div> -->
            <div class="fu">
                <div class="monitor">
                    <div class="title">沈阳高华液化石油气有限公司</div>
                    <div class="layout-btn">
                        <svg-icon icon-class="split1" :class="['icon-img',selectIcon == 0?'icon-active':'']" @click="iconChange(0)"/>
                        <svg-icon icon-class="split4" :class="['icon-img',selectIcon == 1?'icon-active':'']" @click="iconChange(1)"/>
                        <svg-icon icon-class="split9" :class="['icon-img',selectIcon == 2?'icon-active':'']" @click="iconChange(2)"/>
                        <svg-icon icon-class="fs" class="icon-img hs" @click="iconChange(3)"/>
                        <!-- <img class="icon-img" v-for="(item,index) in icons" :key="index" :src="selectIcon == index?item.active:item.noActive" @click="iconChange(index)"/> -->
                    </div>
                    <div :class="['monitor-layout',fullScreen?'full-screen':'monitor-content']" ref="screen">
                        <!-- <div style="width: 99%;height: 85vh;display: flex;flex-wrap: wrap;background-color: #000;"> -->
                            <div v-for="i in spilt" :key="i" class="play-box":style="liveStyle" @click="openAdd(i)">
                                <div v-if="!videoUrl[i-1]" class="play-title" >点击添加视频监控画面</div>
                                <div v-else class="play-item">
                                    <player class="player" ref="player" :videoUrl="videoUrl[i-1]" fluent autoplay @screenshot="shot" @destroy="destroy"/>
                                    <div class="btn-list">
                                        <div class="icon-list">
                                            <div class="node">
                                                <img :src="qiye" />
                                                <span>沈阳市高华液化石油气有限公司</span>
                                            </div>
                                            <div class="node">
                                                <img :src="sxt" />
                                                <span>库房工作区001</span>
                                            </div>
                                        </div>
                                        <div class="function-list">
                                            <svg-icon v-show="soundState[i-1] == 'play'" icon-class="sound" @click="soundFun(i,'stop')"/>
                                            <svg-icon v-show="soundState[i-1] == 'stop'" icon-class="sound2" @click="soundFun(i,'play')"/>
                                            <svg-icon  icon-class="camera" @click="screenshot(i)"/>
                                            <svg-icon v-show="playState[i-1] == 'play'" icon-class="split1" @click="playChange(i,'stop')"/>
                                            <svg-icon v-show="playState[i-1] == 'stop'" icon-class="play" @click="playChange(i,'play')"/>
                                            <svg-icon icon-class="clos" @click.stop="closeFun(i)"/>
                                            <svg-icon icon-class="fs" @click="fullscreenSwich(i)"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <!-- </div> -->
                        <!-- <player ref="player" :videoUrl="videoUrl[i-1]" fluent autoplay @screenshot="shot"
                            @destroy="destroy"/> -->
                    </div>
                </div>
                <div class="warning-div">
                    <div class="real-time common">
                        <div class="row-one">
                            <div class="title real-time-title">实时警告</div>
                            <div class="jump">更多>></div>
                        </div>
                        <div class="for-item">
                            <div class="item-row-title">
                                <div class="title-element">
                                    <div class="number number-real-time">
                                        1
                                    </div>
                                    <div class="enterprise">
                                        沈阳高华液化石油气有限公司
                                    </div>
                                </div>
                                <div class="place">
                                    <img />
                                    <div>库房工作区</div>
                                </div>
                            </div>
                            <div class="item-row-info">
                                <div class=" frame frame-real-time">
                                    <img />
                                </div>
                                <div class="default">
                                    <div>
                                        警告时间：2023-12-12 13:00:00
                                    </div>
                                    <div>
                                        警告类型：二级警告
                                    </div>
                                </div>
                            </div>
                            <div class="warning-content">
                                告警内容：有车辆停留在库房工作区
                            </div>
                        </div>
                    </div>
                    <div class="history common">
                        <div class="row-one">
                            <div class="title title-history">历史警告</div>
                            <div class="jump">更多>></div>
                        </div>
                        <div class="for-item">
                            <div class="item-row-title">
                                <div class="title-element">
                                    <div class="number number-history">
                                        1
                                    </div>
                                    <div class="enterprise">
                                        沈阳高华液化石油气有限公司
                                    </div>
                                </div>
                                <div class="place">
                                    <img />
                                    <div>库房工作区</div>
                                </div>
                            </div>
                            <div class="item-row-info">
                                <div class="frame frame-history">
                                    <img />
                                </div>
                                <div class="default">
                                    <div>
                                        警告时间：2023-12-12 13:00:00
                                    </div>
                                    <div>
                                        警告类型：二级警告
                                    </div>
                                </div>
                            </div>
                            <div class="warning-content">
                                告警内容：有车辆停留在库房工作区
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div-backtop>
        <el-dialog v-dialogDrag title="添加监控画面" :visible.sync="isShow" :close-on-click-modal="false" width="800px" class="padding-col" append-to-body>
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
                <el-form-item label="视频通道" prop="videoChannel">
                    <el-input @keyup.enter.native="getList" v-model="queryParams.videoChannel" placeholder="请输入视频通道" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table v-loading="loading" :data="tableDataList" >
                <el-table-column type="index" width="55" />
                <el-table-column label="视频通道" align="center" prop="videoChannel" />
                <el-table-column label="操作" align="center" class-name="table-button" width="200">
                    <template slot-scope="scope" >
                        <el-button size="mini" icon="el-icon-edit" type="success" @click="selectFun(scope.row.url)"">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
                <div slot="footer" class="dialog-footer">
                <el-button @click="isShow=false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import player from '.././components/jessibuca.vue'
const fs = require('@/assets/images/monitor/fs.png');
const qiye = require('@/assets/images/monitor/qiye.png');
const sxt = require('@/assets/images/monitor/sxt.png');
export default{
    name:'realTimeMonitoring',
    components: {
        player
    },
    data(){
        return {
            //请求监控参数
            queryParams:{
                videoChannel:'',
                pageNum: 1,
                pageSize: 10,
            },
            //加载动画
            loading:false,
            //表格数据
            tableDataList:[
                {
                    videoChannel:'通道一',
                    url:"ws://192.168.2.142:80/rtp/34020000001320000002_34020000001320000002.live.flv", 
                },
                {
                    videoChannel:'通道二',
                    url:"ws://192.168.2.142:80/rtp/34020000001320000001_34020000001320000001.live.flv", 
                },
                {
                    videoChannel:'通道三',
                    url:"ws://192.168.2.142:80/rtp/34020000001320000003_34020000001320000003.live.flv", 
                },
                {
                    videoChannel:'通道一',
                    url:"ws://192.168.2.142:80/rtp/34020000001320000002_34020000001320000002.live.flv", 
                },
                {
                    videoChannel:'通道一',
                    url:"ws://192.168.2.142:80/rtp/34020000001320000002_34020000001320000002.live.flv", 
                },{
                    videoChannel:'通道一',
                    url:"ws://192.168.2.142:80/rtp/34020000001320000002_34020000001320000002.live.flv", 
                },{
                    videoChannel:'通道一',
                    url:"ws://192.168.2.142:80/rtp/34020000001320000002_34020000001320000002.live.flv", 
                },{
                    videoChannel:'通道一',
                    url:"ws://192.168.2.142:80/rtp/34020000001320000002_34020000001320000002.live.flv", 
                },{
                    videoChannel:'通道一',
                    url:"ws://192.168.2.142:80/rtp/34020000001320000002_34020000001320000002.live.flv", 
                },
                ,{
                    videoChannel:'通道一',
                    url:"ws://192.168.2.142:80/rtp/34020000001320000002_34020000001320000002.live.flv", 
                },
            ],
            //分页条数
            total:10,
            //弹框显示
            isShow:false,
            //视频地址
            videoUrl:[ 
                ''
                // "ws://192.168.2.136:80/rtp/34020000001320000002_34020000001320000002.live.flv"
            ],
            //被点击的视频索引
            clickIndex:null,
            // videoUrl:[],
            //企业和摄像头图标
            qiye:qiye,
            sxt:sxt,
            fs:fs,
            //是否全屏展示
            fullScreen:false,
            // 被点击的图标
            selectIcon:0,
            //显示多少屏幕
            spilt:1,
            playerIdx: 0,//激活播放器
            resizeObserver:null,
            //记录播放状态的数组
            playState:['play'],
            soundState:['stop'],
        }
    },
    mounted(){
        //监听屏幕变化
        this.resizeObserver = new ResizeObserver(entries => {
            //判断是否全屏
            if(
                document.fullscreenElement ||
                document.mozFullScreenElement ||
                document.webkitFullscreenElement ||
                document.msFullscreenElement
            ){
                //全屏
                // console.log('全屏了')
            }else{
                //全屏
                this.fullScreen=false;
            }
        });
        this.resizeObserver.observe(this.$el);
    },
    computed: {
        //显示屏数量改变的时候改变监控视频大小
        liveStyle() {
            let style = {width: '100%', height: '100%'}
            switch (this.spilt) {
                case 4:
                    style = {width: '49.7%', height: '49.7%'}
                break
                case 9:
                    style = {width: '32.9%', height: '32.9%'}
                break
            }
            this.$nextTick(() => {
                for (let i = 0; i < this.spilt; i++) {
                    const player = this.$refs.player
                    player && player[i] && player[i].updatePlayerDomSize()
                }
            })
            return style
        }
    },
    methods:{
        //请求列表
        getList(){
            this.loading=true
            docList(this.queryParams)
            .then(res=>{
                if(res.code == 200){
                    this.tableDataList = res.rows;
                    this.total=res.total;
                }
            })
            .catch(err=>{})
            .finally(()=>{this.loading=false;})
        },
        //重置
        resetQuery(){
            this.value=''
            this.queryParams={
                videoChannel:'',
                pageNum: 1,
                pageSize: 10,
            }
            this.getList();
        },
        //选择监控视频
        selectFun(url){
            this.videoUrl[this.clickIndex]=url;
            this.isShow=false;
        },
        //添加监控视频
        openAdd(i){
            console.log(i);
            if(this.videoUrl[i-1] == ''||this.videoUrl[i-1] == undefined){
                this.isShow=true;
                this.clickIndex=i-1;
            }
            
        },
        //布局图标点击
        iconChange(index){
            if(this.selectIcon == index)return
            switch(index){
                case 0:
                    this.spilt = 1;
                    this.selectIcon = index;
                    this.videoUrl=['']
                    this.playState=['play']
                    this.soundState=['stop']
                break;
                case 1:
                    this.spilt = 4;
                    this.selectIcon = index;
                    this.videoUrl=['','','','']
                    this.playState=['play','play','play','play']
                    this.soundState=['stop','stop','stop','stop']
                break;
                case 2:
                    this.spilt = 9;
                    this.selectIcon = index;
                    this.videoUrl=['','','','','','','','','']
                    this.playState=['play','play','play','play','play','play','play','play','play']
                    this.soundState=['stop','stop','stop','stop','stop','stop','stop','stop','stop']
                break;
                case 3:
                    //全屏时放大
                    var el = document.documentElement;
                    var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;      
                        if(typeof rfs != "undefined" && rfs) {
                            rfs.call(el);
                        };
                    this.fullScreen=true;
                    // return;
                break;
            }
        },
        //截图
        screenshot(i){
            this.$refs.player[i-1].screenshot()
        },
        //放大/缩放
        fullscreenSwich(i){
            this.$refs.player[i-1].fullscreenSwich()
        },
        //播放按钮点击事件
        playChange(i,v){
            let playState = JSON.parse(JSON.stringify(this.playState))
            playState[i-1]=v
            this.playState=JSON.parse(JSON.stringify(playState))
            v=='play'?this.$refs.player[i-1].playBtnClick():this.$refs.player[i-1].destroy()
        },
        //声音
        soundFun(i,v){
            console.log('vvv',v)
            let soundState = JSON.parse(JSON.stringify(this.soundState))
            soundState[i-1]=v
            this.soundState=JSON.parse(JSON.stringify(soundState))
            v=='stop'?this.$refs.player[i-1].mute():this.$refs.player[i-1].cancelMute()
        },
        //关闭
        closeFun(i){
            let videoUrl = JSON.parse(JSON.stringify(this.videoUrl))
            videoUrl[i-1]=''
            this.videoUrl = JSON.parse(JSON.stringify(videoUrl))
        },
        destroy(idx) {
            console.log(idx);
            this.clear(idx.substring(idx.length - 1))
        },
        clear(idx) {
            let dataStr = window.localStorage.getItem('playData') || '[]'
            let data = JSON.parse(dataStr);
            data[idx - 1] = null;
            console.log(data);
            window.localStorage.setItem('playData', JSON.stringify(data))
        },
        shot(e) {
            // console.log(e)
            // send({code:'image',data:e})
            var base64ToBlob = function (code) {
                let parts = code.split(';base64,');
                let contentType = parts[0].split(':')[1];
                let raw = window.atob(parts[1]);
                let rawLength = raw.length;
                let uInt8Array = new Uint8Array(rawLength);
                for (let i = 0; i < rawLength; ++i) {
                    uInt8Array[i] = raw.charCodeAt(i);
                }
                return new Blob([uInt8Array], {
                type: contentType
                });
            };
            let aLink = document.createElement('a');
            let blob = base64ToBlob(e); //new Blob([content]);
            let evt = document.createEvent("HTMLEvents");
            evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
            aLink.download = '截图';
            aLink.href = URL.createObjectURL(blob);
            aLink.click();
        },
    },
    watch: {
        spilt(newValue) {
            console.log("切换画幅;" + newValue)
            let that = this
            for (let i = 1; i <= newValue; i++) {
                console.log(!that.$refs['player' + i])
                if (!that.$refs['player' + i]) {
                    continue
                }
                this.$nextTick(() => {
                    if (that.$refs['player' + i] instanceof Array) {
                        that.$refs['player' + i][0].resize()
                    } else {
                        that.$refs['player' + i].resize()
                    }
                })

            }
            // window.localStorage.setItem('split', newValue)
        },
        
    }
}
</script>
<style lang='scss' scoped>
.fu{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    .monitor{
        width: 72%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .title{
            color: #409EFF;
            font-size: 23px;
        }
        .layout-btn{
            margin-top:10px;
            width: 100%;
            height: 40px;
            padding: 5px 10px;
            display: flex;
            justify-content: end;
            background-color: #F2F2F2;
            
            
            .icon-img{
                cursor:pointer;
                width: 30px;
                height: 30px;
                margin-left: 10px;
                color:#6B6B6B;
            }
            .icon-active{
                color:#409EFF;
            }
            .hs:hover {
                color:#409EFF; /* 鼠标移入时的背景颜色 */
            }
        }
        .monitor-content{
            margin-top:10px;
            width: 100%;
            height: 500px;
        }
        .full-screen{
            position: fixed;
            width: 100vw;
            height: 100vh;
            background-color: #fff;
            top: 0px;
            left: 0px;
            z-index: 2010;
        }
        .monitor-layout{
            // margin-top:10px;
            // width: 100%;
            // min-height: 500px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .play-title{
                color: #FFFFFF;
                font-size: 1rem;
                // font-weight: bold;
            }
            .play-box {
                cursor: pointer;
                background-color: #858585;
                border: 2px solid #505050;
                display: flex;
                align-items: center;
                justify-content: center;
                .play-item{
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    .player{
                        height: 90% !important;
                    }
                    .btn-list{
                        // flex: 1;
                        height:7vh;
                        width: 100%;
                        padding: 5px 10px;
                        background-color: #F2F2F2;
                        display: flex;
                        justify-content: space-between;
                        .icon-list{
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            width: 41%;
                            height: 100%;
                            .node{
                                display: flex;
                                align-items: center;
                                // height: 50%;
                                
                                img{
                                    width: 12px;
                                    height: 12px;
                                }
                                span{
                                    margin-left: 5px;
                                    font-size: 14px;
                                    // color: #409EFF;
                                    overflow: hidden;
                                    white-space:nowrap;/*默认normal 自动换行*/
                                    text-overflow:ellipsis; /*默认是clip 超出部分直接切除*/
                                }
                            }
                            
                        }
                        .function-list{
                            flex: 1;
                            display: flex;
                            justify-content: end;
                            align-items: center;
                            .svg-icon:hover{
                                color: #409EFF;
                            }
                            .svg-icon{
                                width: 1.5rem;
                                height: 1.5rem;
                                margin-left: 10px;
                                cursor:pointer;
                            }
                            // img{
                            //     width: 1.5rem;
                            //     height: 1.5rem;
                            //     margin-left: 10px;
                            //     cursor:pointer;
                            // }
                        }
                    }
                }
            }
        }
    }
    .warning-div{
        flex: 1;
        background-color: #F2F2F2;
        padding: 10px;
        margin-left: 5px;
        .common{
            border-radius: 10px;
            padding: 10px;
            margin-bottom: 10px;
            background-color: #fff;
            .row-one{
                display: flex;
                justify-content: space-between;
                height: 18px;
                width: 100%;
                .title{
                    height: 18px;
                    line-height: 18px;
                    padding-left: 5px;
                }
                .real-time-title{
                    border-left: 5px solid red;
                }
                .title-history{
                    border-left: 5px solid #02A7F0;
                }
                .jump{
                    height: 18px;
                    line-height: 18px;
                    cursor:pointer;
                }
            }
            .for-item{
                // padding: 5px 0px;
                margin-top: 5px;
                border-bottom: 2px solid #D7D7D7;
                .item-row-title{
                    display: flex;
                    justify-content: space-between;
                    margin-top: 10px;
                    .title-element{
                        display: flex;
                        align-items: center;
                        .number{
                            height: 14px;
                            width: 14px;
                            line-height: 14px;
                            font-size: 14px;
                            font-weight: 600;
                            text-align: center;
                            color: #fff;
                        }
                        .number-real-time{background-color: red;}
                        .number-history{background-color: #02A7F0;}
                        .enterprise{
                            font-size: 14px;
                            margin-left: 5px;
                        }
                    }
                    .place{
                        font-size: 14px;
                        color: #02A7F0;
                        display: flex;
                        align-items: center;
                        img{
                            width: 14px;
                            height: 14px;
                            margin-right: 5px;
                        }
                    }
                }
                .item-row-info{
                    margin-top: 10px;
                    padding: 5px;
                    display: flex;
                    font-size: 14px;
                    justify-content: space-between;
                    .frame{
                        width: 90px;
                        height: 60px;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .frame-history{
                        border: 1px solid #02A7F0;
                        box-shadow: 1px 1px 5px 0 #02A7F0;
                    }
                    .frame-real-time{
                        border: 1px solid red;
                        box-shadow: 1px 1px 5px 0 #f60e0e;
                    }
                    .default{
                        padding: 5px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                    }
                }
                .warning-content{
                    margin:10px 0px;
                    font-size: 14px;
                }
            }
        }
        .real-time{

        }
        .history{
            
        }
    }
    
}
</style>

在线笔记
关注
【GB28181】wvp-GB28181-pro快速修改登录页面名称（前端）
废人一枚的博客
02-28 363
作为一个开发人员，自己摸索起来比较费劲，也浪费了很多时间本文快速帮助开发者修改为。
【GB28181】wvp-GB28181-pro修改分屏监控为16画面（前端）
废人一枚的博客
02-28 798
引言 作为一个非前端开发人员，自己摸索起来比较费劲，也浪费了很多时间 由于实际开发中，可能预览的画面多于8个，而wvp目前只支持8画面 本文快速帮助开发者修改分屏监控为多画面。例如16画面,20画面等 文章目录一、 预期效果展示16分割画面20分割画面二、 源码修改-前端修改完整源码重新编译前端源码重打包后端jar包三、 验证修改效果 一、 预期效果展示 16分割画面 20分割画面 二、 源码修改-前端 需要修改的文件位置： 项目工程下web_src目录下 用记事本或者文本编辑器打开Live.vu
vue2实现海康威视根据海康插件进行监控实时预览和回放功能，全套代码，开箱即用。
我是小刘丶
12-23 1万+
这是一篇基于vue2的海康视频实时预览和视频回放功能实现的步骤代码。
vue2项目中如何接入视频监控
qq_25972233的博客
03-15 6143
以上就是今天要讲的内容，本文仅仅简单介绍了vue项目中如何接入视频监控，怎么去使用莹石云开放平台,以及接入监控视频的时候遇到的一些坑,多分享给大家了,不懂的可以在文章下方留言,共同讨论。
wvp-GB28181-pro 源码分析-点播流程（三）
最新发布
bacawa的博客
06-21 1295
wvp-GB28181-pro 源码分析-点播流程及停止点播流程源码分析
java：wvp-GB28181-pro
OceanStar的博客
05-24 8529
准备 服务运行环境，Linux / OS X / Windows 均可，我的是 ubuntu 海康/大华云台摄像头一个 运行 sip 服务 WVP https://github.com/swwheihei/wvp-GB28181 运行流媒体服务 ZLMediaKit https://github.com/xiongziliang/ZLMediaKit 文章目录准备运行流媒体服务器ZLMediaKit怎么运行windows版本&&linux版本docket版本使用单个端口接收视频流zml后
Ubuntu搭建国标平台wvp-GB28181-pro
fedorayang的专栏
01-29 3877
官网wvp-GB28181-pro:流媒体服务器:WVP-PRO使用Spring boot开发，maven管理依赖。参考官网既可安装部署.为了方便搭建,开源软件以后修改可能导致配置失败,把ZLMediaKit和wvp-GB28181-pro配置文件和项目commit ID记录到仓库中.
开箱即用的流媒体管理系统wvp-GB28181-pro 基于ZLMediaKit
coderYJ的博客
08-29 5531
ZLMediaKit wvp-GB28181-pro 开箱即用的流媒体
wvp-GB28181-pro录像功能开发环境搭建、配置、使用
zengliguang的专栏
05-07 9566
ffmpeg默认安装位置/usr/bin/ffmpeg ，ffprobe默认安装位置/usr/bin/ffprobe。WVP-PRO与ZLM支持分开部署，但是wvp-pro-assist必须与zlm部署在同一台主机;修改路径权限：chmod 777 -R /home/zenglg。输入拉流代理信息： 关键信息是拉流地址，其他可以随便选择，不是重点。assist和zlmediakit配置相同路径，路径权限要可写入。先开始实时预览，录像存储路径下应该会产生文件。18081表示启用，0表示不启用。
开箱即用的28181协议视频平台 基于 GB28181 标准实现的网络视频平台，能够接入摄像机、平台、NVR 等设备、支持视频
01-06
wvp-GB28181-pro：开箱即用的网络视频平台。基于 GB28181 标准实现的网络视频平台，能够接入摄像机、平台、NVR 等设备、支持视频预览、云台控制、录像查询和回放、无人观看自动断流等功能。 WEB VIDEO PLATFORM是一...
wvp-GB28181_wvp-gb28181_wvpgb28181_GB28181_
10-04
gb28181服务端，包含初始化，注册，注销，心跳，invite等功能模块
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
10-14
主要介绍了vue-video-player实现实时视频播放方式(监控设备-rtmp流)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue3视频播放器组件Vue3-video-play入门教程
热门推荐
猿小白的博客
03-11 1万+
Vue3-video-play适用于 Vue3 的 hls.js 播放器组件 | 并且支持MP4/WebM/Ogg格式。1、支持快捷键操作2、支持倍速播放设置3、支持镜像画面设置4、支持关灯模式设置5、支持画中画模式播放6、支持全屏/网页全屏播放7、支持从固定时间开始播放8、支持移动端，移动端会自动调用自带视频播放器9、支持hls视频流播放，支持直播10、hls播放支持清晰度切换。
【GB28181】从一个开源平台入门到实践系列文章汇总（持续更新）
废人一枚的博客
02-25 1172
本文是GB28181从一个开源平台入门到实践系列文章专栏导航帖（持续更新）建议大家在阅读专栏文章时，使用本导航进行阅读，读起来更有条例。
探索WVP-GB28181-Pro：一款强大的视频监控平台
gitblog_00042的博客
03-21 1278
探索WVP-GB28181-Pro：一款强大的视频监控平台 wvp-GB28181-pro项目地址:https://gitcode.com/gh_mirrors/wv/wvp-GB28181-pro 项目简介 是一个开源的视频监控系统，基于GB28181标准实现。该项目旨在为用户提供高效、稳定且易于集成的视频管理解决方案，适用于多种应用场景，如智能家居、商业安全、智慧城市等。 技术分析 核心特性...
【GB28181】wvp-GB28181-pro快速适配 连接SQlite3数据库
废人一枚的博客
02-28 839
wvp最新项目支持mysql等数据库， 如果本地没有安装mysql等数据库，并想直接可以运行wvp项目，需要进行二次修改。运行平台：windows或linux。
wvp-GB28181-pro 源码分析-服务启动流程及IPC注册（一）
bacawa的博客
06-19 1386
wvp源码分析，服务启动顺序及IPC设备注册流程
【流媒体视频监控平台开发wvp-GB28181-pro】
m0_38110240的博客
04-04 6554
学习原因：需要开发一款视频监控集中平台，兼容海康、大华等视频厂家NVR和摄像头，共几百套设备，但是不需要每天实时监控，基本上每个NVR和摄像头每天观看1次左右，同时可以控制云台和回放，需要兼容大部分浏览器，可节约服务器资源。海康、大华WEB控件开发问题很多，谷歌不能装插件，型号有些不兼容，插件卡死，视频预览回放无进度条，十分不方便。（主要是客户不太满意，又不多给点钱买服务器）1.原有视频监控，基于海康、大华web控件和SDK2.开源wvp-GB28181-pro。
vue3-video-player实现实时监控视频播放
06-02
要实现Vue3-video-player实时监控视频播放，可以使用Vue3-video-player提供的事件和方法来实现。具体步骤如下： 1. 在Vue3的模板中，使用Vue3-video-player组件来加载视频文件，并设置autoplay和controls属性来自动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值