详解在WinCC中嵌入摄像头视频的方法

科技   2024-11-26 08:05   四川  

转自SIEMENS工业专家天团作品


在当今的科技应用领域,将摄像头的实时画面精准地显示于 WinCC 之中,无疑是一项具有重要实用价值的操作技能,值得各位深入探究与掌握,建议将其收藏,随时调用。

一、引言

在各类项目实践里,常常会面临将摄像头实时画面呈现于 WinCC 画面的需求情境。较为简易的一种方法,就是借助摄像头厂家所提供的专用摄像头显示控件来实现。然而,在实际的工作场景中,并非所有的摄像头厂家都配备了合适的控件资源;因此该应用方式存在一定的局限性,难以广泛适用于各类摄像头设备。


此外,曾经流行的一种做法是,直接在网页浏览器中嵌入 VLC 播放器,以此来直接播放摄像头的 RTSP 视频流。但出于网络安全防护层面的考量,新版的浏览器已不再支持这种访问形式,进而使得该方法在实际应用过程中也受到了诸多限制,无法顺畅达成预期的显示效果。今天,为大家详细介绍一种更通用、有效的实现方法。(可以先看下面视频再看后面的文字介绍)


二、协议转换服务

其核心在于,在摄像头与 Web 浏览器之间巧妙地增设一个协议转换服务程序,将摄像头所采用的 RTSP 协议精准地转换为 Web 浏览器能够支持的 WebRTC 协议。在此过程中,最为关键的环节便是找到一个契合需求的协议转换服务程序。



这种方式实现的核心就是在摄像头和Web浏览器之间增加一个协议转换服务程序。将摄像头的RTSP协议转换为Web浏览器支持的WebRTC协议。为此,要找到一个合适的协议转换服务程序。

三、装载Webrtc-streamer

接下来继续深入讲解,在github 上,能够搜索到一个开源的协议转换服务程序 webrtc - streamer。


此程序极具特色,其核心文件仅有 3 个,且整体尺寸尚不足 16MB,其中涵盖了一个 Web 服务 exe 程序,以及两个用于提供支持的 js 库文件。


我们仅需编写 html 文件,便可轻松地将指定的摄像头视频嵌入其中。并且,该方法还支持将多个摄像头同时显示于一个 html 页面之内,从而达成类似视频阵列的独特视觉效果,极大地丰富了监控画面的呈现形式与信息容量。

四、编写HTML文件

在 HTML 文件之中,存在 3 处极为关键的实现代码部分。


第一处:加载两个库文件 adapter.min.js 和 webrtcstreamer.js。

这两个库文件将为后续的视频嵌入与播放功能提供坚实的基础支持与功能拓展。


第二处:创建服务实例并连接到对应的摄像头设备。

倘若存在多个摄像头需要同时处理,那么仅需创建多个服务实例,并分别将其连接到各自对应的摄像头上即可,以此确保每个摄像头的视频流均能够被准确地获取与处理。


第三处:建立服务实例与 video 标签之间的有效关联。

若涉及多个摄像头的情况,则可相应地使用多个 video 标签,并分别建立起准确的关联关系,如此便能在 html 页面中精准地呈现出各个摄像头的实时画面,实现多画面的有序展示与监控。


自动化与工程技术
致力于提供自动化、电气和工程技术、工程资讯及其它工程相关的软件与资料。
 最新文章