From f1c919b429a3e0802eff6c812e76f1822b2264d2 Mon Sep 17 00:00:00 2001
From: Alessandro Ros <aler9.dev@gmail.com>
Date: Fri, 24 Apr 2026 17:37:20 +0200
Subject: [PATCH] docs: merge 'embed streams' and 'web browsers' pages (#5684)

---
 docs/1-kickoff/1-introduction.md              |   8 +-
 docs/2-features/05-configuration.md           |   2 +-
 docs/2-features/06-authentication.md          |   4 +-
 .../17-embed-streams-in-a-website.md          | 178 -----------------
 ...8-start-on-boot.md => 17-start-on-boot.md} |   0
 .../{19-logging.md => 18-logging.md}          |   2 +-
 docs/2-features/{20-hooks.md => 19-hooks.md}  |   0
 .../{21-control-api.md => 20-control-api.md}  |   0
 .../{22-metrics.md => 21-metrics.md}          |   0
 .../{23-performance.md => 22-performance.md}  |   0
 ...eatures.md => 23-srt-specific-features.md} |   0
 ...ures.md => 24-webrtc-specific-features.md} |   0
 ...atures.md => 25-rtsp-specific-features.md} |   0
 ...atures.md => 26-rtmp-specific-features.md} |   0
 ...ket-loss.md => 27-decrease-packet-loss.md} |   0
 docs/3-publish/01-srt-clients.md              |   2 +-
 docs/3-publish/03-webrtc-clients.md           |   4 +-
 docs/3-publish/05-rtsp-clients.md             |   2 +-
 docs/3-publish/06-rtsp-cameras-and-servers.md |   2 +-
 docs/3-publish/07-rtmp-clients.md             |   2 +-
 docs/3-publish/15-gstreamer.md                |   4 +-
 docs/4-read/01-srt.md                         |   2 +-
 docs/4-read/02-webrtc.md                      |   4 +-
 docs/4-read/03-rtsp.md                        |   2 +-
 docs/4-read/04-rtmp.md                        |   2 +-
 docs/4-read/07-gstreamer.md                   |   2 +-
 docs/4-read/13-web-browsers.md                | 185 +++++++++++++++++-
 docs/5-references/2-control-api.md            |   2 +-
 docs/redirects.yaml                           |   2 +
 internal/core/core.go                         |   2 +-
 internal/core/path.go                         |   2 +-
 internal/core/path_manager.go                 |   4 +-
 internal/servers/hls/server.go                |   4 +-
 internal/servers/rtmp/server.go               |   6 +-
 internal/servers/rtsp/server.go               |  10 +-
 internal/servers/srt/server.go                |   6 +-
 internal/servers/webrtc/server.go             |   6 +-
 37 files changed, 225 insertions(+), 226 deletions(-)
 delete mode 100644 docs/2-features/17-embed-streams-in-a-website.md
 rename docs/2-features/{18-start-on-boot.md => 17-start-on-boot.md} (100%)
 rename docs/2-features/{19-logging.md => 18-logging.md} (97%)
 rename docs/2-features/{20-hooks.md => 19-hooks.md} (100%)
 rename docs/2-features/{21-control-api.md => 20-control-api.md} (100%)
 rename docs/2-features/{22-metrics.md => 21-metrics.md} (100%)
 rename docs/2-features/{23-performance.md => 22-performance.md} (100%)
 rename docs/2-features/{24-srt-specific-features.md => 23-srt-specific-features.md} (100%)
 rename docs/2-features/{25-webrtc-specific-features.md => 24-webrtc-specific-features.md} (100%)
 rename docs/2-features/{26-rtsp-specific-features.md => 25-rtsp-specific-features.md} (100%)
 rename docs/2-features/{27-rtmp-specific-features.md => 26-rtmp-specific-features.md} (100%)
 rename docs/2-features/{28-decrease-packet-loss.md => 27-decrease-packet-loss.md} (100%)

diff --git a/docs/1-kickoff/1-introduction.md b/docs/1-kickoff/1-introduction.md
index 9ff78fb7..a1b5975b 100644
--- a/docs/1-kickoff/1-introduction.md
+++ b/docs/1-kickoff/1-introduction.md
@@ -17,10 +17,10 @@ Main features:
 - [Authenticate](../2-features/06-authentication.md) users with internal, HTTP or JWT authentication
 - [Forward](../2-features/11-forward.md) streams to other servers
 - [Proxy](../2-features/12-proxy.md) requests to other servers
-- [Control](../2-features/21-control-api.md) the server through the Control API
-- [Extract metrics](../2-features/22-metrics.md) from the server in a Prometheus-compatible format
-- [Monitor performance](../2-features/23-performance.md) to investigate CPU and RAM consumption
-- [Run hooks](../2-features/20-hooks.md) (external commands) when clients connect, disconnect, read or publish streams
+- [Control](../2-features/20-control-api.md) the server through the Control API
+- [Extract metrics](../2-features/21-metrics.md) from the server in a Prometheus-compatible format
+- [Monitor performance](../2-features/22-performance.md) to investigate CPU and RAM consumption
+- [Run hooks](../2-features/19-hooks.md) (external commands) when clients connect, disconnect, read or publish streams
 - Compatible with Linux, Windows and macOS, does not require any dependency or interpreter, it's a single executable
 
 Use the menu to navigate through the documentation.
diff --git a/docs/2-features/05-configuration.md b/docs/2-features/05-configuration.md
index aa84ef19..7a1d22b6 100644
--- a/docs/2-features/05-configuration.md
+++ b/docs/2-features/05-configuration.md
@@ -47,7 +47,7 @@ There are several ways to change configuration parameters:
    docker run --rm -it --network=host -e MTX_PATHS_TEST_SOURCE=rtsp://myurl bluenviron/mediamtx:1
    ```
 
-3. Use the [Control API](21-control-api.md).
+3. Use the [Control API](20-control-api.md).
 
 ## Encrypt the configuration
 
diff --git a/docs/2-features/06-authentication.md b/docs/2-features/06-authentication.md
index b4baf721..59a7c057 100644
--- a/docs/2-features/06-authentication.md
+++ b/docs/2-features/06-authentication.md
@@ -298,7 +298,7 @@ Username and password can be passed through the `Authorization: Basic` HTTP head
 Authorization: Basic base64(myuser:mypass)
 ```
 
-When using a web browser, a dialog is first shown to users, asking for credentials, and then the header is automatically inserted into every request. If you need to automatically fill credentials from a parent web page, read [Embed streams in a website](17-embed-streams-in-a-website.md).
+When using a web browser, a dialog is first shown to users, asking for credentials, and then the header is automatically inserted into every request. If you need to automatically fill credentials from a parent web page, read [Embed streams in a website](../4-read/13-web-browsers.md#embed-streams-in-a-website).
 
 If the `Authorization: Basic` header cannot be used (for instance, in software like OBS Studio, which only allows to provide a "Bearer Token"), credentials can be passed through the `Authorization: Bearer` header (i.e. the "Bearer Token" in OBS), where the value is the concatenation of username and password, separated by a colon:
 
@@ -350,4 +350,4 @@ In OBS Studio, this is the "Bearer Token" field.
 
 If the `Authorization: Bearer` token cannot be directly provided (for instance, with web browsers that directly access _MediaMTX_ and show a credential dialog), you can pass the token as password, using an arbitrary user.
 
-In web browsers, if you need to automatically fill credentials from a parent web page, read [Embed streams in a website](17-embed-streams-in-a-website.md).
+In web browsers, if you need to automatically fill credentials from a parent web page, read [Embed streams in a website](../4-read/13-web-browsers.md#embed-streams-in-a-website).
diff --git a/docs/2-features/17-embed-streams-in-a-website.md b/docs/2-features/17-embed-streams-in-a-website.md
deleted file mode 100644
index 88b18b83..00000000
--- a/docs/2-features/17-embed-streams-in-a-website.md
+++ /dev/null
@@ -1,178 +0,0 @@
-# Embed streams in a website
-
-Live streams can be embedded into an external website by using the WebRTC or HLS protocol. Before embedding, check that the stream is ready and can be accessed with intended protocol by using URLs mentioned in [Read a stream](../2-features/04-read.md).
-
-## WebRTC in iframe
-
-The simplest way to embed a live stream in a web page, using the WebRTC protocol, consists in adding an `<iframe>` tag to the body section of the HTML:
-
-```html
-<iframe src="http://mediamtx-ip:8889/mystream" scrolling="no"></iframe>
-```
-
-The iframe can be controlled by adding query parameters to the URL (example: `http://mediamtx-ip:8889/mystream?muted=false`). The following parameters are available:
-
-- `controls` (boolean): whether to show controls. Default is true.
-- `muted` (boolean): whether to start the stream muted. Default is true.
-- `autoplay` (boolean): whether to autoplay the stream. Default is true.
-- `playsInline` (boolean): whether to play the stream without using the entire window of mobile devices. Default is true.
-- `disablepictureinpicture` (boolean): whether to disable the ability to open the stream in a dedicated window. Default is false.
-
-The iframe method is fit for most use cases, but it has some limitations:
-
-- it doesn't allow to pass credentials (username, password or token) from the website to _MediaMTX_; credentials are asked directly to users.
-- it doesn't allow to directly access the video tag, to extract data from it, or to perform dynamic actions.
-
-## WebRTC with JavaScript
-
-In order to overcome the limitations of the iframe-based method, it is possible to load the stream directly inside a `<video>` tag in the web page, through a JavaScript library.
-
-Download [reader.js](https://github.com/bluenviron/mediamtx/blob/{version_tag}/internal/servers/webrtc/reader.js) from the repository and serve it together with the other assets of the website.
-
-If you are using a JavaScript bundler, you can import it by using:
-
-```js
-import "./reader.js";
-```
-
-Otherwise, you can add a `<script>` tag to the `<head>` section of the page:
-
-```html
-<script defer src="./reader.js"></script>
-```
-
-Add a `<video>` tag:
-
-```html
-<video id="myvideo" controls muted autoplay width="640" height="480"></video>
-```
-
-After the video tag, add a script that initializes the stream when the page is fully loaded:
-
-```html
-<script>
-  let reader = null;
-
-  window.addEventListener("load", () => {
-    reader = new MediaMTXWebRTCReader({
-      url: "http://mediamtx-ip:8889/mystream/whep",
-      user: "", // fill if needed
-      pass: "", // fill if needed
-      token: "", // fill if needed
-      onError: (err) => {
-        console.error(err);
-      },
-      onTrack: (evt) => {
-        document.getElementById("myvideo").srcObject = evt.streams[0];
-      },
-      onDataChannel: (evt) => {
-        evt.channel.binaryType = "arraybuffer";
-        evt.channel.onmessage = (evt) => {
-          console.log("data channel message", evt.data);
-        };
-      },
-    });
-  });
-
-  window.addEventListener("beforeunload", () => {
-    if (reader !== null) {
-      reader.close();
-    }
-  });
-</script>
-```
-
-If _MediaMTX_ is hosted on a different domain with respect to the website (in the sample code this is implied), you need to set the `webrtcAllowOrigins` parameter in the configuration file. For example, to allow requests from `https://example.com`:
-
-```yaml
-webrtcAllowOrigins: ["https://example.com"]
-```
-
-The parameter also supports wildcards, for instance `['http://*.example.com']`.
-
-## HLS in iframe
-
-Reading a stream with the HLS protocol introduces some latency, but is usually easier to setup since it doesn't involve managing additional ports that in WebRTC are used to transmit the stream.
-
-The simplest way to embed a live stream in a web page, using the HLS protocol, consists in adding an `<iframe>` tag to the body section of the HTML:
-
-```html
-<iframe src="http://mediamtx-ip:8888/mystream" scrolling="no"></iframe>
-```
-
-The iframe can be controlled by adding query parameters to the URL (example: `http://mediamtx-ip:8888/mystream?muted=false`). The following parameters are available:
-
-- `controls` (boolean): whether to show controls. Default is true.
-- `muted` (boolean): whether to start the stream muted. Default is true.
-- `autoplay` (boolean): whether to autoplay the stream. Default is true.
-- `playsInline` (boolean): whether to play the stream without using the entire window of mobile devices. Default is true.
-- `disablepictureinpicture` (boolean): whether to disable the ability to open the stream in a dedicated window. Default is false.
-
-The iframe method is fit for most use cases, but it has some limitations:
-
-- it doesn't allow to pass credentials (username, password or token) from the website to _MediaMTX_; credentials are asked directly to users.
-- it doesn't allow to directly access the video tag, to extract data from it, or to perform dynamic actions.
-
-## HLS with JavaScript
-
-In order to overcome the limitations of the iframe-based method, it is possible to load the stream directly inside a `<video>` tag in the web page, through the _hls.js_ library.
-
-If you are using a JavaScript bundler, you can import _hls.js_ by adding [its npm package](https://www.npmjs.com/package/hls.js) as dependency and then importing it:
-
-```js
-import Hls from "hls.js";
-```
-
-Otherwise, you can use a `<script>` tag inside the `<head>` section that points to a CDN:
-
-```html
-<script
-  defer
-  src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.6.13/hls.min.js"
-></script>
-```
-
-Add a `<video>` tag:
-
-```html
-<video id="myvideo" controls muted autoplay width="640" height="480"></video>
-```
-
-After the video tag, add a script that initializes the stream when the page is fully loaded:
-
-```html
-<script>
-  window.addEventListener("load", () => {
-    if (Hls.isSupported()) {
-      const hls = new Hls({
-        xhrSetup: function (xhr, url) {
-          let user = ""; // fill if needed
-          let pass = ""; // fill if needed
-          let token = ""; // fill if needed
-
-          if (user !== "") {
-            const credentials = btoa(`${user}:${pass}`);
-            xhr.setRequestHeader("Authorization", `Basic ${credentials}`);
-          } else if (token !== "") {
-            xhr.setRequestHeader("Authorization", `Bearer ${token}`);
-          }
-        },
-      });
-
-      hls.on(Hls.Events.MEDIA_ATTACHED, () => {
-        hls.loadSource("http://mediamtx-ip:8888/mystream/index.m3u8");
-      });
-
-      hls.attachMedia(document.getElementById("myvideo"));
-    }
-  });
-</script>
-```
-
-If _MediaMTX_ is hosted on a different domain with respect to the website (in the sample code this is implied), you need to set the `hlsAllowOrigins` parameter in the configuration file. For example:
-
-```yaml
-hlsAllowOrigins: ["https://example.com"]
-```
-
-The parameter also supports wildcards, for instance `['http://*.example.com']`.
diff --git a/docs/2-features/18-start-on-boot.md b/docs/2-features/17-start-on-boot.md
similarity index 100%
rename from docs/2-features/18-start-on-boot.md
rename to docs/2-features/17-start-on-boot.md
diff --git a/docs/2-features/19-logging.md b/docs/2-features/18-logging.md
similarity index 97%
rename from docs/2-features/19-logging.md
rename to docs/2-features/18-logging.md
index 9db110c5..201913c7 100644
--- a/docs/2-features/19-logging.md
+++ b/docs/2-features/18-logging.md
@@ -37,7 +37,7 @@ Log entries can be queried by using:
 journalctl SYSLOG_IDENTIFIER=mediamtx
 ```
 
-If _MediaMTX_ is also running as a [system service](18-start-on-boot.md), log entries can be queried by using:
+If _MediaMTX_ is also running as a [system service](17-start-on-boot.md), log entries can be queried by using:
 
 ```sh
 journalctl -u mediamtx
diff --git a/docs/2-features/20-hooks.md b/docs/2-features/19-hooks.md
similarity index 100%
rename from docs/2-features/20-hooks.md
rename to docs/2-features/19-hooks.md
diff --git a/docs/2-features/21-control-api.md b/docs/2-features/20-control-api.md
similarity index 100%
rename from docs/2-features/21-control-api.md
rename to docs/2-features/20-control-api.md
diff --git a/docs/2-features/22-metrics.md b/docs/2-features/21-metrics.md
similarity index 100%
rename from docs/2-features/22-metrics.md
rename to docs/2-features/21-metrics.md
diff --git a/docs/2-features/23-performance.md b/docs/2-features/22-performance.md
similarity index 100%
rename from docs/2-features/23-performance.md
rename to docs/2-features/22-performance.md
diff --git a/docs/2-features/24-srt-specific-features.md b/docs/2-features/23-srt-specific-features.md
similarity index 100%
rename from docs/2-features/24-srt-specific-features.md
rename to docs/2-features/23-srt-specific-features.md
diff --git a/docs/2-features/25-webrtc-specific-features.md b/docs/2-features/24-webrtc-specific-features.md
similarity index 100%
rename from docs/2-features/25-webrtc-specific-features.md
rename to docs/2-features/24-webrtc-specific-features.md
diff --git a/docs/2-features/26-rtsp-specific-features.md b/docs/2-features/25-rtsp-specific-features.md
similarity index 100%
rename from docs/2-features/26-rtsp-specific-features.md
rename to docs/2-features/25-rtsp-specific-features.md
diff --git a/docs/2-features/27-rtmp-specific-features.md b/docs/2-features/26-rtmp-specific-features.md
similarity index 100%
rename from docs/2-features/27-rtmp-specific-features.md
rename to docs/2-features/26-rtmp-specific-features.md
diff --git a/docs/2-features/28-decrease-packet-loss.md b/docs/2-features/27-decrease-packet-loss.md
similarity index 100%
rename from docs/2-features/28-decrease-packet-loss.md
rename to docs/2-features/27-decrease-packet-loss.md
diff --git a/docs/3-publish/01-srt-clients.md b/docs/3-publish/01-srt-clients.md
index d335b974..4fe8e932 100644
--- a/docs/3-publish/01-srt-clients.md
+++ b/docs/3-publish/01-srt-clients.md
@@ -8,7 +8,7 @@ srt://localhost:8890?streamid=publish:mystream&pkt_size=1316
 
 Replace `mystream` with any name you want. The resulting stream will be available on path `/mystream`.
 
-If you need to use the standard stream ID syntax instead of the custom one in use by this server, read [Standard stream ID syntax](../2-features/24-srt-specific-features.md#standard-stream-id-syntax).
+If you need to use the standard stream ID syntax instead of the custom one in use by this server, read [Standard stream ID syntax](../2-features/23-srt-specific-features.md#standard-stream-id-syntax).
 
 If you want to publish a stream by using a client in listening mode (i.e. with `mode=listener` appended to the URL), read the next section.
 
diff --git a/docs/3-publish/03-webrtc-clients.md b/docs/3-publish/03-webrtc-clients.md
index ead7971e..44c79df2 100644
--- a/docs/3-publish/03-webrtc-clients.md
+++ b/docs/3-publish/03-webrtc-clients.md
@@ -14,8 +14,8 @@ WHIP is a WebRTC extension that allows to publish streams by using a URL, withou
 http://localhost:8889/mystream/whip
 ```
 
-Be aware that not all browsers can read any codec, check [Codec support in browsers](../2-features/25-webrtc-specific-features.md#codec-support-in-browsers).
+Be aware that not all browsers can read any codec, check [Codec support in browsers](../2-features/24-webrtc-specific-features.md#codec-support-in-browsers).
 
-Depending on the network it might be difficult to establish a connection between server and clients, read [Solving WebRTC connectivity issues](../2-features/25-webrtc-specific-features.md#solving-webrtc-connectivity-issues).
+Depending on the network it might be difficult to establish a connection between server and clients, read [Solving WebRTC connectivity issues](../2-features/24-webrtc-specific-features.md#solving-webrtc-connectivity-issues).
 
 Some clients that can publish with WebRTC and WHIP are [FFmpeg](14-ffmpeg.md), [GStreamer](15-gstreamer.md), [OBS Studio](16-obs-studio.md), [Unity](19-unity.md) and [Web browsers](20-web-browsers.md).
diff --git a/docs/3-publish/05-rtsp-clients.md b/docs/3-publish/05-rtsp-clients.md
index cd128fcf..4ceecbbb 100644
--- a/docs/3-publish/05-rtsp-clients.md
+++ b/docs/3-publish/05-rtsp-clients.md
@@ -10,7 +10,7 @@ The resulting stream will be available on path `/mystream`.
 
 Some clients that can publish with RTSP are [FFmpeg](14-ffmpeg.md), [GStreamer](15-gstreamer.md), [OBS Studio](16-obs-studio.md), [Python and OpenCV](17-python-opencv.md).
 
-Advanced RTSP features and settings are described in [RTSP-specific features](../2-features/26-rtsp-specific-features.md).
+Advanced RTSP features and settings are described in [RTSP-specific features](../2-features/25-rtsp-specific-features.md).
 
 ## MPEG-TS inside RTSP
 
diff --git a/docs/3-publish/06-rtsp-cameras-and-servers.md b/docs/3-publish/06-rtsp-cameras-and-servers.md
index ba6a1d69..53573fe0 100644
--- a/docs/3-publish/06-rtsp-cameras-and-servers.md
+++ b/docs/3-publish/06-rtsp-cameras-and-servers.md
@@ -44,4 +44,4 @@ paths:
 
 All available parameters are listed in the [configuration file](../5-references/1-configuration-file.md).
 
-Advanced RTSP features and settings are described in [RTSP-specific features](../2-features/26-rtsp-specific-features.md).
+Advanced RTSP features and settings are described in [RTSP-specific features](../2-features/25-rtsp-specific-features.md).
diff --git a/docs/3-publish/07-rtmp-clients.md b/docs/3-publish/07-rtmp-clients.md
index c0cf18f4..ab93f516 100644
--- a/docs/3-publish/07-rtmp-clients.md
+++ b/docs/3-publish/07-rtmp-clients.md
@@ -1,6 +1,6 @@
 # RTMP clients
 
-RTMP is a protocol that allows to read and publish streams. It supports encryption, read [RTMP-specific features](../2-features/27-rtmp-specific-features.md). Streams can be published to the server by using the URL:
+RTMP is a protocol that allows to read and publish streams. It supports encryption, read [RTMP-specific features](../2-features/26-rtmp-specific-features.md). Streams can be published to the server by using the URL:
 
 ```
 rtmp://localhost/mystream
diff --git a/docs/3-publish/15-gstreamer.md b/docs/3-publish/15-gstreamer.md
index 793a3527..83d63a19 100644
--- a/docs/3-publish/15-gstreamer.md
+++ b/docs/3-publish/15-gstreamer.md
@@ -20,7 +20,7 @@ d.video_0 ! rtspclientsink location=rtsp://localhost:8554/mystream
 
 The resulting stream will be available on path `/mystream`.
 
-For advanced options, read [RTSP-specific features](../2-features/26-rtsp-specific-features.md).
+For advanced options, read [RTSP-specific features](../2-features/25-rtsp-specific-features.md).
 
 ## GStreamer and RTMP
 
@@ -38,7 +38,7 @@ videotestsrc ! video/x-raw,width=1280,height=720,format=I420 ! x264enc speed-pre
 audiotestsrc ! audioconvert ! avenc_aac ! mux.
 ```
 
-For advanced options, read [RTSP-specific features](../2-features/26-rtsp-specific-features.md).
+For advanced options, read [RTSP-specific features](../2-features/25-rtsp-specific-features.md).
 
 ## GStreamer and WebRTC
 
diff --git a/docs/4-read/01-srt.md b/docs/4-read/01-srt.md
index 9c3b5982..e90ccbf0 100644
--- a/docs/4-read/01-srt.md
+++ b/docs/4-read/01-srt.md
@@ -8,6 +8,6 @@ srt://localhost:8890?streamid=read:mystream
 
 Replace `mystream` with the path name.
 
-If you need to use the standard stream ID syntax instead of the custom one in use by this server, read [Standard stream ID syntax](../2-features/24-srt-specific-features.md#standard-stream-id-syntax).
+If you need to use the standard stream ID syntax instead of the custom one in use by this server, read [Standard stream ID syntax](../2-features/23-srt-specific-features.md#standard-stream-id-syntax).
 
 Some clients that can read with SRT are [FFmpeg](06-ffmpeg.md), [GStreamer](07-gstreamer.md) and [VLC](08-vlc.md).
diff --git a/docs/4-read/02-webrtc.md b/docs/4-read/02-webrtc.md
index a0e64bd6..eed25c22 100644
--- a/docs/4-read/02-webrtc.md
+++ b/docs/4-read/02-webrtc.md
@@ -12,8 +12,8 @@ WHEP is a WebRTC extension that allows to read streams by using a URL, without p
 http://localhost:8889/mystream/whep
 ```
 
-Be aware that not all browsers can read any codec, check [Codec support in browsers](../2-features/25-webrtc-specific-features.md#codec-support-in-browsers).
+Be aware that not all browsers can read any codec, check [Codec support in browsers](../2-features/24-webrtc-specific-features.md#codec-support-in-browsers).
 
-Depending on the network it may be difficult to establish a connection between server and clients, read [Solving WebRTC connectivity issues](../2-features/25-webrtc-specific-features.md#solving-webrtc-connectivity-issues).
+Depending on the network it may be difficult to establish a connection between server and clients, read [Solving WebRTC connectivity issues](../2-features/24-webrtc-specific-features.md#solving-webrtc-connectivity-issues).
 
 Some clients that can read with WebRTC and WHEP are [FFmpeg](06-ffmpeg.md), [GStreamer](07-gstreamer.md), [Unity](12-unity.md) and [web browsers](13-web-browsers.md).
diff --git a/docs/4-read/03-rtsp.md b/docs/4-read/03-rtsp.md
index 42978afb..4a3c2abb 100644
--- a/docs/4-read/03-rtsp.md
+++ b/docs/4-read/03-rtsp.md
@@ -1,6 +1,6 @@
 # RTSP clients
 
-RTSP is a protocol that allows to publish and read streams. It supports several underlying transport protocols and encryption (read [RTSP-specific features](../2-features/26-rtsp-specific-features.md)). In order to read a stream with the RTSP protocol, use this URL:
+RTSP is a protocol that allows to publish and read streams. It supports several underlying transport protocols and encryption (read [RTSP-specific features](../2-features/25-rtsp-specific-features.md)). In order to read a stream with the RTSP protocol, use this URL:
 
 ```
 rtsp://localhost:8554/mystream
diff --git a/docs/4-read/04-rtmp.md b/docs/4-read/04-rtmp.md
index 67cce64c..893902c6 100644
--- a/docs/4-read/04-rtmp.md
+++ b/docs/4-read/04-rtmp.md
@@ -1,6 +1,6 @@
 # RTMP clients
 
-RTMP is a protocol that allows to read and publish streams. It supports encryption, read [RTMP-specific features](../2-features/27-rtmp-specific-features.md). Streams can be read from the server by using the URL:
+RTMP is a protocol that allows to read and publish streams. It supports encryption, read [RTMP-specific features](../2-features/26-rtmp-specific-features.md). Streams can be read from the server by using the URL:
 
 ```
 rtmp://localhost/mystream
diff --git a/docs/4-read/07-gstreamer.md b/docs/4-read/07-gstreamer.md
index a9c8ef79..07c1deb6 100644
--- a/docs/4-read/07-gstreamer.md
+++ b/docs/4-read/07-gstreamer.md
@@ -8,7 +8,7 @@ GStreamer can read a stream from the server in several ways. The recommended one
 gst-launch-1.0 rtspsrc location=rtsp://127.0.0.1:8554/mystream latency=0 ! decodebin ! autovideosink
 ```
 
-For advanced options, read [RTSP-specific features](../2-features/26-rtsp-specific-features.md).
+For advanced options, read [RTSP-specific features](../2-features/25-rtsp-specific-features.md).
 
 ## GStreamer and WebRTC
 
diff --git a/docs/4-read/13-web-browsers.md b/docs/4-read/13-web-browsers.md
index b7d5e10a..e325b84b 100644
--- a/docs/4-read/13-web-browsers.md
+++ b/docs/4-read/13-web-browsers.md
@@ -1,6 +1,6 @@
 # Web browsers
 
-Web browsers can read a stream from the server in several ways.
+Web browsers can read a stream from the server by using the WebRTC or the HLS protocol.
 
 ## Web browsers and WebRTC
 
@@ -10,14 +10,189 @@ You can read a stream by using the [WebRTC protocol](02-webrtc.md) by visiting t
 http://localhost:8889/mystream
 ```
 
-See [Embed streams in a website](../2-features/17-embed-streams-in-a-website.md) for instructions on how to embed the stream into an external website.
-
 ## Web browsers and HLS
 
-Web browsers can also read a stream with the [HLS protocol](05-hls.md). Latency is higher but there are fewer problems related to connectivity between server and clients, furthermore the server load can be balanced by using a common HTTP CDN (like Cloudflare or CloudFront), and this allows to handle an unlimited amount of readers. Visit the web page:
+Web browsers can also read a stream with the [HLS protocol](05-hls.md). Latency is higher but there are fewer problems related to connectivity between server and clients. Visit the web page:
 
 ```
 http://localhost:8888/mystream
 ```
 
-See [Embed streams in a website](../2-features/17-embed-streams-in-a-website.md) for instructions on how to embed the stream into an external website.
+## Embed streams in a website
+
+Live streams can be embedded into an external website by using the WebRTC or HLS protocol. Before embedding, check that the stream is ready and can be accessed with intended protocol by visiting web pages mentioned in the previous section.
+
+### WebRTC in iframe
+
+The simplest way to embed a live stream in a web page, using the WebRTC protocol, consists in adding an `<iframe>` tag to the body section of the HTML:
+
+```html
+<iframe src="http://mediamtx-ip:8889/mystream" scrolling="no"></iframe>
+```
+
+The iframe can be controlled by adding query parameters to the URL (example: `http://mediamtx-ip:8889/mystream?muted=false`). The following parameters are available:
+
+- `controls` (boolean): whether to show controls. Default is true.
+- `muted` (boolean): whether to start the stream muted. Default is true.
+- `autoplay` (boolean): whether to autoplay the stream. Default is true.
+- `playsInline` (boolean): whether to play the stream without using the entire window of mobile devices. Default is true.
+- `disablepictureinpicture` (boolean): whether to disable the ability to open the stream in a dedicated window. Default is false.
+
+The iframe method is fit for most use cases, but it has some limitations:
+
+- it doesn't allow to pass credentials (username, password or token) from the website to _MediaMTX_; credentials are asked directly to users.
+- it doesn't allow to directly access the video tag, to extract data from it, or to perform dynamic actions.
+
+### WebRTC with JavaScript
+
+In order to overcome the limitations of the iframe-based method, it is possible to load the stream directly inside a `<video>` tag in the web page, through a JavaScript library.
+
+Download [reader.js](https://github.com/bluenviron/mediamtx/blob/{version_tag}/internal/servers/webrtc/reader.js) from the repository and serve it together with the other assets of the website.
+
+If you are using a JavaScript bundler, you can import it by using:
+
+```js
+import "./reader.js";
+```
+
+Otherwise, you can add a `<script>` tag to the `<head>` section of the page:
+
+```html
+<script defer src="./reader.js"></script>
+```
+
+Add a `<video>` tag:
+
+```html
+<video id="myvideo" controls muted autoplay width="640" height="480"></video>
+```
+
+After the video tag, add a script that initializes the stream when the page is fully loaded:
+
+```html
+<script>
+  let reader = null;
+
+  window.addEventListener("load", () => {
+    reader = new MediaMTXWebRTCReader({
+      url: "http://mediamtx-ip:8889/mystream/whep",
+      user: "", // fill if needed
+      pass: "", // fill if needed
+      token: "", // fill if needed
+      onError: (err) => {
+        console.error(err);
+      },
+      onTrack: (evt) => {
+        document.getElementById("myvideo").srcObject = evt.streams[0];
+      },
+      onDataChannel: (evt) => {
+        evt.channel.binaryType = "arraybuffer";
+        evt.channel.onmessage = (evt) => {
+          console.log("data channel message", evt.data);
+        };
+      },
+    });
+  });
+
+  window.addEventListener("beforeunload", () => {
+    if (reader !== null) {
+      reader.close();
+    }
+  });
+</script>
+```
+
+If _MediaMTX_ is hosted on a different domain with respect to the website (in the sample code this is implied), you need to set the `webrtcAllowOrigins` parameter in the configuration file. For example, to allow requests from `https://example.com`:
+
+```yaml
+webrtcAllowOrigins: ["https://example.com"]
+```
+
+The parameter also supports wildcards, for instance `['http://*.example.com']`.
+
+### HLS in iframe
+
+Reading a stream with the HLS protocol introduces some latency, but is usually easier to setup since it doesn't involve managing additional ports that in WebRTC are used to transmit the stream.
+
+The simplest way to embed a live stream in a web page, using the HLS protocol, consists in adding an `<iframe>` tag to the body section of the HTML:
+
+```html
+<iframe src="http://mediamtx-ip:8888/mystream" scrolling="no"></iframe>
+```
+
+The iframe can be controlled by adding query parameters to the URL (example: `http://mediamtx-ip:8888/mystream?muted=false`). The following parameters are available:
+
+- `controls` (boolean): whether to show controls. Default is true.
+- `muted` (boolean): whether to start the stream muted. Default is true.
+- `autoplay` (boolean): whether to autoplay the stream. Default is true.
+- `playsInline` (boolean): whether to play the stream without using the entire window of mobile devices. Default is true.
+- `disablepictureinpicture` (boolean): whether to disable the ability to open the stream in a dedicated window. Default is false.
+
+The iframe method is fit for most use cases, but it has some limitations:
+
+- it doesn't allow to pass credentials (username, password or token) from the website to _MediaMTX_; credentials are asked directly to users.
+- it doesn't allow to directly access the video tag, to extract data from it, or to perform dynamic actions.
+
+### HLS with JavaScript
+
+In order to overcome the limitations of the iframe-based method, it is possible to load the stream directly inside a `<video>` tag in the web page, through the _hls.js_ library.
+
+If you are using a JavaScript bundler, you can import _hls.js_ by adding [its npm package](https://www.npmjs.com/package/hls.js) as dependency and then importing it:
+
+```js
+import Hls from "hls.js";
+```
+
+Otherwise, you can use a `<script>` tag inside the `<head>` section that points to a CDN:
+
+```html
+<script
+  defer
+  src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.6.13/hls.min.js"
+></script>
+```
+
+Add a `<video>` tag:
+
+```html
+<video id="myvideo" controls muted autoplay width="640" height="480"></video>
+```
+
+After the video tag, add a script that initializes the stream when the page is fully loaded:
+
+```html
+<script>
+  window.addEventListener("load", () => {
+    if (Hls.isSupported()) {
+      const hls = new Hls({
+        xhrSetup: function (xhr, url) {
+          let user = ""; // fill if needed
+          let pass = ""; // fill if needed
+          let token = ""; // fill if needed
+
+          if (user !== "") {
+            const credentials = btoa(`${user}:${pass}`);
+            xhr.setRequestHeader("Authorization", `Basic ${credentials}`);
+          } else if (token !== "") {
+            xhr.setRequestHeader("Authorization", `Bearer ${token}`);
+          }
+        },
+      });
+
+      hls.on(Hls.Events.MEDIA_ATTACHED, () => {
+        hls.loadSource("http://mediamtx-ip:8888/mystream/index.m3u8");
+      });
+
+      hls.attachMedia(document.getElementById("myvideo"));
+    }
+  });
+</script>
+```
+
+If _MediaMTX_ is hosted on a different domain with respect to the website (in the sample code this is implied), you need to set the `hlsAllowOrigins` parameter in the configuration file. For example:
+
+```yaml
+hlsAllowOrigins: ["https://example.com"]
+```
+
+The parameter also supports wildcards, for instance `['http://*.example.com']`.
diff --git a/docs/5-references/2-control-api.md b/docs/5-references/2-control-api.md
index d8b64690..09eaed7d 100644
--- a/docs/5-references/2-control-api.md
+++ b/docs/5-references/2-control-api.md
@@ -1,3 +1,3 @@
 # Control API reference
 
-This is the reference of the Control API of the latest _MediaMTX_ release ({version_tag}), generated automatically from the [OpenAPI / Swagger file](https://github.com/bluenviron/mediamtx/blob/{version_tag}/api/openapi.yaml) available in the repository. Check the [Control API usage page](../2-features/21-control-api.md) for instructions on how to use the API.
+This is the reference of the Control API of the latest _MediaMTX_ release ({version_tag}), generated automatically from the [OpenAPI / Swagger file](https://github.com/bluenviron/mediamtx/blob/{version_tag}/api/openapi.yaml) available in the repository. Check the [Control API usage page](../2-features/20-control-api.md) for instructions on how to use the API.
diff --git a/docs/redirects.yaml b/docs/redirects.yaml
index dfc275db..74e68585 100644
--- a/docs/redirects.yaml
+++ b/docs/redirects.yaml
@@ -66,3 +66,5 @@ other/route-absolute-timestamps: other/absolute-timestamps
 publish/overview: features/publish
 
 read/overview: features/read
+
+features/embed-streams-in-a-website: read/web-browsers
diff --git a/internal/core/core.go b/internal/core/core.go
index d909886e..d4810d6a 100644
--- a/internal/core/core.go
+++ b/internal/core/core.go
@@ -1087,7 +1087,7 @@ func (p *Core) reloadConf(newConf *conf.Conf, calledByAPI bool) error {
 	return nil
 }
 
-// APIConfigSet is called by api.
+// APIConfigSet implements apiParent.
 func (p *Core) APIConfigSet(conf *conf.Conf) {
 	select {
 	case p.chAPIConfigSet <- conf:
diff --git a/internal/core/path.go b/internal/core/path.go
index a429a7b8..f7d7e9f9 100644
--- a/internal/core/path.go
+++ b/internal/core/path.go
@@ -1078,7 +1078,7 @@ func (pa *path) RemoveReader(req defs.PathRemoveReaderReq) {
 	}
 }
 
-// APIPathsGet is called by api.
+// APIPathsGet implements defs.APIPathManager.
 func (pa *path) APIPathsGet(req pathAPIPathsGetReq) (*defs.APIPath, error) {
 	req.res = make(chan pathAPIPathsGetRes)
 	select {
diff --git a/internal/core/path_manager.go b/internal/core/path_manager.go
index 2f10e97f..78118673 100644
--- a/internal/core/path_manager.go
+++ b/internal/core/path_manager.go
@@ -622,7 +622,7 @@ func (pm *pathManager) SetHLSServer(s *hls.Server) []defs.Path {
 	}
 }
 
-// APIPathsList is called by api.
+// APIPathsList implements defs.APIPathManager.
 func (pm *pathManager) APIPathsList() (*defs.APIPathList, error) {
 	req := pathAPIPathsListReq{
 		res: make(chan pathAPIPathsListRes),
@@ -654,7 +654,7 @@ func (pm *pathManager) APIPathsList() (*defs.APIPathList, error) {
 	}
 }
 
-// APIPathsGet is called by api.
+// APIPathsGet implements defs.APIPathManager.
 func (pm *pathManager) APIPathsGet(name string) (*defs.APIPath, error) {
 	req := pathAPIPathsGetReq{
 		name: name,
diff --git a/internal/servers/hls/server.go b/internal/servers/hls/server.go
index a029ebc2..aca58c6f 100644
--- a/internal/servers/hls/server.go
+++ b/internal/servers/hls/server.go
@@ -317,7 +317,7 @@ func (s *Server) PathNotReady(pa defs.Path) {
 	}
 }
 
-// APIMuxersList is called by api.
+// APIMuxersList implements defs.APIHLSServer.
 func (s *Server) APIMuxersList() (*defs.APIHLSMuxerList, error) {
 	req := serverAPIMuxersListReq{
 		res: make(chan serverAPIMuxersListRes),
@@ -333,7 +333,7 @@ func (s *Server) APIMuxersList() (*defs.APIHLSMuxerList, error) {
 	}
 }
 
-// APIMuxersGet is called by api.
+// APIMuxersGet implements defs.APIHLSServer.
 func (s *Server) APIMuxersGet(name string) (*defs.APIHLSMuxer, error) {
 	req := serverAPIMuxersGetReq{
 		name: name,
diff --git a/internal/servers/rtmp/server.go b/internal/servers/rtmp/server.go
index 826437a5..9c0476a3 100644
--- a/internal/servers/rtmp/server.go
+++ b/internal/servers/rtmp/server.go
@@ -335,7 +335,7 @@ func (s *Server) closeConn(c *conn) {
 	}
 }
 
-// APIConnsList is called by api.
+// APIConnsList implements defs.APIRTMPServer.
 func (s *Server) APIConnsList() (*defs.APIRTMPConnList, error) {
 	req := serverAPIConnsListReq{
 		res: make(chan serverAPIConnsListRes),
@@ -351,7 +351,7 @@ func (s *Server) APIConnsList() (*defs.APIRTMPConnList, error) {
 	}
 }
 
-// APIConnsGet is called by api.
+// APIConnsGet implements defs.APIRTMPServer.
 func (s *Server) APIConnsGet(uuid uuid.UUID) (*defs.APIRTMPConn, error) {
 	req := serverAPIConnsGetReq{
 		uuid: uuid,
@@ -368,7 +368,7 @@ func (s *Server) APIConnsGet(uuid uuid.UUID) (*defs.APIRTMPConn, error) {
 	}
 }
 
-// APIConnsKick is called by api.
+// APIConnsKick implements defs.APIRTMPServer.
 func (s *Server) APIConnsKick(uuid uuid.UUID) error {
 	req := serverAPIConnsKickReq{
 		uuid: uuid,
diff --git a/internal/servers/rtsp/server.go b/internal/servers/rtsp/server.go
index 8e026e0a..e46ddf30 100644
--- a/internal/servers/rtsp/server.go
+++ b/internal/servers/rtsp/server.go
@@ -421,7 +421,7 @@ func (s *Server) getSessionByRSessionUnsafe(rsession *gortsplib.ServerSession) *
 	return s.sessions[rsession]
 }
 
-// APIConnsList is called by api and metrics.
+// APIConnsList implements defs.APIRTSPServer.
 func (s *Server) APIConnsList() (*defs.APIRTSPConnsList, error) {
 	select {
 	case <-s.ctx.Done():
@@ -447,7 +447,7 @@ func (s *Server) APIConnsList() (*defs.APIRTSPConnsList, error) {
 	return data, nil
 }
 
-// APIConnsGet is called by api.
+// APIConnsGet implements defs.APIRTSPServer.
 func (s *Server) APIConnsGet(uuid uuid.UUID) (*defs.APIRTSPConn, error) {
 	select {
 	case <-s.ctx.Done():
@@ -466,7 +466,7 @@ func (s *Server) APIConnsGet(uuid uuid.UUID) (*defs.APIRTSPConn, error) {
 	return conn.apiItem(), nil
 }
 
-// APISessionsList is called by api and metrics.
+// APISessionsList implements defs.APIRTSPServer.
 func (s *Server) APISessionsList() (*defs.APIRTSPSessionList, error) {
 	select {
 	case <-s.ctx.Done():
@@ -492,7 +492,7 @@ func (s *Server) APISessionsList() (*defs.APIRTSPSessionList, error) {
 	return data, nil
 }
 
-// APISessionsGet is called by api.
+// APISessionsGet implements defs.APIRTSPServer.
 func (s *Server) APISessionsGet(uuid uuid.UUID) (*defs.APIRTSPSession, error) {
 	select {
 	case <-s.ctx.Done():
@@ -511,7 +511,7 @@ func (s *Server) APISessionsGet(uuid uuid.UUID) (*defs.APIRTSPSession, error) {
 	return sx.apiItem(), nil
 }
 
-// APISessionsKick is called by api.
+// APISessionsKick implements defs.APIRTSPServer.
 func (s *Server) APISessionsKick(uuid uuid.UUID) error {
 	select {
 	case <-s.ctx.Done():
diff --git a/internal/servers/srt/server.go b/internal/servers/srt/server.go
index f69a0ad0..b761e9b3 100644
--- a/internal/servers/srt/server.go
+++ b/internal/servers/srt/server.go
@@ -272,7 +272,7 @@ func (s *Server) closeConn(c *conn) {
 	}
 }
 
-// APIConnsList is called by api.
+// APIConnsList implements defs.APISRTServer.
 func (s *Server) APIConnsList() (*defs.APISRTConnList, error) {
 	req := serverAPIConnsListReq{
 		res: make(chan serverAPIConnsListRes),
@@ -288,7 +288,7 @@ func (s *Server) APIConnsList() (*defs.APISRTConnList, error) {
 	}
 }
 
-// APIConnsGet is called by api.
+// APIConnsGet implements defs.APISRTServer.
 func (s *Server) APIConnsGet(uuid uuid.UUID) (*defs.APISRTConn, error) {
 	req := serverAPIConnsGetReq{
 		uuid: uuid,
@@ -305,7 +305,7 @@ func (s *Server) APIConnsGet(uuid uuid.UUID) (*defs.APISRTConn, error) {
 	}
 }
 
-// APIConnsKick is called by api.
+// APIConnsKick implements defs.APISRTServer.
 func (s *Server) APIConnsKick(uuid uuid.UUID) error {
 	req := serverAPIConnsKickReq{
 		uuid: uuid,
diff --git a/internal/servers/webrtc/server.go b/internal/servers/webrtc/server.go
index 1c40bc32..f657788e 100644
--- a/internal/servers/webrtc/server.go
+++ b/internal/servers/webrtc/server.go
@@ -560,7 +560,7 @@ func (s *Server) deleteSession(req webRTCDeleteSessionReq) error {
 	}
 }
 
-// APISessionsList is called by api.
+// APISessionsList implements defs.APIWebRTCServer.
 func (s *Server) APISessionsList() (*defs.APIWebRTCSessionList, error) {
 	req := serverAPISessionsListReq{
 		res: make(chan serverAPISessionsListRes),
@@ -576,7 +576,7 @@ func (s *Server) APISessionsList() (*defs.APIWebRTCSessionList, error) {
 	}
 }
 
-// APISessionsGet is called by api.
+// APISessionsGet implements defs.APIWebRTCServer.
 func (s *Server) APISessionsGet(uuid uuid.UUID) (*defs.APIWebRTCSession, error) {
 	req := serverAPISessionsGetReq{
 		uuid: uuid,
@@ -593,7 +593,7 @@ func (s *Server) APISessionsGet(uuid uuid.UUID) (*defs.APIWebRTCSession, error)
 	}
 }
 
-// APISessionsKick is called by api.
+// APISessionsKick implements defs.APIWebRTCServer.
 func (s *Server) APISessionsKick(uuid uuid.UUID) error {
 	req := serverAPISessionsKickReq{
 		uuid: uuid,