How to embed a stream on your website

Why RTSP does not work in a browser

RTSP is designed to control streaming video, but modern browsers cannot play the protocol directly. Paste an RTSP link into HTML or open it as an ordinary address and no video will appear on the page.

To show it on the web, the stream has to be received, prepared in a compatible format and delivered to the viewer through a web player. That is the job rtsp.me does.

What you get

• Ready-made codePlayer HTML code to place on a page
• Stream adaptationPlayback in modern web browsers
• Mobile devicesViewing optimized for phones and tablets
• StatisticsOwner access to the stream's visit statistics

You will not need to build a player yourself or maintain a separate video conversion system.

Step 1. Prepare the stream

First add the IP camera on rtsp.me and wait for the video to start successfully. If the camera is not connected yet, follow the guide “How to create a live stream on a website”.

1. Open rtsp.me and sign in to your account.
2. Select the camera you connected.
3. Make sure the picture is available and the stream runs steadily.
4. Open the embedding settings or the player code.

Step 2. Get the HTML code

rtsp.me generates a ready-made HTML fragment for the selected stream. Copy it in full without changing the player address or the service parameters.

The code works on a plain HTML site, in a CMS template or in the custom HTML block of a website builder, provided the platform allows external players to be embedded.

Example HTML code

<iframe
  src="https://rtsp.me/embed/WKZb7jUsUw5T9N4f/"
  style="width:100%; aspect-ratio:4/3; border:0;"
  title="RTSP streaming player"
  allow="fullscreen; autoplay"
  allowfullscreen>
  Iframes not supported. Stream <a href="https://rtsp.me/"
    title="rtsp video streaming service">rtsp.me</a> player
</iframe>

Your working code will contain the address of your own stream. Do not replace it with the demonstration identifier WKZb7jUsUw5T9N4f.

What the embedded player looks like

Step 3. Place the code

1. Open the page the stream should appear on.
2. Switch to HTML editing mode or add a block for embedded code.
3. Paste the player code where you need it.
4. Save and publish the page.
5. Check that the video starts in a browser on both desktop and phone.

Once the published page loads, the player connects to rtsp.me and starts playing the available stream.

Browsers and mobile devices

rtsp.me optimizes the source stream not only for desktop browsers but for mobile devices as well. A visitor does not need to install RTSP viewing software or enter any camera credentials.

The responsive player can sit in a page container so that its width adapts to the screen. After publishing, check both portrait and landscape orientation on a phone, and the page over a slow mobile connection.

Viewing quality also depends on the camera settings and the upload speed available at the site. Recommendations are on the page “Recommended IP camera settings”.

Visit statistics

The stream owner has access to visit statistics. They help you gauge audience interest and keep track of how the player is used on the site.

Statistics are available in the rtsp.me interface. Which metrics are shown may depend on the stream settings and the plan in use.

Secure integration through PHP

Plain HTML code is fine for a public stream. If the video is meant only for registered clients, staff or customers, the player can be connected through server-side PHP code.

In this setup your server first checks the user's permissions and then issues them a unique player link. The link is created separately for each visitor and is not stored permanently in the page's public HTML.

1. The user signs in to their account on your site.
2. The PHP code checks whether viewing is allowed for them.
3. The server builds a personal link using the rtsp.me integration parameters.
4. The page passes the link to the player for that user only.

A comparison of the PHP integration with allowed domains, a password, IP blocking and account-based access is in the guide “How to protect a stream from copying”.

Frequently asked questions