开箱即用的GB28181协议视频平台 WVP-Pro

WVP 是一个开箱即用的GB28181协议视频平台，完全开源，且使用MIT许可协议。可以在保留版权信息的基础上商用。。负责实现核心信令与设备管理后台部分，支持NAT穿透，支持海康、大华、宇视等品牌的IPC、NVR接入。支持国标级联，支持将不带国标功能的摄像机/直播流/直播推流转发到其他国标平台。

支持浏览器无插件播放摄像头视频。支持国标设备(摄像机、平台、NVR等)设备接入支持非国标(onvif, rtsp, rtmp，直播设备等等)设备接入，充分利旧。支持国标级联。多平台级联。跨网视频预览。支持跨网网闸平台互联。

WVP使用的端口介绍

端口号	描述	类型
80	zlm的http端口	tcp
554	zlm的rtsp端口，非必须	tcp&udp
1935	zlm的rtmp端口，非必须	tcp
5060	28181sip信令端口	tcp&udp
6379	redis端口，非必须	tcp
18080	wvp的http管理端口	tcp
18081	录像管理服务端口，非必须	tcp
30000-30500	zlm接收视频推流端口	tcp&udp

Docker 化部署

docker pull 648540858/wvp_pro
docker run  --env WVP_IP="你的IP" -it -p 18080:18080 -p 30000-30500:30000-30500/udp -p 30000-30500:30000-30500/tcp -p 80:80 -p 5060:5060 -p 5060:5060/udp 648540858/wvp_pro

访问： http://你的IP:18080⁠, 默认用户名admin, 密码admin.

摄像头设备关键配置

拉流设置，WVP服务器的ZLM上需要配置拉流代理，

如果设备是RSTP协议的，设备的码流如下：

第一码流：rtsp://admin:admin@192.168.1.88/11

第二码流：rtsp://admin:admin@192.168.1.88/12

我们拉取第2码流，

拉取后，WVP服务器上就可以显示实时视频了。

Thingsboard仪表板上获取视频方式：

第1步，登录WVP服务器，找到在线文档

找到拉流代理文档接口

第2步，用VLC media player 验证是否能访问

第3步，在ThingsBoard仪表板中添加HTML card 部件

写入代码

  <!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>WVP 视频播放</title>
  <script>
    function loadScript(src, callback) {
      var script = document.createElement('script');
      script.src = src;
      script.onload = callback;
      script.onerror = function () {
        document.getElementById('video-container').innerText = 'hls.js 库加载失败，请检查网络连接';
      };
      document.head.appendChild(script);
    }
    loadScript('https://cdn.jsdelivr.net/npm/hls.js@latest', function () {
      const hlsUrl = '您的拉流地址';
      var video = document.getElementById('videoPlayer');
      if (Hls.isSupported()) {
        const hls = new Hls();
        hls.loadSource(hlsUrl);
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
          video.play();
        });
      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        // Safari 原生支持 HLS
        video.src = hlsUrl;
        video.addEventListener('loadedmetadata', function () {
          video.play();
        });
      } else {
        document.getElementById('video-container').innerText = '您的浏览器不支持 HLS 播放';
      }
    });
  </script>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: #000;
    }
    #video-container {
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
      padding: 16px;
    }
    video {
      width: 100%;
      height: auto;
      background: #000;
    }
  </style>
</head>
<body>
  <div id="video-container">
    <video id="videoPlayer" controls autoplay muted></video>
  </div>
</body>
</html>

注意：有些浏览器不支持音频

原创文章，作者：Gary，如若转载，请注明出处：https://www.cpw5.top/1443.html

淘宝小店：陈皮王五工作室