rtsp用ffmpeg转hls播放

最新推荐文章于 2024-08-13 16:21:22 发布

Henry_Wu001

最新推荐文章于 2024-08-13 16:21:22 发布

阅读量786

点赞数

分类专栏： rtsp rtp protocol 文章标签： ffmpeg

原文链接：https://dev.to/tejasvi2/rtsp-stream-to-web-browser-using-ffmpeg-1cb

版权

protocol 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

rtp

9 篇文章 0 订阅

订阅专栏

rtsp

8 篇文章 0 订阅

订阅专栏

文章介绍了如何使用FFMPEG将RTSP流转换为HLS，以便在Web浏览器中播放。首先，RTSP是用于在线视频流的协议，适用于IP摄像头流。由于RTSP不能直接通过HTTP流式传输，因此需要FFMPEG将其转换为HLS。接着，通过运行FFMPEG命令将RTSP流实时转换为HLS。最后，利用HLS.js库和HTML代码，可以将HLS流传递给Web浏览器进行播放。

摘要由CSDN通过智能技术生成

If you need to stream your video from the webcam to your browser webpage.
To achieve this I have tried a few different ways but none of them is as good as converting RTSP to HLS and then pass to Browser.

We will follow the below steps

RTSP stream
Understanding FFMPEG
Converting RTSP TO HLS
Passing HLS to a web browser

1.RTSP Stream
RTSP, also known as Real-Time Streaming Protocol, is a lesser-known protocol for streaming video online. This protocol was designed to control the streaming servers used in entertainment and communications systems.

When the RTSP controls the server to client connection, video-on-demand streams are used; when it controls the client to server connection, RTSP utilizes voice recording streams.

RTSP commonly is used for Internet Protocol (IP) camera streaming, such as those coming from CCTV or IP cameras.
Rather than forcing your viewers to download an entire video before watching it, the RTSP stream allows them to watch your content before the download is complete.

You cannot directly stream RTSP over HTTP. Because of this, there is no easy, straightforward way to stream RTSP in a web browser, as RTSP is designed more for streaming video on private networks such as security systems within a business. However, you can stream RTSP using additional software that’s embedded onto your website.
Furthermore, to achieve this I have used FFMPEG

2. Understanding FFMPEG

FFmpeg is a command-line tool that converts audio or video formats. It can also capture and encode in real-time from various hardware and software sources such as a TV capture card.
Basically, it is a wrapper that converts RTSP to HLS.
(HLS stands for HTTP Live Streaming. In short, HLS is a media streaming protocol for delivering visual and audio media to viewers over the internet and supported by the web browser)

Check this FFMPEG for more information

3. Converting RTSP TO HLS

To Achieve this we have to use FFMPEG commands.
Basically from node, I will run bash file which has those commands this will run in the background and when it receives RTSP stream It parallelly changes them to HLS.

4. Passing HLS to a web browser

we are almost done because passing HLS to a web browser is easy.

I hope you guys got a basic idea about this conversion.

Remember to run this we need a server to run in the background it can be simple HTTP-SERVER or NGX-SERVER.

Code Implementation

Index.html

<!DOCTYPE html>
<html>
<head>
  <title>Live Cam</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<body>
  <!-- Use this if you only support Safari!!
    <div id="player">
        <video id="video" autoplay="true" controls="controls">
            <source src="http://192.1xx.x.1xx:8080/playlist.m3u8" />
            Your browser does not support HTML5 streaming!
        </video>
    </div>
-->
  <video id="video" autoplay="true" controls="controls" type='application/x-mpegURL'></video>
  <script>
    if (Hls.isSupported()) {
      var video = document.getElementById('video');
      var hls = new Hls();
      // bind them together
      hls.attachMedia(video);
      hls.on(Hls.Events.MEDIA_ATTACHED, function () {
        console.log("video and hls.js are now bound together !");
        hls.loadSource("http://192.1xx.x.1xx:8080/playlist.m3u8");
        hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
        });
      });
    }
  </script>
</body>
</html>

In code you can see I have added the HLS CDN link you can use NPM Package too.
You can see in this line code hls.loadSource("http://192.1xx.x.1xx:8080/playlist.m3u8");

My HTTP-SERVER is running on http://192.1xx.x.1xx:8080 and /playlist.m3u8 I will come to this.

setup-ffmpeg.sh

#!/bin/bash
VIDSOURCE="rtsp://192.1xx.x.xxx:5554"
AUDIO_OPTS="-c:a aac -b:a 160000 -ac 2"
VIDEO_OPTS="-s 854x480 -c:v libx264 -b:v 800000"
OUTPUT_HLS="-hls_time 10 -hls_list_size 10 -start_number 1"
ffmpeg -i "$VIDSOURCE" -y $AUDIO_OPTS $VIDEO_OPTS $OUTPUT_HLS playlist.m3u8

In the bash file, I have provided VIDSOURCE="rtsp://192.1xx.x.xxx:5554" RTSP link.
You can see it at the end playlist.m3u8. This will create a file playlist.m3u8 and start dumping stream one after another so at the end we will refer to this file.

When you run the bash file you can see the changes in your folder like this