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

Posted 2022-11-24 蓝风9

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了14 rtsp视频服务基于 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>

展示效果如下