html播放rtsp低延时(局域网测试500ms左右）

CHHC1880

已于 2022-10-14 10:41:05 修改

阅读量1.5k 流媒体文章标签： html 前端 webrtc rtsp

于 2022-10-14 10:35:37 首次发布

本文链接：https://blog.csdn.net/arno1988/article/details/127315606

流媒体专栏收录该内容

9 篇文章 1 订阅

采取的方案

RTSPtoWebRTC + jswebrtc

开源项目：

流媒体：https://github.com/deepch/RTSPtoWebRTC

播放器：https://gitee.com/kernelj/jswebrtc

基本原理：

通过浏览器和RTSPtoWebRTC交换sdp信息，然后读取rtp包或者发送rtp的方式进行

方案1：通过RTSPtoWebRTC config.json 标记流id及流地址，接口请求时，在回传音视频数据

<script>
        var video = document.getElementById('video-webrtc');
        var url = 'webrtc://127.0.0.1:8083/stream/1';
        var player = new JSWebrtc.Player(url, { video: video, autoplay: true, onPlay: (obj) => { console.log("start play") } });
        //player.stop();
    </script>

方案2：调用jswebrtc.min.js时，传入流媒体服务器地址，rtsp地址，流媒体服务器接到请求时再去拉流，生成并保存流id，下次再有相同的rtsp请求时，直接返回音视频信息

    <script>
        var video = document.getElementById('video-webrtc');
        var url = "http://192.168.0.56:8083"; 
        var player = new JSWebrtc.Player(url, { video: video, rtspurl: 'rtsp://192.168.0.109:554/rtp/34020000001320000012-34020000001320000012', autoplay: true, onPlay: (obj) => { console.log("start play") } });
        //player.stop();
    </script>

程序后台地址：localhost:8083

配置文件的两种配置方式

配置1：通过配置文件取流，流id以live开头

{
  "server": {
    "http_port": ":8083"
  },
  "streams": {
    "live1": {
      "on_demand": false,
      "disable_audio": true,
      "url": "rtsp://192.168.0.109:554/rtp/34020000001110000087-34020000001320000112"
    },
    "live2": {
      "on_demand": false,
      "disable_audio": true,
      "url": "rtsp://192.168.0.109:554/rtp/34020000001110000087-34020000001320000113"
    },
    "live3": {
      "on_demand": false,
      "disable_audio": true,
      "url": "rtsp://192.168.0.109:554/rtp/34020000001110000087-34020000001320000114"
    },
    "live4": {
      "on_demand": false,
      "disable_audio": true,
      "url": "rtsp://192.168.0.109:554/rtp/34020000001110000087-34020000001320000115"
    },
    "live5": {
      "on_demand": false,
      "disable_audio": true,
      "url": "rtsp://192.168.0.109:554/rtp/34020000001110000087-34020000001320000116"
    },
    "live6": {
      "on_demand": false,
      "disable_audio": true,
      "url": "rtsp://192.168.0.109:554/rtp/34020000001110000087-34020000001320000117"
    },
    "live7": {
      "on_demand": false,
      "disable_audio": true,
      "url": "rtsp://192.168.0.109:554/rtp/34020000001110000087-34020000001320000118"
    },
    "live8": {
      "on_demand": false,
      "disable_audio": true,
      "url": "rtsp://192.168.0.109:554/rtp/34020000001320000021-34020000001310000021"
    },
    "live9": {
      "on_demand": false,
      "disable_audio": true,
      "url": "rtsp://192.168.0.109:554/rtp/34020000001320000020-34020000001320000020"
    }
  }
}

配置2：通过api取流,流id从1开始

{
  "server": {
    "http_port": ":8083"
  },
  "streams": {

  }
}

程序启动后访问8083，如果没有流，提示：No Stream Found (add stream and reload page)

效果