[SOLVED] – Embedding RTSP onto a Webpage

In the vast world of digital communication, acronyms often reign supreme. One such acronym that has been making waves in the realm of multimedia is RTSP, standing for Real-Time Streaming Protocol. But what exactly is this magical protocol, and how does it transform the way we experience live media streaming?

At its core, RTSP acts as a wizard of sorts, orchestrating the seamless transfer of real-time data from multimedia sources to our endpoint devices. Imagine it as a network remote control, creating and controlling the media stream with a direct line of communication to the server responsible for streaming the data.

However, RTSP doesn’t directly stream the media itself; instead, it plays the role of a conductor, executing commands as users dictate. Pause, play, record – these are the enchanting spells RTSP casts to bring our multimedia experience to life.

The RTSP Symphony: A Quick Overview

Let’s take a quick peek into the RTSP protocol. Picture an orchestra of audio codecs like AAC, AAC-LC, HE-AAC+ v1 & v2, MP3, Speex, Opus, and Vorbis harmonizing with video codecs such as H.265, H.264, VP9, and VP8. This dynamic duo creates a symphony of low latency, making IP cameras streaming a video.

Yet, every tale has its drawbacks. While RTSP boasts a latency of a mere 2 seconds and facilitates the streaming of IP camera content, it’s no longer the ubiquitous protocol it once was. It may not be optimized for the ultimate viewing experience and scalability, leaving some users searching for a more cutting-edge solution.

The RTSP Maestro and IP Camera Streaming

In the contemporary landscape, RTSP has found a sweet spot as the go-to protocol for streaming video and audio from IP cameras. This wizardry has become the standard for manufacturers in the video surveillance device realm, providing a simple and efficient means of streaming CCTV content with minimal setup.

However, delving into the intricacies of coding an RTSP player for streaming IP cameras reveals a challenging task that demands considerable resources and effort. But fear not, for those seeking alternatives, solutions do exist to simplify the enchanting process of streaming IP cameras with RTSP. One such alternative is Streamedian.

Now, what exactly is Streamedian? Let’s discuss it in detail!

Overview of Streamedian

Streamedian is a Javascript library that seamlessly integrates an RTSP client, enabling users to watch live streams directly within their web browsers. This library operates effortlessly on a standard HTML video element. However, to ensure optimal playback, support for HTML5 Video with Media Sources Extensions is imperative.

For the playback to function smoothly, the player is dependent on a server-side web socket proxy. This proxy efficiently retransmits RTSP streams to the browser, facilitating a seamless viewing experience for users.

The underlying mechanism involves the multiplexing (muxing) of RTP H264 and AAC payload into ISO BMFF (MP4) fragments. This process ensures efficient handling and delivery of video and audio components, contributing to a cohesive and high-quality streaming experience.

Stremedian Supported Browsers

Here is a list of browsers that support Streamedian:

• Android browser v.5.0+
• Chrome v.23+
• Opera v.15+
• Firefox v.42+
• MS Edge v.13+
• OSX Safari v.8+
• IE Mobile v.11+

Please note that Streamedian doesn’t support Internet Explorer and iOS Safari.

How Does RTSP Proxy Work?

RTSP player establishes a connection with the proxy via the following protocol:

• Connect to the RTSP channel via connecting websocket with specified “rtsp” protocol and get the connection ID:

• Connect to the RTP channel by connecting the websocket with the “RTP” protocol

• Send RTSP commands wrapped into WSP protocol:

• RTP channel should send interleaved data with a 4-byte header ($ ). Separate RTP is not supported at this moment.

Load Balancing

While the RTSP proxy lacks inherent load balancing support, seamless integration with popular load balancers like Nginx is straightforward. By initiating multiple proxy instances on distinct sockets and configuring Nginx upstreams accordingly, you can efficiently implement load balancing for enhanced performance.

Hopefully, this blog will help you stream your videos with HTML5 RTSP via Stremedian. However, if you need any assistance in setting up an RTSP Proxy server, get in touch with our backend team!