7 ways to display video from an RTSP IP camera on a web page and 2 in a mobile application

    In this article, we show 7 technologically different ways to display a video stream from an IP camera with RTSP support on a browser web page.

    Browsers, as a rule, do not support RTSP, so the stream will be converted for the browser through an intermediate server.

    Method 1 - RTMP


    RTMP protocol is not supported by browsers, but it is supported by the good old Flash Player, which works well, although not in all browsers, and can display a video stream.


    The player code in this case will be built on Action Script 3 and will look something like this:

    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 intermediate server that will take the RTSP video stream from the camera and convert it to RTMP

    rtsp: //192.168.88.5/live.sdp is the RTSP address of the camera itself.

    A slightly redundant version of the player code on Flex and AS3 is available here .

    It looks like this:


    Method 2 - RTMP with HTML5 Wrapper


    There are less and less people who want to code on Action Script 3. Especially for this, a method with an HTML5 wrapper was invented that allows you to control an RTMP player from JavaScript. In this case, the flash drive is uploaded to the HTML page only in order to display the picture and deliver sound to the speakers.


    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 player code is here . And it looks like this:


    Method 3 - RTMFP


    The RTMFP protocol also works inside the flash player. The difference with RTMP is that RTMFP runs on top of UDP and is therefore more suitable for low-latency broadcasts.

    The player code on AS3 in this case is completely identical to that used in RTMP, one letter F is added in the line of the protocol for connecting to the server.

    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");
    

    For the order we will give a screenshot with RTMFP


    Method 4 - RTMFP with HTML5 wrapper


    This method is identical to step 2, with the difference that when we initialize in JavaScript, we set the RTMFP protocol for use in the underlying flash drive (swf object).

    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, Flash is not used at all and the video stream is played by the browser itself, without using third-party plug-ins. This works in both Android Chrome and Android Firefox, mobile browsers where Flash is not installed. WebRTC gives the lowest latency - less than 0.5 seconds.


    The player code is the same:

    var session = Flashphoner.createSession({urlServer:"wss://192.168.88.59:8443"});
    session.createStream({name:"rtsp://192.168.88.5/live.sdp", display:myVideo}).play();
    

    WebRTC support is automatically detected, and if supported, the stream plays through WebRTC.


    Method 6 - Websockets


    WebRTC and Flash do not cover all browsers and platforms. For example, in iOS Safari, these technologies are not supported.


    On iOS Safari, you can deliver the video stream via the Websocket transport (TCP connection between the browser and the server). You can wrap a converted video stream with RTSP into this tunnel. After the binary data arrives, it can be decoded using JavaScript and rendered on the Canvas HTML5 element.

    This is what the Websocket player does when working in the iOS Safari browser, and its code on the outside also looks like this:

    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 drive approach, when a swf element is under HTML5. In this case, under the HTML5 page is not a swf object, but a JavaScript application that pulls data on web sockets, decodes and draws on Canvas in several streams.

    This is how the RTSP stream on Canvas looks in the iOS Safari browser


    Method 7 - HLS


    When converting RTSP to HLS, the video stream is divided into segments that are safely downloaded from the server and displayed in the HLS player.


    As an HLS player we use video.js. Player code can be downloaded here .

    What does the player look like:


    Method 8 - Android Application, WebRTC


    The application takes the stream from the server via WebRTC. The server’s task in this case is to convert RTSP to WebRTC and feed it to the mobile application.


    The player’s Java code for Android is here and looks like this:

    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();
    

    The player’s test mobile application can be installed from Google Play , and the application source code can be downloaded here .

    This is how RTSP stream playback via WebRTC on an Asus Android tablet looks like:


    Method 9 - iOS Application, WebRTC


    The application, as well as in the case of Android, takes the stream from the server via WebRTC.


    Objective-C player code looks like this:

    FPWCSApi2SessionOptions *options = [[FPWCSApi2SessionOptions alloc] init];
    options.urlServer = @"wss://192.168.88.59:8443";
    FPWCSApi2Session *session = [FPWCSApi2 createSession:options error:&error];
    FPWCSApi2StreamOptions *options = [[FPWCSApi2StreamOptions alloc] init];
    options.name = @"rtsp://192.168.88.5/live.sdp";
    FPWCSApi2Stream *stream = [session createStream:options error:nil];
    stream play:&error;
    

    Download the source code of the player for iOS here .

    And from the App Store, you can install a test application that uses the pieces of code shown above. His work with the RTSP stream looks like this:



    results


    To summarize and combine the results in a tablet:
    Display methodApplicationDelay
    1RTMPWhere legacy is important - flash client, Flex or Adobe Airmedium
    2RTMP + HTML5In IE, Edge, Mac Safari browsers, if Flash Player is installed theremedium
    3RTMFPWhere legacy is important - flash client, Flex or Adobe Air and low latency is importantlow
    4RTMFP + HTML5In browsers IE, Edge, Mac Safari, if Flash Player is installed there and low latency is important.low
    5WebRTCIn Chrome, Firefox, Opera browsers on desktops and mobile browsers for Android, where real-time delay is important.real-time
    6WebsocketIn browsers that do not have Flash and WebRTC, but need medium or low latency.medium
    7HlsIn all browsers. Where the delay is not important.high
    8Android app, WebRTCIn native mobile applications for Android, where real-time delay is required.real-time
    9iOS app, WebRTCIn native mobile applications under iOS where real-time delay is required.real-time

    For testing, we used Web Call Server 5, which converts the RTSP stream for distribution in the 9 listed directions.

    References


    Web Call Server 5 - a server for distributing RTSP streams
    Flash Streaming is an example of a swf application that plays streams via RTMP and RTMFP. Methods 1 and 3.
    Source - the source code for the swf application on Flex / AS3.

    Player is an example of a web application that plays an RTSP stream over RTMP, RTMFP, WebRTC, Websocket. Methods 2,4,5,6.
    Source - the source code of the web player.

    The HLS player is an example of a web player playing HLS. Method 7.
    Source - the source code of the HLS player.

    WebRTC Android Player is an example of a mobile application that plays a stream via WebRTC. Method 8.
    Source - the source code of the mobile application.

    iOS player WebRTC- An example of a mobile application that plays WebRTC stream. Method 9.
    Source - the source code of the mobile application.

    Also popular now: