VLC RTSP HTML5 transcoding-CodePudding

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

The RTSP server is the

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

CodePudding user response：

The rtsp-simple-server can publish either RTSP or RTMP (

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

CodePudding user response：

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.