七种转化RTSP屏显示到web页面的方…

7 ways to stream RTSP on the page

In this article we demonstrate 7 technologically different ways todisplay a video stream from an IP camera with RTSP support on a webpage in a browser.

As a rule, browsers do not support RTSP, so the video stream isconverted for a browser using an intermediate server.

Method 1 – RTMP

Browsers do not support the RTMP protocol, but guess who does? Theold faithful Flash Player that works enough well even though itdoes not support all browsers, so it can display the videostream.

The code of the player is built on Action Script 3 and looks asfollows:

1

2

3

var nc:NetConnection = nc.connect("rtmp://192.168.88.59/live",obj);

var subscribeStream:NetStream = new NetStream(nc);

subscribeStream.play("rtsp://192.168.88.5/live.sdp");

In this example:

rtmp://192.168.88.59/live – is the address of the intermediateserver that fetches the RTSP video stream from the camera andconverts it to RTMP.

rtsp://192.168.88.5/live.sdp – is the RTSP address of thecamera.

A little bit superfluous variant of the player on Flex and AS3 isavailable here.

This method looks as follows:

Method 2 – RTMP wrapped to HTML5

It is hard to find those willing to keep coding on Action Script 3these days. So, there is a method with an HTML wrapping that allowscontrolling the RTMP player from JavaScript. In this variant theflash is loaded to the HTML page only to display picture and playsound.

1

2

var session = Flashphoner.createSession({urlServer:"wss://192.168.88.59:8443"});

session.createStream({name:"rtsp://192.168.88.5/live.sdp",display:myVideo}).play();

The full source code of the player is here.And the method looks like this:

Method 3 – RTMFP

The RTMFP protocol also works inside the Flash Player. Thedifference from RTMP is that RTMFP works on top of the UDP, so itis much more suitable for low latency broadcasting.

The AS3 code of the player is identical to that of RTMP except forone letter F added in the line of code where the connection to theserver is established.

1

2

3

var nc:NetConnection = nc.connect("rtmfp://192.168.88.59/live",obj);

var subscribeStream:NetStream = new NetStream(nc);

subscribeStream.play("rtsp://192.168.88.5/live.sdp");

Nevertheless, here is a screenshot using RTMFP

Method 4 – RTMFP wrapped to HTML5

This way is identical to method 2 except that during initializationwe set the RTMFP protocol for the underlying Flash (swfobject).

1

2

Var session =Flashphoner.createSession({urlServer:"wss://192.168.88.59:8443",flashProto:"rtmfp"});

session.createStream({name:"rtsp://192.168.88.5/live.sdp",display:myVideo}).play();

Player picture:

Method 5 – WebRTC

In this case we do not use Flash at all, and the video stream isplayed using means of the browser itself, without using third-partyplugins. This method works both in Chrome and Firefox Androidbrowsers, where Flash is not available. WebRTC results in thelowest latency, less than 0.5 seconds.

The source code of the player is the same:

1

2

var session = Flashphoner.createSession({urlServer:"wss://192.168.88.59:8443"});

session.createStream({name:"rtsp://192.168.88.5/live.sdp",display:myVideo}).play();

The script automatically detects WebRTC support, and if ti issupported, the stream is played using WebRTC.

Method 6 – Websockets

WebRTC and Flash do not cover all browsers and platforms. Forinstance, the iOS Safari browser does not support them.

You can deliver a video stream to iOS Safari using Websockettransport (a TCP connection between the browser and the server).Then, the RTSP video stream is channelled through Websockets. Afterthe binary data are received, they can be decoded using JavaScriptand rendered on Canvas HTML5 element.

This is what Websocket player does on the iOS Safari browser. Thecode of the player looks the same:

1

2

var session = Flashphoner.createSession({urlServer:"wss://192.168.88.59:8443"});

session.createStream({name:"rtsp://192.168.88.5/live.sdp",display:myVideo}).play();

This is somewhat similar to the Flash-based methods when the swfelement lies under HTML5. Here, we have a JavaScript applicationunder HTML5 that fetches data via Websockets, decodes them andrenders them on Canvas in multiple threads.

Here is how an RTSP stream rendered on Canvas in the iOS Safaribrowser looks like:

Method 7 – HLS

When RTSP is converted to HLS, a video stream is divided tosegments that are happily downloaded from the server and displayedin the HLS player.

As an HLS player we use video.js. The source code of the player canbe downloaded here.

The player looks as follows:

Method 8 – Android application, WebRTC

The application retrieves the stream from the server via WebRTC. Togoal of the server here is to convert RTSP to WebRTC and feed theresult to the mobile application.

The Java-code of the player for Androidis here andlooks like this:

1

2

3

4

5

SessionOptions sessionOptions = new SessionOptions("wss://192.168.88.59:8443");

Session session =Flashphoner.createSession(sessionOptions);

StreamOptions streamOptions = new StreamOptions("rtsp://192.168.88.5/live.sdp");

Stream playStream =session.createStream(streamOptions);

playStream.play();

A test mobile app of the player can be installedfrom GooglePlay, and the sources of the application can be downloadedfrom here.

Here is how RTSP stream playback via WebRTC looks on Asus Androidtablet:

Method 9 – iOS application, WebRTC

Just like its Android brethren, the iOS application fetches a videostream from the server via WebRTC.

The Objective-Ccode of the player looks as shown below:

1

2

3

4

5

6

7

FPWCSApi2SessionOptions *options = [[FPWCSApi2SessionOptions alloc]init];

options.urlServer = @"wss://192.168.88.59:8443";

FPWCSApi2Session *session = [FPWCSApi2 createSession:optionserror:&error];

FPWCSApi2StreamOptions *options = [[FPWCSApi2StreamOptions alloc]init];

options.name = @"rtsp://192.168.88.5/live.sdp";

FPWCSApi2Stream *stream = [session createStream:optionserror:nil];

stream play:&error;

You can download the source code of the player foriOS here.

And you can install the testapplication that uses the above code chunksfrom App Store. Operation of the player with the RTSP stream looksas follows:

Results

Let’s put the results together into a summary table:

 Display methodBest forLatency1RTMPLegacy Flash, Flex or Adobe Air applicationsmedium2RTMP + HTML5IE, Edge, Mac Safari browsers if Flash Player is installedmedium3RTMFPLegacy Flash, Flex or Adobe Air applications that require lowlatencylow4RTMFP + HTML5IE, Edge, Mac Safari browsers if Flash Player is installed and whenlow latency is cruciallow5WebRTCChrome, Firefox, Opera browsers on mobile devices and desktops onAndroid and when real-time playback is crucial.real-time6WebsocketBrowsers that lack support for Flash and WebRTC, but the taskrequires low to medium latency.medium7HLSAny browser as long as latency is not important.high8Android app, WebRTCNative mobile applications for Android that require real-timelatency.real-time9iOS app, WebRTCNative mobile applications for iOS that require real-timelatency.real-time

 

For testing the methods we used Web Call Server 5 that is capableof converting an RTSP stream and transmitting it to all nine abovedescribed directions.

 

References

Web Call Server 5 – a server to broadcast anRTSP stream.

Flash Streaming – an example swf applicationplaying streams via RTMP and RTMFP. Corresponds to methods 1 and3.
Source – the source code of the swfapplication on Flex / AS3.

Player – an example web-application that playsan RTSP stream via RTMP, RTMFP, WebRTC, Websocket. Methods2,4,5,6.
Source – the source code of the webplayer.

HLS player – an example web player playingHLS. Corresponds to method 7.
Source – the source code of the HLSplayer.

Android WebRTC player – the example of amobile application that plays a video stream via WebRTC. Method8.
Source – the source code of the mobileapplication.

iOS WebRTC player – the example of a mobileapplication that plays a video stream via WebRTC. Method9.
Source – the source code of the mobileapplication.