VLC RTSP HTML5 transcoding

Question

I'm trying to get audio streaming on an HTML page from an RTSP server.

The RTSP server is the rtsp-simple-server running a command line below.
./rtsp-simple-server rtsp-simple-server.yml.
The configure file is the default.

The stream player is FFmpeg running a command line below.
ffmpeg -re -stream_loop -1 -i myaudio.mp3 -c copy -f rtsp -rtsp_transport tcp rtsp://localhost:8554/mystream

The console log at the time the rtsp-simple-server and the ffmpeg are started is below.

2022/05/29 19:06:38 INF rtsp-simple-server v0.18.4
2022/05/29 19:06:38 INF [RTSP] listener opened on :8554 (TCP), :8000 (UDP/RTP), :8001 (UDP/RTCP)
2022/05/29 19:06:38 INF [RTMP] listener opened on :1935
2022/05/29 19:06:38 INF [HLS] listener opened on :8888
2022/05/29 19:09:16 INF [RTSP] [conn [::1]:62737] opened
2022/05/29 19:09:16 INF [RTSP] [session 271690815] created by [::1]:62737
2022/05/29 19:09:16 INF [RTSP] [session 271690815] is publishing to path 'mystream', 1 track with TCP

And the time the rtsp path(rtsp://localhost:8554/mystream) is opened by VLC, the contents can be played properly. The additional console log at the time is below.

2022/05/29 19:13:19 INF [RTSP] [conn 127.0.0.1:62780] opened
2022/05/29 19:13:19 INF [RTSP] [session 734209460] created by 127.0.0.1:62780
2022/05/29 19:13:19 INF [RTSP] [session 734209460] is reading from path 'mystream', 1 track with UDP
2022/05/29 19:13:29 INF [RTSP] [session 734209460] destroyed (teared down by 127.0.0.1:62780)
2022/05/29 19:13:29 INF [RTSP] [conn 127.0.0.1:62780] closed (EOF)
2022/05/29 19:13:29 INF [RTSP] [conn 127.0.0.1:62781] opened
2022/05/29 19:13:29 INF [RTSP] [session 445756113] created by 127.0.0.1:62781
2022/05/29 19:13:29 INF [RTSP] [session 445756113] is reading from path 'mystream', 1 track with TCP

However, I open the rtsp streaming from the VLC's "Network" tab like below,

and configure the "Stream output" like below,

and I tried to get this streaming from an HTML page like below,

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>transcode test</title>
  </head>
  <body>
    <h1>transcode test</h1>
    <audio src="http://localhost:9999/mystream" autoplay="autoplay"></audio>
  </body>
</html>

the browser console displays Failed to load resource: the server responded with a status of 404 (Not found). I've already tried other ports(etc. 8080).

So, how can I get the rtsp stream from the RTSP server on an HTML page. Any idea?

My environment.

Browser: Microsoft edge
OS: MacOS 11.6.5
rtsp-simple-server: 0.18.4
FFmpeg: 5.0.1
VLC: 3.0.17.3

score 0 · Answer 1 · answered May 30 '22 at 12:32

The rtsp-simple-server can publish either RTSP or RTMP (https://github.com/aler9/rtsp-simple-server):

Unfortunately browsers typically cannot play either RTMP or RTSP natively.

The typical approach is to convert the RTSP stream into something that a browser can play natively or via a common HTML5 based player like videojs, Shaka player etc, e.g. a HLS stream.

This is a common scenario, although many people are focused on video rather than just an audio stream as in your case. You will find multiple guides to help with this, many ffmpeg command based - e.g. see this answer: https://stackoverflow.com/a/60082821/334402

ddg363 · Answer 2 · 2022-05-30T18:28:23.090

0

If you're using RTSP streams you'll need to use an HLS compatible player like Video.js or hls.js to make it work in a browser as modern web browsers don't support it natively.

I'm personally using a similar RTSP-Simple-Server setup with the Hls.js code block embedded into a html file. It's quite simple to add to your page and use your stream as the source.

edited May 30 '22 at 18:28

answered May 30 '22 at 18:25

ddg363

1
1

Thank you for your helpful reply. I tried hls.js, and the errors no longer occur, however, the contents could not be played. I've checked the server log, and the connection from the browser to the server could be established properly. So, I accessed the server(URL: http://localhost:8888/mystream) using VLC as a checking, and the result was the same(No errors, Keep silence, Connection is established). Next, I used [react-player](https://github.com/cookpete/react-player), "payload is too short" warning has occurred on the server. Is this the wrong way to encode files to publish? Any idea ? – Pierogi Jun 01 '22 at 07:01
Are you using 'localhost:8888/mystream/index.m3u8' as the source inside the HLS.js code block? All HLS stream requests to rtsp-s-s should point directly to the playlist file instead of the base-url. – ddg363 Jun 11 '22 at 02:31

VLC RTSP HTML5 transcoding

2 Answers2