14 rtsp视频服务基于 RTSPtoWeb 来转换为前端可用的服务

作者：不正经 | 2024-02-28 03:37:13

踩

rtsptoweb

前言

接前面两篇文章 rtsp视频服务转换为 rtmp服务转换为前端可用的服务, rtsp视频服务基于node+ffmpeg 转换为 flv 视频服务

继续讨论前端播放 rtsp 视频服务

这里使用 GitHub - deepch/RTSPtoWeb: RTSP Stream to WebBrowser 作为后台服务, 来做 rtsp 视频服务的转换, 它可以转换为 hls, hls-ll, websocket, webrtc, rtsp 的服务

RTSPToWeb 服务的启动

这里基于 docker 启动


version: "2"
 
services:
  rtsp-2-web:
    container_name: rtsp-2-web
    image: ghcr.io/deepch/rtsptoweb:latest
    restart: always
    ports:
      - 8083:8083
      - 5541:5541
    volumes:
      - ./config:/config

配置 /config/config.json


{
  "server": {
    "debug": true,
    "log_level": "info",
    "http_demo": true,
    "http_debug": false,
    "http_login": "demo",
    "http_password": "demo",
    "http_port": ":8083",
    "ice_servers": [
      "stun:stun.l.google.com:19302"
    ],
    "rtsp_port": ":5541"
  },
  "streams": {
    "hls": {
      "name": "test_rtps",
      "channels": {
        "test_rtps": {
          "name": "test_rtps",
          "url": "rtsp://192.168.0.104:8554/rtsp/test_rtsp",
          "on_demand": true,
          "debug": false,
          "audio": true,
          "status": 0
        }
      }
    }
  },
  "channel_defaults": {
    "on_demand": true
  }
}

启动 RTSPToWeb


master:rtsp-2-web jerry$ docker-compose up -d 
WARNING: The TIME_ZONE variable is not set. Defaulting to a blank string.
Creating network "rtsp-2-web_default" with the default driver
Creating rtsp-2-web ... done

配置的 rtsp 的各种访问方式如下


hls : http://localhost:8083/stream/hls/channel/test_rtps/hls/live/index.m3u8
hls-ll : http://localhost:8083/stream/hls/channel/test_rtps/hlsll/live/index.m3u8
websocket : ws://localhost:8083/stream/hls/channel/test_rtps/mse?uuid=hls&channel=test_rtps
webrtc : http://localhost:8083/stream/hls/channel/test_rtps/webrtc
rtsp : rtsp://localhost:5541/hls/test_rtps

RTSPToWeb 的管理界面访问 rtsp 服务

websocket 的可以正确的拿到数据并展示

hls 可以拿到数据, 但是不能正确展示

hls-ll 拿不到正确的数据, 并且不能正确展示

webrtc 就搞不清楚什么状况了, 请求是正确的, 没有持续的请求, 但是播放不出来

hls 的播放

hls 访问的 url 为 http://localhost:8083/stream/hls/channel/test_rtps/hls/live/index.m3u8

但是这个 demo 里面展示不出来, RTSPtoWeb 官方的 demo 也展示不出来, vlc 中也播放不出来, 但是能够看到进度信息

但是从接口上来看是能够正确拿到数据的


<!DOCTYPE html>
<html>
 
<head>
  <title>M3u8Usage</title>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <script src="https://cdn.staticfile.org/hls.js/1.1.2/hls.min.js"></script>
  <script src="https://cdn.staticfile.org/dplayer/1.26.0/DPlayer.min.js"></script>
  <style>
    #dplayer {
      width: 500px
    }
  </style>
  <script>
    function init() {
      const dp = new DPlayer({
        element: document.getElementById('dplayer'),
        video: {
          //  pic: videoInfo.img, // 封面
          url: "http://localhost:8083/stream/hls/channel/test_rtps/hls/live/index.m3u8",
          type: 'customHls',
          customType: {
            customHls: function (video, player) {
              const hls = new Hls()
              hls.loadSource(video.src)
              hls.attachMedia(video)
            }
          }
        }
      })
    }
  </script>
</head>
 
<body onload="init()">
<div>
  <div id="dplayer"></div>
</div>
</body>
</html>

M3u8Usage.html 中接口数据请求正常, 但是加载不出来

vlc 中可以看到进度条

hls-ll 的播放

hls-ll 访问的是 http://localhost:8083/stream/hls/channel/test_rtps/hlsll/live/index.m3u8

但是这个 demo 里面展示不出来, RTSPtoWeb 官方的 demo 也展示不出来, vlc 中可以播放不出来, 但是能够看到进度信息

vlc 的播放

websocket 的播放

websocket 访问的是 ws://localhost:8083/stream/hls/channel/test_rtps/mse?uuid=hls&channel=test_rtps


<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style>
    body, center {
      padding: 0;
      margin: 0;
    }
 
    .v-container {
      width: 640px;
      height: 360px;
      border: solid 1px red;
    }
 
    video {
      width: 100%;
      height: 100%;
    }
  </style>
 
</head>
<body>
<div class="v-container">
 
  <video id="player1" muted autoplay="autoplay" preload="auto" controls="controls">
  </video>
 
</div>
 
<script>
  let mseStreamingStarted = true
  let mseQueue = []
  let url = 'ws://localhost:8083/stream/hls/channel/test_rtps/mse?uuid=hls&channel=test_rtps'
  let mse = new MediaSource();
  document.getElementById("player1").src = window.URL.createObjectURL(mse);
  mse.addEventListener('sourceopen', function() {
    let ws = new WebSocket(url);
    ws.binaryType = "arraybuffer";
    ws.onopen = function(event) {
      console.log('Connect to ws');
    }
    ws.onmessage = function(event) {
      let data = new Uint8Array(event.data);
      if (data[0] == 9) {
        decoded_arr = data.slice(1);
        if (window.TextDecoder) {
          mimeCodec = new TextDecoder("utf-8").decode(decoded_arr);
        } else {
          mimeCodec = Utf8ArrayToStr(decoded_arr);
        }
        if(mimeCodec.indexOf(',')>0){
          videoSound=true;
        }
        mseSourceBuffer = mse.addSourceBuffer('video/mp4; codecs="' + mimeCodec + '"');
        mseSourceBuffer.mode = "segments"
        mseSourceBuffer.addEventListener("updateend", pushPacket);
 
      } else {
        readPacket(event.data);
      }
    };
  }, false);
 
  function pushPacket() {
    if (!mseSourceBuffer.updating) {
      if (mseQueue.length > 0) {
        packet = mseQueue.shift();
        mseSourceBuffer.appendBuffer(packet);
      } else {
        mseStreamingStarted = false;
      }
    }
    if (document.getElementById("player1").buffered.length > 0) {
      if (typeof document.hidden !== "undefined" && document.hidden && !videoSound) {
 
        document.getElementById("player1").currentTime = document.getElementById("player1").buffered.end((document.getElementById("player1").buffered.length - 1)) - 0.5;
      }
    }
  }
 
  function readPacket(packet) {
    if (!mseStreamingStarted) {
      mseSourceBuffer.appendBuffer(packet);
      mseStreamingStarted = true;
      return;
    }
    mseQueue.push(packet);
    if (!mseSourceBuffer.updating) {
      pushPacket();
    }
  }
</script>
 
</body>
</html>