外网访问内网海康威视监控视频的方案：WebRTC + Coturn 搭建

article/2025/7/19 4:57:35

外网访问内网海康威视监控视频的方案：WebRTC + Coturn

需求背景

在仓库中有海康威视的监控摄像头，内网中是可以直接访问到监控摄像的画面，由于项目的需求，需要在外网中也能看到监控画面。

实现这个功能的意义在于远程操控设备的时候可以看到监控画面，方便查看远程操作的效果。

解决方案

海康威视监控摄像头提供的是RTSP视频流，在网上查阅了资料，可以通过WebRTC协议在web页面上显示RTSP视频流。

WebRTC协议实现的最好的开源项目是webrtc-streamer，地址在：https://github.com/mpromonet/webrtc-streamer

由于WebRTC会使用对等连接，所以从外网访问内网的海康威视监控视频的时候就需要中继服务，也就是需要一个 STUN 或 TURN 服务器，其作用是为每个客户端提供 ICE 候选，然后将其转移到远程对等方。

大多数 WebRTC 应用都需要服务器来中继对等方之间的流量，因为客户端之间通常无法建立直接套接字（除非它们位于同一本地网络中）。常见的解决方法是使用 TURN 服务器。该术语代表“Traversal Using Relays around NAT”，是一种用于中继网络流量的协议。

目前，网上有多个 TURN 服务器选项，既有自托管应用（例如开源 COTURN 项目），也有云端提供的服务。

本项目最终采用自托管的COTURN项目，地址在：https://github.com/coturn/coturn

方案示例图如下：

在这里插入图片描述

上图中的Relay server即为turn中继服务器，而STUN server的作用是通过收集NAT背后peer端(即：躲在路由器或交换机后的电脑）对外暴露出来的ip和端口，找到一条可穿透路由器的链路，俗称“打洞”。stun/turn服务器通常要部署在公网上，能被所有peer端访问到，coturn开源项目同时实现了stun和turn服务的功能，是webrtc应用的必备首选。

方案确定了，接下来就是动手实际搭建了。

实际搭建

基于Coturn搭建stun/turn服务器

参考github中readme文档，在云服务器中直接使用apt安装：

step1 更新软件源

$ sudo apt update

step2 安装coturn

$ sudo apt install coturn

step3 修改配置文件

主要修改下面几项关键的配置：

lt-cred-mech

user=<用户名>:<密码>

注意：要把用户名和密码替换成实际的字符串。

step4 停止掉coturn服务

由于安装coturn服务后，默认是会运行该服务的，所以这儿要先停止掉

$ sudo systemctl stop coturn

step5 前台运行turnserver服务器

第一次运行，最好是使用前端运行的方式，如果没有问题的话，再使用后端服务的运行方式。

$ sudo turnserver -r chengdu  --log-file stdout

step6 后端服务的方式运行turnserver

在启动之前要在配置文件中增加realm=chengdu配置项。

$ sudo systemctl start coturn

可以使用journalctl -xeu coturn.service查看后台服务coturn的日志。

step7 验证stun和turn服务正常运行。

找一台可以访问Coturn服务所在ip的机器，然后执行下面的命令：

$ turnutils_uclient -v -u <用户名> -w <密码> <云服务器地址>

注意：turnutils_uclient命令要在安装了coturn服务的机器上才有。

还可以在下面这个网址上验证stun/turn服务是否运行正常。

https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/

参考下图，把stun和turn地址设置好，然后点击最下面的“Gather candidates”(收集候选链路)

在这里插入图片描述

云服务器要开放的端口

云服务器需要开发tcp 3478 和 udp 3478端口，方便客户端连接stun和turn服务器。

并且要开放中继端口范围udp 49152-65535。

启动webrtc-streamer

step1 下载webrtc-streamer

从https://github.com/mpromonet/webrtc-streamer/releases/latest下载软件包。

step2 启动webrtc-streamer服务

进入到软件目录，然后执行下面的命令：

./webrtc-streamer -v debug  -H 8800 -s<云主机ip>:3478 -t<用户名>:<密码>@<云主机>:3478

注意：将云主机地址替换成安装coturn服务的云主机公网IP，用户名和密码就是在turnserver.conf中设置的用户名和密码，直接替换就行。

step3 将webrtc-streamer做成开机启动。

这个步骤可以参考Linux添加systemd服务，使用systemctl start xxx启动服务。

前端页面示例代码

index.html文件内容如下：


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta content="width=device-width, initial-scale=1.0" name="viewport" /><script src="js/webrtcstreamer.js"></script><title>视频监控-测试</title><style> .content{width: 100%;height: 100%;position: absolute;background-color: aliceblue;}.item{width: 49.5%;height: 49.5%;float: left; margin: 3px;}video {width: 100%;height: 100%;object-fit: fill;}</style>
</head><body><div class="content"><div class="item"><video id="video1" muted autoplay loop></video></div><div class="item"><video id="video2" muted autoplay loop></video></div><div class="item"><video id="video3" muted autoplay loop></video></div><div class="item"><video id="video4" muted autoplay loop></video></div></div>
</body>
<script>// let webRtcServer = null;function init() {var videourl1 = "<替换为实际的海康威视RTSP地址1>";let ID1 = "video1";realViewHik(ID1, videourl1)var videourl2 = "<替换为实际的海康威视RTSP地址2>";let ID2 = "video2";realViewHik(ID2, videourl2)var videourl3 = "替换为实际的海康威视RTSP地址3";let ID3 = "video3";realViewHik( ID3, videourl3)var videourl4 = "替换为实际的海康威视RTSP地址4";let ID4 = "video4";realViewHik(ID4, videourl4)}function realViewHik(elem, rtspUrl) {let webRtcServer = new WebRtcStreamer(elem, "http://<webrtc-streamer的ip地址>:8800");let option = "rtptransport=tcp";webRtcServer.connect(rtspUrl, null, option, null)}window.onload = function () {init();}
</script></html>

其中<script src="js/webrtcstreamer.js"></script>是引用的webrtc-streamer中的webrtcstreamer.js文件，该文件在软件包的webrtc-streamer-v0.8.5-Linux-x86_64-Release/html路径下，可以直接拷贝到js目录下使用。

原理解读

WebRTC协议

WebRTC（Web Real-Time Communication）是一种开源技术，旨在通过简单的应用程序接口（API）实现浏览器和移动应用之间的实时音视频通信和数据共享，而无需安装插件或第三方软件。它由Google主导开发，现已成为W3C和IETF的标准。

核心功能

  1. 实时音视频通信
    • 支持浏览器之间直接传输高清视频和音频，延迟低（通常 < 500ms）。
  2. 点对点（P2P）传输
    • 数据直接在用户设备间传输，减少服务器中转，提升效率。
  3. 数据通道（Data Channel）
    • 支持传输任意数据（如文件、游戏指令、文本），类似WebSocket但延迟更低。
  4. 加密传输
    • 默认使用DTLS-SRTP加密，确保通信安全。

关键技术组件

  • MediaStream（getUserMedia）
    访问摄像头和麦克风，获取音视频流。
  • RTCPeerConnection
    建立P2P连接，处理编解码、网络穿透（NAT）和流量控制。
  • RTCDataChannel
    提供双向数据传输，适合低延迟场景（如游戏、文件共享）。
  • ICE/STUN/TURN
    • ICE（Interactive Connectivity Establishment）：协调最佳连接路径。
    • STUN：获取公网IP，解决NAT穿透问题。
    • TURN：在中继服务器转发数据，用于严格的防火墙环境。

WebRTC-Streamer建立连接的时序图如下

在这里插入图片描述

WebRTC建立点对点通信的过程如下图所示

设备A 信令服务器 设备B STUN 发送 SDP Offer 转发 Offer 发送 SDP Answer 转发 Answer 获取 ICE Candidate 获取 ICE Candidate 发送 ICE Candidate 发送 ICE Candidate 转发 B的Candidate 转发 A的Candidate 直接建立 P2P 连接 设备A 信令服务器 设备B STUN

参考资料

流媒体协议介绍（rtp/rtcp/rtsp/rtmp/mms/hls）

史上最详细的webrtc-streamer访问摄像机视频流教程


http://www.hkcw.cn/article/JSgCRxyWmI.shtml

相关文章

基于PyQt5的UI界面开发——图像与视频的加载与显示

基于PyQt5的UI界面开发——图像与视频的加载与显示

介绍 这里我们的主要目标是实现一个基于PyQt5和OpenCV的图像浏览和视频播放应用。用户可以选择本地的图像或视频文件夹&#xff0c;进行图像自动播放和图像切换以及视频播放和调用摄像头等操作&#xff0c;并且支持图像保存功能。项目的核心设计包括文件路径选择、图像或视频的…
阅读更多...
浙江3名高中生深夜被困深山 成功获救未受伤

浙江3名高中生深夜被困深山 成功获救未受伤

5月31日端午节晚上，三名高中生因降雨失温被困在浙江台州的大雷山。救援人员接到通知后迅速展开搜救行动，最终找到三人并提供了保温毯和雨衣等物资。所幸没有人员伤亡。网络视频显示，当晚天空下着大雨，民警、消防人员及救援队在集结搜寻。大雷山位于浙江省台州市中西部，是永…
阅读更多...
西藏那曲双湖县发生3.6级地震 震源深度10公里

西藏那曲双湖县发生3.6级地震 震源深度10公里

据中国地震台网正式测定，6月2日12时32分在西藏那曲市双湖县发生3.6级地震，震源深度10公里，震中位于北纬33.63度，东经89.36度。震中5公里范围内平均海拔约5344米。根据中国地震台网速报目录，震中周边200公里内近5年来共发生了70次3级以上地震，其中最大一次是2021年3月30日…
阅读更多...
太原一路虎车在酒吧门口横冲直撞 警方已介入调查

太原一路虎车在酒吧门口横冲直撞 警方已介入调查

6月2日凌晨4时许，有网友发帖称山西省太原市发生了一起越野车冲撞事件。当天上午，太原警方表示已接到报警并正在调查。根据网友发布的视频，这起事件发生在太原市小店区一商家门口。视频中一辆路虎越野车在前进和倒退时有冲撞物品的行为，路人纷纷避让，有人试图拉开路虎车门。…
阅读更多...
苏州一医院医生被停工 误操作引发患者投诉

苏州一医院医生被停工 误操作引发患者投诉

近日，苏州市立医院东区发生了一起B超检查项目的误操作事件。5月30日，患者王女士因身体不适前往医院就诊，医生开具了腹部B超检查单。然而，在实际操作中，超声科医生却误将其操作成阴道B超。这一错误在王女士察觉后才被发现。她询问项目名称时，实习医生仅背对回应“看错了”…
阅读更多...
舟山多个海岛游客“被困” 当地回应 天气影响航班调整

舟山多个海岛游客“被困” 当地回应 天气影响航班调整

6月1日和6月2日，一些在舟山海岛的游客发帖称，由于没有航班离岛，自己被困在海岛上。这些发帖者包括东极岛、枸杞岛等海岛的游客。据网友发布的图片显示，6月1日，东极海运发布提示：因受海面风浪影响，船舶无法航行，当天庙子湖至沈家门9:20、10:00航班停航，已购买该时段船票…
阅读更多...
广铁计划加开列车321列 应对返程高峰

广铁计划加开列车321列 应对返程高峰

6月2日，端午小长假最后一天，广铁迎来返程客流高峰，旅客纷纷踏上归途。当天预计发送旅客237.3万人次，较去年增长9.3%。整个假期期间，旅客运输总体平稳有序。为满足出行需求，广铁集团优化调整运力，通过加开图外列车、动车组重联、增加夜间高铁等方式提升运力。6月2日计划加…
阅读更多...
热刺决定解雇波斯特科格鲁，新主帅人选曝光 弗兰克成热门接班人

热刺决定解雇波斯特科格鲁，新主帅人选曝光 弗兰克成热门接班人

北京时间6月1日，热刺决定解雇波斯特科格鲁。托马斯-弗兰克成为热刺新教练的接班人选之一，马尔科-席尔瓦也在考虑名单上。此前法国媒体报道称，托特纳姆热刺本周与托马斯-弗兰克进行了直接接触，双方讨论了夏季转会计划和一些转会目标。责任编辑：zhangxiaohua
阅读更多...
北京铁路抵京旅客75.8万 端午假期返程高峰

北京铁路抵京旅客75.8万 端午假期返程高峰

6月2日是端午假期的最后一天，中国铁路北京局预计发送旅客137万人次。其中，北京地区预计发送51.4万人次、到达75.8万人次。中午11点半，北京站迎来了一波出站客流高峰，旅客出站后迅速前往地铁站和出租车调度站。尽管短时间内出现客流高峰，但因地铁进站闸机全面开启，容纳能力…
阅读更多...
章子怡晒照祝儿女节日快乐 陪伴是最好的礼物

章子怡晒照祝儿女节日快乐 陪伴是最好的礼物

6月1日，章子怡在社交平台上晒出女儿和儿子的照片，祝他们儿童节快乐。她写道：“陪伴孩子们的每一天都是上天的恩赐……陪伴就是给孩子们最好的礼物。节日快乐我的孩子，愿你们的童年如彩虹般绚烂，健康快乐地成长。”网友们纷纷留言表示，醒醒越来越像妈妈了。2023年10月23日…
阅读更多...
郑钦文闯进法网8强 拿下359万奖金 鏖战三盘胜出

郑钦文闯进法网8强 拿下359万奖金 鏖战三盘胜出

北京时间6月1日晚，法国网球公开赛1/8决赛中，郑钦文以7-6（5）、1-6、6-3战胜萨姆索诺娃，首次闯入法网8强，并获得430积分和44万欧元奖金。首盘比赛中，双方表现平稳，比分交替上升。进入中段后，两人互相破发，比赛变得越来越激烈，最终进入抢七局。在抢七局中，郑钦文表现出…
阅读更多...
为中国高速列车发展护航 中南大学团队的创新与坚守

为中国高速列车发展护航 中南大学团队的创新与坚守

高铁已成为许多旅客出行的首选，但鲜为人知的是，高速列车流线型外形及碰撞吸能结构的设计背后，是中南大学轨道交通空气动力与碰撞安全技术创新团队的辛勤付出。我国首个准高速列车项目设立之初，长沙铁道学院（现中南大学）的几名青年教师敏锐地意识到空气动力学在高速列车发…
阅读更多...
鸿蒙仓颉语言开发教程：自定义弹窗

鸿蒙仓颉语言开发教程：自定义弹窗

假期第一天&#xff0c;祝大家端午节快乐。昨天观看了时代旗舰尊界S800的发布&#xff0c;不得不感慨这车真好啊&#xff5e; 放假闲来无事&#xff0c;继续跟大家分享仓颉语言的开发教程&#xff0c;今天介绍一下自定义弹窗。 仓颉语言中的自定义弹窗和ArkTs类似&#xff0c…
阅读更多...
shp转3d tiles在cesium渲染楼宇白膜

shp转3d tiles在cesium渲染楼宇白膜

shp文件一般做gis的人都知道它是干嘛的&#xff0c;它是一种地理信息系统矢量数据格式&#xff0c;主要用于存储地理空间数据。但是在cesium中&#xff0c;通过Cesium3DTileset渲染白膜只能渲染3d tiles文件格式。所以我们需要工具去将shp文件转换成3d tiles格式。 我是使用的…
阅读更多...
郑钦文请球童用帽子将蜜蜂送离场地 法网8强之路

郑钦文请球童用帽子将蜜蜂送离场地 法网8强之路

北京时间6月1日晚，法国网球公开赛1/8决赛中，郑钦文以7-6（5）、1-6、6-3战胜萨姆索诺娃，首次闯入法网8强。她还获得了430积分和44万欧元奖金（约合人民币359万元）。首盘比赛中，双方开局平稳，比分交替上升。进入中段后，两人互相破发，比赛变得越来越激烈，最终进入抢七局…
阅读更多...
俄版珍珠港？俄军事博主呼吁报复 乌无人机袭击引发紧张局势

俄版珍珠港？俄军事博主呼吁报复 乌无人机袭击引发紧张局势

就在俄乌定于6月2日举行的第二轮直接谈判前夕，俄罗斯境内发生了一系列袭击事件。当地时间6月1日，俄罗斯境内有五个空军基地遭遇大规模无人机袭击，乌克兰安全局宣称对此负责。这是乌军自俄乌冲突爆发以来对俄领土发动的最具渗透性的袭击之一。俄罗斯国防部认定这是一次“恐怖…
阅读更多...
HarmonyOS鸿蒙开发，Text组件作为容器使用（ImageSpan/Span）快速掌握

HarmonyOS鸿蒙开发，Text组件作为容器使用（ImageSpan/Span）快速掌握

Text作为容器使用的时候&#xff0c;里面可以使用ImageSpan存放图片&#xff0c;Span用来存放文字 文本显示 (Text/Span)-使用文本-UI开发 (ArkTS声明式开发范式)-ArkUI&#xff08;方舟UI框架&#xff09;-应用框架 - 华为HarmonyOS开发者 例如&#xff1a;&#xff08;提供给…
阅读更多...
鸿蒙HarmonyOS 5.0开发实战：长列表滑动到指定列表项动效实现案例

鸿蒙HarmonyOS 5.0开发实战：长列表滑动到指定列表项动效实现案例

往期鸿蒙5.0全套实战文章必看&#xff1a;&#xff08;文中附带鸿蒙5.0全栈学习资料&#xff09; 鸿蒙开发核心知识点&#xff0c;看这篇文章就够了 最新版&#xff01;鸿蒙HarmonyOS Next应用开发实战学习路线 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南 鸿蒙应用开发实战…
阅读更多...
【HarmonyOS 5】App Linking 应用间跳转详解

【HarmonyOS 5】App Linking 应用间跳转详解

目录 什么是 App Linking 使用场景 工作原理 如何开发 1.开通 App Linking 2.确定域名 3.服务端部署 applinking.json 文件 4.AGC绑定域名 5.项目配置 6.组装聚合链接 7.解析聚合链接中的参数 其他 如何获取应用ID 如何在应用未安装时点击链接跳转至应用市场 什…
阅读更多...
HarmonyOS Next 用户通知服务Notification Kit介绍与实战

HarmonyOS Next 用户通知服务Notification Kit介绍与实战

1、用户通知服务Notification Kit介绍 Notification Kit&#xff08;用户通知服务&#xff09;为开发者提供本地通知发布通道&#xff0c;开发者可借助Notification Kit将应用产生的通知直接在客户端本地推送给用户&#xff0c;本地通知根据通知类型及发布场景会产生对应的铃声…
阅读更多...
推荐文章

Copyright @ 2022~2023