OPC/mediamtx
2
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

docs: merge 'embed streams' and 'web browsers' pages (#5684)

Browse Source
This commit is contained in:
Alessandro Ros
2026-04-24 17:37:20 +02:00
committed by GitHub
parent cae9920f00
commit f1c919b429
37 changed files with 225 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/1-kickoff/1-introduction.md
+4 -4
View File
@@ -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.
docs/2-features/05-configuration.md
+1 -1
View File
@@ -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
docs/2-features/06-authentication.md
+2 -2
View File
@@ -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).
docs/2-features/17-embed-streams-in-a-website.md
-178
View File
@@ -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']`.
docs/2-features/18-start-on-boot.md → docs/2-features/17-start-on-boot.md
View File
docs/2-features/19-logging.md → docs/2-features/18-logging.md
+1 -1
View File
@@ -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
docs/2-features/20-hooks.md → docs/2-features/19-hooks.md
View File
docs/2-features/21-control-api.md → docs/2-features/20-control-api.md
View File
docs/2-features/22-metrics.md → docs/2-features/21-metrics.md
View File
docs/2-features/23-performance.md → docs/2-features/22-performance.md
View File
docs/2-features/24-srt-specific-features.md → docs/2-features/23-srt-specific-features.md
View File
docs/2-features/25-webrtc-specific-features.md → docs/2-features/24-webrtc-specific-features.md
View File
docs/2-features/26-rtsp-specific-features.md → docs/2-features/25-rtsp-specific-features.md
View File
docs/2-features/27-rtmp-specific-features.md → docs/2-features/26-rtmp-specific-features.md
View File
docs/2-features/28-decrease-packet-loss.md → docs/2-features/27-decrease-packet-loss.md
View File
docs/3-publish/01-srt-clients.md
+1 -1
View File
@@ -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.
docs/3-publish/03-webrtc-clients.md
+2 -2
View File
@@ -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).
docs/3-publish/05-rtsp-clients.md
+1 -1
View File
@@ -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
docs/3-publish/06-rtsp-cameras-and-servers.md
+1 -1
View File
@@ -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).
docs/3-publish/07-rtmp-clients.md
+1 -1
View File
@@ -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
docs/3-publish/15-gstreamer.md
+2 -2
View File
@@ -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
docs/4-read/01-srt.md
+1 -1
View File
@@ -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).
docs/4-read/02-webrtc.md
+2 -2
View File
@@ -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).
docs/4-read/03-rtsp.md
+1 -1
View File
@@ -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
docs/4-read/04-rtmp.md
+1 -1
View File
@@ -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
docs/4-read/07-gstreamer.md
+1 -1
View File
@@ -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
docs/4-read/13-web-browsers.md
+180 -5
View File
@@ -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']`.
docs/5-references/2-control-api.md
+1 -1
View File
@@ -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.
docs/redirects.yaml
+2
View File
@@ -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
internal/core/core.go
+1 -1
View File
@@ -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:
internal/core/path.go
+1 -1
View File
@@ -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 {
internal/core/path_manager.go
+2 -2
View File
@@ -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,
internal/servers/hls/server.go
+2 -2
View File
@@ -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,
internal/servers/rtmp/server.go
+3 -3
View File
@@ -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,
internal/servers/rtsp/server.go
+5 -5
View File
@@ -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():
internal/servers/srt/server.go
+3 -3
View File
@@ -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,
internal/servers/webrtc/server.go
+3 -3
View File
@@ -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,