vue在PC端接入监控摄像头

已于 2024-06-28 17:59:41 修改
阅读量641 收藏 6
点赞数 10
文章标签： vue.js 前端 javascript
于 2024-05-29 14:38:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52830464/article/details/139289876
版权

一.本地环境接入海康威视摄像头

参考文档：海康开放平台

本码用的是WEB3.3控制开发包 V3.3

1.下载插件

链接: 百度网盘 请输入提取码

2.安装插件

3.拷贝文件

在你的项目根目录下创建public文件夹 把下载的三个js文件拷贝进去

4.引入文件

在根目录的index.html文件 引入以下两个js文件

5.定义组件

该组件目录：src/components/MonitorVideo/index.vue

<template>
    <div ref="divPlugin" :id="divPlugin" class="plugin" style="width: 100%;height:100%;"></div>
</template>
   
   
<script>
import { nextTick } from "vue"
export default {
    props: ['sysParams', 'width', 'height'],
    data() {
        return {
            divPlugin: 'video_' + this.generateUUID(),
            g_iWndIndex: null,
            szDeviceIdentify: ''
        };
    },
    created() {
    },
    mounted() {
        nextTick(() => {
            setTimeout(() => {
                this.linkVideo();
            }, 500);
        })
    },
    beforeDestroy() {
        this.hideVideo();
    },
    methods: {
        // 初始化
        linkVideo() {
            let that = this;
            WebVideoCtrl.I_InitPlugin({
                bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
                iWndowType: 1, //表示视频组件窗口数，默认是1，我这里需要四个窗口改为了2
                cbSelWnd: function (xmlDoc) {
                    that.g_iWndIndex = parseInt(
                        $(xmlDoc).find('SelectWnd').eq(0).text(),
                        10
                    );
                    console.log('选中窗口');
                    if (that.sysParams[that.g_iWndIndex]) {
                        that.clickStartRealPlay();
                    } else {
                        that.$message.error('当前窗口无设备');
                    }
                },
                cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
                    if (!bFullScreen) {
                    }
                },
                cbEvent: function (iEventType, iParam1, iParam2) {
                    if (2 == iEventType) {
                        // 回放正常结束
                        showCBInfo('窗口' + iParam1 + '回放结束！');
                    } else if (-1 == iEventType) {
                        showCBInfo('设备' + iParam1 + '网络错误！');
                    } else if (3001 == iEventType) {
                        clickStopRecord(g_szRecordType, iParam1);
                    }
                },
                cbInitPluginComplete: function () {
                    WebVideoCtrl.I_InsertOBJECTPlugin(that.divPlugin).then(
                        () => {
                            that.sysParams.map((item, index) => {
                                setTimeout(() => {
                                    that.g_iWndIndex = index;
                                    that.clickStartRealPlay();
                                }, index * 1000);
                            });
                        },
                        () => {
                            alert("插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！")
                            console.log("插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！");
                        }
                    );
                }
            });
        },
        // 登录
        async clickStartRealPlay() {
            let that = this;
            var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
            let { szIP, szPort, szUsername, szPassword } =
                this.sysParams[that.g_iWndIndex];
            that.szDeviceIdentify = szIP + '_' + szPort;
            if (oWndInfo == null) {
                WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
                    success: function (xmlDoc) {
                        //成功的回调函数
                        that.getVideo();
                    },
                    error: function (oError) {
                        if (oError.errorCode == '2001') {
                            that.getVideo();
                        }
                        //失败的回调函数
                    }
                });
            } else {
                await WebVideoCtrl.I_Stop(that.g_iWndIndex);
                that.getVideo();
            }
        },
        // 打开预览视频
        getVideo() {
            console.log('渲染第' + this.g_iWndIndex + '窗口');
            WebVideoCtrl.I_StartRealPlay(this.szDeviceIdentify, {
                iWndIndex: this.g_iWndIndex,
                success: function () { },
                error: function (oError) { }
            });
        },
        // 关闭销毁
        async hideVideo() {
            await WebVideoCtrl?.I_StopAllPlay();
            await WebVideoCtrl?.I_Logout(this.szDeviceIdentify);
            await WebVideoCtrl?.I_DestroyPlugin();
        },
        // 生成uuid
        generateUUID() {
            let d = new Date().getTime();
            let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
                /[xy]/g,
                (c) => {
                    let r = (d + Math.random() * 16) % 16 | 0;
                    d = Math.floor(d / 16);
                    return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
                }
            );
            return uuid;
        }
    },
    watch: {
        sysParams: {
            handler(newVal, oldVal) {
                // 当items数组发生变化时，执行这里的逻辑
                console.log('items 数组发生变化：', newVal, oldVal);
                // this.hideVideo();
                WebVideoCtrl.I_StopAllPlay();
                // this.linkVideo();
                this.sysParams.map((item, index) => {
                    setTimeout(() => {
                        this.g_iWndIndex = index;
                        this.clickStartRealPlay();
                    }, index * 400);
                });
            },
            deep: true
        }
    }
};
</script>
   
<style lang='scss' scoped>
.plugin {}
</style>

6.页面使用

<template>
	<div class="layout-padding">
		<div class="layout-padding-view layout-padding-auto">
			<div class="surveillanceVideo">
				<!-- 本地的 -->
				<MonitorVideo v-if="mode === 'development' && videoShow" :sysParams="list" ref="monitorVideoRef">
				</MonitorVideo>
				<!-- 线上的 -->
				<!-- <PlayerVideo v-else-if="mode === 'production' && videoShow" ref="playerVideoRef">
				</PlayerVideo> -->
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent, getCurrentInstance, onDeactivated, onActivated, onBeforeUnmount, } from 'vue';
import MonitorVideo from "/@/components/MonitorVideo/index.vue"
// import PlayerVideo from "/@/components/PlayerVideo/index.vue"
export default defineComponent({
	components: {
		MonitorVideo,
		// PlayerVideo
	},
	setup() {
		const data = reactive({
			videoShow: false,
			list: [{
				szIP: '192.168.0.15', // ip地址
				szPort: '80', // 端口号
				szUsername: 'admin', // 账号
				szPassword: '密码' // 密码
			}],
			// mode: import.meta.env.MODE,
			mode: "development",
		});

		// 页面加载时
		onMounted(async () => {
			console.log("onMounted");
			openVideoShow()
		});

		onBeforeUnmount(() => {
			console.log("onBeforeUnmount");
			closeVideoShow()
		})


		onActivated(() => {
			console.log("onActivated");
			openVideoShow()
		})
		onDeactivated(() => {
			console.log("onDeactivated");
			closeVideoShow()
		})

		const { proxy }: any = getCurrentInstance();

		const openVideoShow = () => {
			data.videoShow = true
		}

		const closeVideoShow = () => {
			proxy.$refs.monitorVideoRef?.hideVideo().catch((err: any) => {
			})
			data.videoShow = false
		}

		return {
			...toRefs(data),
		};
	},
});
</script>

<style  lang="scss" scoped>
.surveillanceVideo {
	width: 600px;
	height: 400px;
}
</style>

效果图

二.生产环境(线上)接入萤石云监控

参考文档：文档概述 · 萤石开放平台API文档

1.安装依赖

npm i  ezuikit-js

2.定义组件

该组件目录：src/components/PlayerVideo/index.vue

<template>
	<div id="video-container" style="width: 100%;"></div>
</template>
<script lang="ts">
import { reactive, getCurrentInstance, toRefs, onMounted, nextTick, defineComponent } from 'vue';
import EZUIKit from 'ezuikit-js';

var player = null as any;
export default defineComponent({
	name: 'PlayerVideo',
	setup(props: any, { emit }: any) {
		var themeData = {
			"header": {
				"color": "#1890ff",
				"activeColor": "#FFFFFF",
				"backgroundColor": "#000000",
				"btnList": [
					{
						"iconId": "deviceID",
						"part": "left",
						"defaultActive": 0,
						"memo": "顶部设备序列号",
						"isrender": 1
					},
					{
						"iconId": "deviceName",
						"part": "left",
						"defaultActive": 0,
						"memo": "顶部设备名称",
						"isrender": 1
					},
					{
						"iconId": "cloudRec",
						"part": "right",
						"defaultActive": 0,
						"memo": "云存储",
						"isrender": 0
					},
					{
						"iconId": "rec",
						"part": "right",
						"defaultActive": 0,
						"memo": "SD卡回放",
						"isrender": 0
					}
				]
			},
			"footer": {
				"color": "#FFFFFF",
				"activeColor": "#1890FF",
				"backgroundColor": "#00000021",
				"btnList": [
					{
						"iconId": "play",
						"part": "left",
						"defaultActive": 1,
						"memo": "播放",
						"isrender": 1
					},
					{
						"iconId": "capturePicture",
						"part": "left",
						"defaultActive": 0,
						"memo": "截屏按钮",
						"isrender": 1
					},
					{
						"iconId": "sound",
						"part": "left",
						"defaultActive": 0,
						"memo": "声音按钮",
						"isrender": 1
					},
					{
						"iconId": "pantile",
						"part": "left",
						"defaultActive": 0,
						"memo": "云台控制按钮",
						"isrender": 1
					},
					{
						"iconId": "recordvideo",
						"part": "left",
						"defaultActive": 0,
						"memo": "录制按钮",
						"isrender": 1
					},
					{
						"iconId": "talk",
						"part": "left",
						"defaultActive": 0,
						"memo": "对讲按钮",
						"isrender": 1
					},
					{
						"iconId": "zoom",
						"part": "left",
						"defaultActive": 0,
						"memo": "电子放大",
						"isrender": 1
					},
					{
						"iconId": "hd",
						"part": "right",
						"defaultActive": 0,
						"memo": "清晰度切换按钮",
						"isrender": 1
					},
					{
						"iconId": "webExpend",
						"part": "right",
						"defaultActive": 0,
						"memo": "网页全屏按钮",
						"isrender": 1
					},
					{
						"iconId": "expend",
						"part": "right",
						"defaultActive": 0,
						"memo": "全局全屏按钮",
						"isrender": 1
					}
				]
			}
		};


		onMounted(() => {
			nextTick(() => {
				initPlayer()
			});
		});

		const { proxy } = getCurrentInstance() as any;

		const data = reactive({

		});

		const initPlayer = async () => {
				player = new EZUIKit.EZUIKitPlayer({
					id: 'video-container', // 视频容器ID
					accessToken: "at.67jjm3xg1nqavrv3ch6wuhgl3hjzwvly-6t6ynn896j-0ronkpk-ci0ef9om3",
					url: "ezopen://open.ys7.com/FA6803244/1.hd.live",
					// simple - 极简版; pcLive-pc直播；pcRec-pc回放；	mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
					themeData: themeData,
				})
		}

		const destroyPlayer = () => {
			if (player) {
				player.stop();
				player.destroy();
				player = null;
			}
		}

		return { ...toRefs(data), destroyPlayer }
	}
})
</script>
<style scoped lang="scss"></style>

3.页面使用

<template>
	<div class="layout-padding">
		<div class="layout-padding-view layout-padding-auto">
			<div class="surveillanceVideo">
				<!-- 本地的 -->
				<!-- <MonitorVideo v-if="mode === 'development' && videoShow" :sysParams="list" ref="monitorVideoRef">
				</MonitorVideo> -->
				<!-- 线上的 -->
				<PlayerVideo v-if="mode === 'production' && videoShow" ref="playerVideoRef">
				</PlayerVideo>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent, getCurrentInstance, onDeactivated, onActivated, onBeforeUnmount, } from 'vue';
// import MonitorVideo from "/@/components/MonitorVideo/index.vue"
import PlayerVideo from "/@/components/PlayerVideo/index.vue"
export default defineComponent({
	components: {
		// MonitorVideo,
		PlayerVideo
	},
	setup() {
		const data = reactive({
			videoShow: false,
			list: [{
				szIP: '192.168.0.15',
				szPort: '80',
				szUsername: 'admin',
				szPassword: 'Qjy16888'
			}],
			// mode: import.meta.env.MODE,
			mode: "production",
		});

		// 页面加载时
		onMounted(async () => {
			console.log("onMounted");
			openVideoShow()
		});

		onBeforeUnmount(() => {
			console.log("onBeforeUnmount");
			closeVideoShow()
		})


		onActivated(() => {
			console.log("onActivated");
			openVideoShow()
		})
		onDeactivated(() => {
			console.log("onDeactivated");
			closeVideoShow()
		})

		const { proxy }: any = getCurrentInstance();

		const openVideoShow = () => {
			data.videoShow = true
		}

		const closeVideoShow = () => {
			// proxy.$refs.monitorVideoRef?.hideVideo().catch((err: any) => {
			// })
			data.videoShow = false
		}

		return {
			...toRefs(data),
		};
	},
});
</script>

<style  lang="scss" scoped>
.surveillanceVideo {
	width: 600px;
	height: 400px;
}
</style>

效果图

new出一个对象
关注
vue接入海康4G版摄像头通过萤石云平台推送视频流教程
renkai721的专栏
01-06 4075
vue-video-player接入海康视频,videojs-contrib-hls,vue播放视频
Vue3 - 详细实现接入使用海康威视监控云端显示及控制功能，网站集成安装海康监控及实时监控显示、回放、放大缩小画面、视频画面截图、截屏抓拍、摄像头控制，实时推流及播放器解决延迟卡顿等问题（详细代码）
王佳斌
07-12 7840
vue3，nuxt3，海康威视，海康监控，摄像头监控，实时监控画面，海康插件，视频播放，回放，视频流地址，取流协议，视频sdk播放，hik，rtsp，rtmp，hls，ws，网站，网页，h5页面，后台管理系统，vue3对接海康监控设备，无法连接，报错，vue3对接海康处理接口认证规则，监控实时预览和回放功能，海康api接口，安全认证，海康开放平台，官方文档，播放海康摄像头的监控视频，海康实时监控播放详细步骤，web，黑屏，特别卡不流畅怎么办，解决无法推流，录像，连接不上，vue3，海康，vue海康视频监控，
Vue 对接海康威视，实现摄像头画面展示
虎康的博客
07-19 859
（2）在项目中public文件下创建一个文件夹放视频插件js。项目中集成海康威视，实现摄像头画面展示。（1）下载完成后打开。
VUE调用摄像头，拍摄视频上传demo
darling331的博客
06-28 679
前端代码 <template> <div id="videoDemo"> <div> <el-form ref="uploadForm" :model="uploadForm" label-width="120px"> <el-row> ...
vue实现调用摄像头
最新发布
weixin_48433993的博客
08-12 384
目前跑了一下很有意思。
Vue项目接入海康威视智能应用平台监控摄像头全过程分享
热门推荐
hoaxxcj的博客
04-14 1万+
、
Vue里调用本地摄像头进行拍照(简单记录)
qq_41497443的博客
10-19 2536
Vue里调用本地摄像头进行拍照(简单记录) 主要代码： <template> <div> <!--<el-input type="text" v-model="imgSrc" />--> <el-col :span="1.5"> <el-button @click="onTake" icon="el-icon-camera" size="s
vue2使用rtsp视频流接入海康威视摄像头(纯前端)
m0_63541756的博客
03-26 1万+
主要详细讲了vue如何使用rtsp流接入海康威视摄像头的过程
【Cesium】Vue+js+Cesium实现监控视频流接入
weixin_51540717的博客
06-12 1151
Vue2+js+Cesium实现监控视频流接入与相机云台控制
Vue2 - 详细实现接入使用海康威视监控云端显示及控制功能，网站集成安装海康监控及实时监控显示、回放、放大缩小画面、视频画面截图、截屏抓拍、摄像头控制，实时推流及播放器解决延迟卡顿等问题（详细代码）
王佳斌
07-12 6650
vue2，nuxt2，海康威视，海康监控，摄像头监控，vue对接海康处理接口认证规则，监控实时预览和回放功能，海康api接口，安全认证，海康开放平台，官方文档，播放海康摄像头的监控视频，海康实时监控播放详细步骤，web，黑屏，特别卡不流畅怎么办，解决无法推流，录像，连接不上，vue，海康，vue海康视频监控，海康开放平台，实时监控画面，海康插件，视频播放，回放，视频流地址，取流协议，视频sdk播放，hik，rtsp，rtmp，hls，ws，网站，网页，h5页面，后台管理系统，vue2对接海康监控设备，无法连
vue前端对接Hikvision海康威视监控，pc端对接，插件模式
qq_41732963的博客
04-13 9902
一.对比有无插件两种模式 我之前已经把无插件对接的方式做了一篇文字有兴趣的可以去看看。 有插件和无插件的区别： 1.无插件的模式可以在pc和移动端运行，插件模式不能在移动端播放，因为电脑需要装一个插件，没用这个插件浏览器无法播放。 2.插件模式相比无插件模式多了很多操作比如让摄像头旋转（前提是摄像头支持旋转）还有一些自带的操作。 二.示例 官方其实有几个demo ...
IE+Flash+vue项目调用摄像头拍照
12-14
代码是vue的项目，先用npm install初始化，再用npm run dev指令即可
海康 大华rtsp 监控摄像头
01-21
通过对RTSP协议的理解与应用，用户可以轻松实现在PC端和移动端上的远程监控，极大地提高了监控系统的灵活性和实用性。未来，随着技术的进步和市场需求的变化，这些监控摄像头还将继续发展和完善，更好地服务于社会各...
uniapp [全端兼容] - 详细实现接入使用海康威视监控云端显示及控制功能，网站集成安装海康监控及实时监控显示、摄像头控制，实时推流、回放、放大缩小画面、视频画面截图、截屏抓拍及播放器解决延迟教程
王佳斌
07-18 6175
uniapp，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，vue，海康威视，海康监控，摄像头监控，实时监控画面，海康插件，无法连接，报错，uniApp对接海康处理接口认证规则，监控实时预览和回放功能，海康api接口，安全认证，海康开放平台，官方文档，播放海康摄像头的监控视频，海康实时监控播放详细步骤，web，黑屏，视频播放，回放，视频流地址，取流协议，视频sdk播放，hik，rtsp，rtmp，hls，ws，网站，网页，h5页面，后台管理系统，对接海康监控设备
vue项目调用摄像头实现拍照功能
Web_Notes的博客
02-21 3523
该 API 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。1.因为我是使用微信二维码扫码预览，一直无法进入navigator.mediaDevices .getUserMedia()方法，无法打开摄像头，后面采用网址的方式预览，换了其他浏览器才可以。
vue对接海康视频监控播放、回放的方法，流程，以及存在的注意点和踩过的坑！
m0_67790636的博客
01-26 6235
用nginx搭建一个流媒体服务器，这种方式网上也很多例子，我对他的理解，就是通过ffmpe这个工具推流到nginx上，然后你去访问nginx，通过nginx监听的端口，他在将这个流转发给你，你再通过地址将流拉下来。）但是话说回来，这个插件对于海康返回的接口协议而言，只能播放 m3u8/HLS 协议了，这种视频流需要你在查询海康视频地址的时候（/api/video/v2/cameras/previewURLs）将 protocol=“hls”这个参数加上。ok 就这样，如再发现问题会及时更新的，后续更新。
vue 实现pc端调取本地摄像头拍照生成base64数据 navigator.userAgent 功能
@必意玲
08-17 3215
写在前面： 在vue中为了安全，是获取不到 navigator.userAgent 对象属性的 ，这个是很重要的一个信息。 在经历无数次百度，看到网上比较多的就是，开启用 https 方式去实现摄像头拍照的功能。 怎么开启，下面我们会讲解。 先看下实现效果 ...
vue接入电脑摄像头进行人脸录入
weixin_51490706的博客
04-27 533
在vue中接入电脑进行人脸录入需要笔记本前置摄像头，或者电脑摄像头设备 先写一个video用来接入摄像头，一个按钮进行摄像头截取图像，canvas展示截取的图片 <div class="cameraImg"> <div> <video width="200px" height="150px" ref="video"></video></div> <button id="snap" @click="getImg">截取
VUE 实现浏览器连接摄像头拍摄
weixin_50704569的博客
09-01 1076
加油
vue项目接入微信 公众号
09-14
Vue 项目接入微信公众号，可以通过以下步骤实现： 1. 在微信公众平台上开发者中心注册并配置公众号，获取 AppID 和 AppSecret。 2. 在 Vue 项目中引入微信 SDK，通过 SDK 获取用户信息和授权。 3. 在 Vue 项目中使用微信 API 进行与微信公众号交互，如分享、支付等。 4. 部署 Vue 项目到服务器，并将服务器地址配置在微信公众平台的开发者中心的 JS 接口安全域名。 这些步骤是实现 Vue 项目接入微信公众号的基本流程，具体实现可能根据具体需求和环境有所差异。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值