摄像头视频画面接入,使用iframe标签嵌入到页面中(海康威视、萤石)

有的时候,我们需要获取到摄像头的实时监控视频,并且把画面嵌入到页面当中,此时,可以使用萤石平台实现我们的需求。

1、进入到该平台,有一系列详细的步骤及参数介绍。

例:

  • url:监控地址,包含验证码、设备序列号、通道号、清晰度、播放类型

  • autoplay:1-开启自动播放,未显示字段-关闭自动播放

  • audio:1-开启音频,未显示字段-关闭音频

  • accessToken:访问令牌,播放监控地址的必要参数

  • live后缀:预览

  • rec后缀:回放

  • autoplay:1-开启自动播放,未显示字段-关闭自动播放

  • audio:1-开启音频,未显示字段-关闭音频

  • accessToken:访问令牌,播放监控地址的必要参数

  • validCode:验证码,加密设备播放需要验证码

  • hd:1-高清(实际为主码流),未显示字段-流畅(实际为子码流)

  • deviceSerial:设备序列号

  • channelNo:通道号

按需使用,放到iframe标签内即可。

<iframe
  src="https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/203751922/1.live&autoplay=1&accessToken=ra.23xamzw35p27yshy6ea2hvud3riulmqo-173c7qgql3-0lxt9kc-jkzzoodlk"
  width="600"
  height="400"
  id="******"
  allowfullscreen
  autoplay
>
</iframe>

2、 常见的故障及异常也有介绍。
在这里插入图片描述
3、简直是you shou就行啊…
在这里插入图片描述

要实现接入海康威视摄像头预览画面前端展示,可以按照以下步骤进行: 1. 在 Spring Boot 项目引入海康威视 Java SDK 的依赖,例如: ``` <dependency> <groupId>com.hikvision.ivms</groupId> <artifactId>ivms-8700-sdk</artifactId> <version>1.0.0</version> </dependency> ``` 2. 在 Spring Boot 项目编写代码,通过海康威视 SDK 获取摄像头的预览流,并将其转换为 Base64 编码的字符串,例如: ``` // 获取海康威视 SDK 的实例 HCNetSDK hcNetSDK = HCNetSDK.INSTANCE; // 登录摄像头 NativeLong userId = new NativeLong(-1); HCNetSDK.NET_DVR_DEVICEINFO_V30 deviceInfo = new HCNetSDK.NET_DVR_DEVICEINFO_V30(); userId = hcNetSDK.NET_DVR_Login_V30("10.0.0.1", (short) 8000, "admin", "password", deviceInfo); // 获取预览流 HCNetSDK.NET_DVR_PREVIEWINFO previewInfo = new HCNetSDK.NET_DVR_PREVIEWINFO(); previewInfo.lChannel = new NativeLong(1); previewInfo.dwStreamType = 1; previewInfo.dwLinkMode = 0; NativeLong lRealPlayHandle = hcNetSDK.NET_DVR_RealPlay_V40(userId, previewInfo, null); // 获取预览流数据 HCNetSDK.NET_DVR_PREVIEWINFO previewInfo = new HCNetSDK.NET_DVR_PREVIEWINFO(); previewInfo.lChannel = new NativeLong(1); previewInfo.dwStreamType = 1; previewInfo.dwLinkMode = 0; NativeLong lRealPlayHandle = hcNetSDK.NET_DVR_RealPlay_V40(userId, previewInfo, null); // 将预览流数据转换为 BufferedImage 对象 HCNetSDK.NET_DVR_GetRealPlayerIndex(lRealPlayHandle); HCNetSDK.NET_DVR_CLIENTINFO clientInfo = new HCNetSDK.NET_DVR_CLIENTINFO(); clientInfo.lChannel = new NativeLong(1); clientInfo.hPlayWnd = null; byte[] bJpegPicBuffer = new byte[1024 * 1024]; IntByReference dwPicSize = new IntByReference(); if (hcNetSDK.NET_DVR_GetRealPlayerIndex(lRealPlayHandle) >= 0 && hcNetSDK.NET_DVR_ClientGetVideoEffect(lRealPlayHandle, HCNetSDK.VIDEOEFFECT_GET, clientInfo)) { if (hcNetSDK.NET_DVR_GetPlayerBackShare(lRealPlayHandle, bJpegPicBuffer, 1024 * 1024, dwPicSize)) { ByteArrayInputStream byteArrayInputStream = new ByteArrayInputStream(bJpegPicBuffer, 0, dwPicSize.getValue()); BufferedImage bufferedImage = ImageIO.read(byteArrayInputStream); // 将 BufferedImage 对象转换为 Base64 编码的字符串 ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream(); ImageIO.write(bufferedImage, "jpg", byteArrayOutputStream); byte[] bytes = byteArrayOutputStream.toByteArray(); String base64String = Base64.getEncoder().encodeToString(bytes); } } // 停止预览并注销登录 hcNetSDK.NET_DVR_StopRealPlay(lRealPlayHandle); hcNetSDK.NET_DVR_Logout_V30(userId); ``` 3. 将 Base64 编码的字符串返回到前端,并在前端页面使用 JavaScript 将其解码并显示为图片,例如: ``` <img src="data:image/jpeg;base64,${base64String}" /> ``` 这样就可以将海康威视摄像头的预览画面展示到前端页面了。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值