Streaming Protocols

Throughout this document we use AMS_URL for http(s)://<AMS_Host>:<Port>. By default AMS Port is 5080 for http and 5443 for https.

WebRTC

Publishing

To stream your camera with name <stream_name> to the Ant Media Server, you can open the following URL from your browser then click publish button.

<AMS_URL>:WebRTCAppEE/index.html?name=<stream_name>

WebRTC Publish

Playing

To play a stream with name <stream_name> from Ant Media Server, you can open the following URL from your browser then click play button.

<AMS_URL>:WebRTCAppEE/player.html?name=<stream_name>

If you want to start playing when stream is available, you can open following URL.

<AMS_URL>:WebRTCAppEE/play_embed.html?name=<stream_name>

WebRTC Play

Peer-to-peer

If you want to use Ant Media Server for a signalling server you open following URL.

<AMS_URL>:WebRTCAppEE/peer.html?name=<stream_name>

WebRTC Peer

Conference

If you want to use Ant Media Server for a multiuser conference, you open following URL.

<AMS_URL>:WebRTCAppEE/conference.html

WebRTC Conference

WebRTC Screen Sharing

Seamless switch between WebRTC Screen Sharing & Camera is available on both Community and Enterprise Edition. We mean by seamless is that you can switch between Screen & Camera in the same session.

Try WebRTC Screen Sharing

Firstly, just let me tell how to try it. After that I will give some information about JavaScript API and chrome extension.

  1.  Install Ant Media Server to your server in the cloud with Getting Started. In order to download community edition, visit main page or if you want to try Enterprise edition, keep in touch.

  2.  Go to WebRTC publishing web page which is https://FQDN:5443/WebRTCApp (Community E. ) or https://FQDN:5443/WebRTCAppEE (Enterprise E.). By the way,  you need to assign a domain to your server and install SSL. Otherwise, chrome does not let you access the camera or screen.

    • Install Chrome Extension by clicking on the link or directly from Chrome WebStore. Luckily, source code of the extension is also available on github.

    •  Return back to WebRTC Publish page and click Screen Share Checkbox

    • Screen is going to be shared on the video element

    • Click “Start Publishing” and also check/uncheck “Screen Share” box while publishing in the same session. MP4 file or HLS stream will record the screen or your camera according to your preference. You can watch the stream live on web panel via HLS.

    Implementing WebRTC Screen Sharing

    We just add some simple functions to js/webrtc_adaptor.js file to seamless switch between screen sharing and camera. You can take a look at the source code of WebRTCApp/index.html  to see the full implementation. Meanwhile, let me give some highlights about JavaScript API.

    • Firstly, There is a new callback with “screen_share_extension_available”. If callback function is called with this parameter, it means that Ant Media Server Screen Share extension is ready to use in the Chrome.

        var webRTCAdaptor = new WebRTCAdaptor({
        websocket_url : websocketURL,
        mediaConstraints : mediaConstraints,
        peerconnection_config : pc_config,
        sdp_constraints : sdpConstraints,
        localVideoId : "localVideo",
        debug:true,
        callback : function(info, description) {
             if (info == "initialized") {
            console.log("initialized");
    
             } else if (info == "publish_started") {
            //stream is being published
            console.log("publish started");
             } else if (info == "publish_finished") {
            //stream is being finished
            console.log("publish finished");
             }
             else if (info == "screen_share_extension_available") {
            console.log("screen share extension available");
              }
              else if (info == "closed") {
              //console.log("Connection closed");
              if (typeof description != "undefined") {
                console.log("Connecton closed: " + JSON.stringify(description));
              }
              }
        },
        callbackError : function(error, message) {
            //some of the possible errors, NotFoundError, SecurityError,PermissionDeniedError
    
                console.log("error callback: " +  JSON.stringify(error));
        }
    });
    
    • Secondly, if extension is available in the Chrome, you only need to call “webRTCAdaptor.switchDesktopCapture(streamId);” function to switch the Screen Sharing

      webRTCAdaptor.switchDesktopCapture(streamId);

    • Lastly, to switch back to camera,  just again call to “webRTCAdaptor.switchVideoCapture(streamId);” function.

      webRTCAdaptor.switchVideoCapture(streamId);

    Finally, that’s all. I hope this blog post will help some guys. You can use this feature on your project.

    If you have any question, please keep in touch.

    RTMP

    Publishing

    To stream your media with name <stream_name> to the Ant Media Server, you can use the following URL.

    rtmp://<AMS_Host>/<App_Name>/<stream_name>

    There are many ways to publish Live Stream with RTMP to Ant Media server. Here are the some of the ways:

    Publish with a Desktop Software

    OBS(Open Broadcaster Softeware) is Free and open source software for video recording and live streaming. You can use either your PC’s embedded camera or externally connected one as a video source with OBS. Sound sources also can be configured with it. Ant Media Server is fully compatible with OBS software.

    Let’s have a look at step by step how to use OBS for streaming:

    Step 1 : Getting the OBS:

    Download via its official web page. It has Windows, Mac, and Linux releases.

    Step 2 : Provide Sources:
    OBS (Open Broadcaster Software) interface

    OBS (Open Broadcaster Software) interface

    By default, OBS starts to capture from your embedded camera if exists after inilialized. You can add or remove video/audio source from Sources section, such as an image can be broadcasted as a video source or external microphone can be added as a audio source.

    Step 3: Create RTMP URL for Ant Media Server
    • If your server configuration accepts any stream just use a RTMP URL like this “rtmp:///LiveApp/” Use IP address or server fqdn in the place of and use any id/name for the
    • If your server only accepts registered live streams, you need to create live stream by Management console or rest services.
      • To reach the Management console go to http://:5080 address,
      • Click one of the apps like “LiveApp” from Applications section and click “New Live Stream”.
      • The server creates a live stream with an unique ID in the format of “rtmp:///LiveApp/325859929809451108600212”.
      • You can copy this url with clicking “Publish URL” button.
    Management Console New Live Stream

    Management Console New Live Stream

    Step 4: Configure the OBS

    You need to write live stream parameters to OBS in order to start broadcasting. * Click “Settings” then select “Stream” tab. * Split the rtmp:///LiveApp/ as the URL as the stream key * Write URL and stream key parameters as described in the below picture. Make sure that Stream ID should be written to Stream Key field not to the URL.

    OBS (Open Broadcaster Software) Stream Configuration

    OBS (Open Broadcaster Software) Stream Configuration

    Step 5: Start Stream and Watch 🙂
    • Close settings window and just click the “Start Streaming” button in the main window of OBS. You can watch stream from either Ant Media Management console or other platforms such as VLC player with same RTMP URL or with http:///LiveApp/streams/.m3u8 HLS

    Publish with a Hardware Encoder

    Teradek Vidiu Pro is fully compatible with Ant Media Server 1.2.0+ Let’s have a look at step by step how to use Teradek Vidiu Pro for streaming, firstly start by powering the Teradek Vidiu Pro

    Step 1 : Connect to Teradek Vidiu Pro WiFi Network.

    It creates a WiFi network with name VidiU−XXXXX. Connect that network with your computer and go to the 172.16.1.1 on your browser.

    Connect Teradek’s WiFi Network

    Connect Teradek’s WiFi Network

    Click “Settings” button on the top right and then click “Network” item in the screen.

    Configure Network Settings of Teradek Vidiu

    Configure Network Settings of Teradek Vidiu

    Step 2 :Configure Wireless Network Connection of Teradek Vidiu Pro

    Click the WiFi item. Choose “Client” mode and Click “Browse” button to lookup the WiFi networks around.

    Configure WiFi of Teradek Vidiu

    Configure WiFi of Teradek Vidiu

    Choose the WiFi you would like Teradek Vidiu Pro to connect from the list.

    Choose WiFi from list on Teradek Vidiu

    Choose WiFi from list on Teradek Vidiu

    Enter the password of the WiFi network and click “Apply” button on the top right

    Restart Teradek Vidiu Pro

    Connect to the same wireless network on your computer and check the IP address of the Teradek Vidiu Pro from device’s LED screen. Press Menu button on the device. Menu button is a joystick button as well. So go to the Network Settings > WiFi > Info to see the IP address of the device

    Sometimes you may need to power off / on the Teradek Vidiu Pro.

    Step 3 :Configure Broadcasting Settings

    Click the “Broadcast” item on the Settings screen

    Configure broadcast settings of Teradek Vidiu

    Configure broadcast settings of Teradek Vidiu

    Choose “Manual” from Mode then Enter Ant Media Server address to “RTMP Server URL” and write name of the stream to “Stream” box

    Click “Apply” button on the top right again

    Save broadcast settings of Teradek Vidiu Pro

    Save broadcast settings of Teradek Vidiu Pro

    Your device configuration is OK now.

    Step 4 : Start Broadcasting

    Connect the HDMI cable between HDMI source (camera, television or computer) and Teradek Vidiu Pro HDMI.

    Wait until to see the “Ready” text appears on the right top of Teradek Vidiu Pro’s LED screen. Then press “Start/Stop” button on the device, a message appears on the device asking confirmation about starting the broadcast. Press “Yes” and then broadcasting starts.

    Ant Media Server accepts that broadcast and can perform adaptive streaming, recording and publishing to any other 3rd party RTMP server as usual.

    When you are done about broadcasting, you can press “Start/Stop” button again to stop the broadcasting.

    Publish with a Mobile Application

    Let’s again have a look at step by step manner to make live broadcast from Android App

    Step 1 : Clone Git Repository
    git clone https://github.com/ant-media/LiveVideoBroadcaster.git
    
    Step 2 : Open the Project in Android Studio

    Open MainActivity.java file and assing the Server URL to RTMP_BASE_URL. It should be in the format like rtmp://<SERVER_NAME>/LiveApp/ . LiveApp is one of the default apps in Ant Media Server. Change it if you have something different.

    Step 3: Run the App

    When you run the app on an Android device, below screen should appear. Click Live Video Broadcaster button Live Video broadcaster Main Activity

    You should see the below screen Open Video Broadcaster

    Write a live stream name like “test” to edit text and press the button. Screen should be like below Android Live Broadcasting with RTMP

    Ant Media Server accepts again that broadcast and can perform adaptive streaming, recording and publishing to any other 3rd party RTMP server as usual.

    Playing

    To play a stream with name <stream_name> from Ant Media Server, you can play the following URL.

    rtmp://<AMS_Host>/<App_Name>/<stream_name>

    HLS

    Ant Media Server can convert the RTMP URL or WebRTC Stream to the HLS and can record in MP4.

    Play Live Streams with HLS

    Firstly, make sure that HLS muxing is enabled in your application. You can check it on web management panel and check the HLS Muxing box in Settings of the app.

    Assume that HLS Muxing is enabled and there is a stream publishing to Ant Media Server with an RTMP URL in this format: rtmp://<SERVER_NAME>/LiveApp/<STREAM_ID>

    • In Community Edition, HLS URL is in this format: http://<SERVER_NAME>:5080/LiveApp/streams/<STREAM_ID>.m3u8
    • In Enterprise Edition, HLS URL is in this format: http://<SERVER_NAME>:5080/LiveApp/streams/<STREAM_ID>_adaptive.m3u8

    Play VoD Streams with MP4

    Firstly, make sure again that MP4 muxing for live streams is enabled on your application. You can see that in the settings of the app on web management panel.

    Assume that there is a stream is publishing to the Ant Media Server with an URL in this format rtmp://<SERVER_NAME>/LiveApp/<STREAM_ID> .

    After publishing is finished, MP4 file will be created. * In community edition, MP4 URL will be available in this URL http://<SERVER_NAME>:5080/LiveApp/streams/<STREAM_ID>.mp4

    • In Enterprise Edition, MP4 for different bitrates is also created. Assume that you have 480p and 240p resolution enabled in adaptive bitrates settings. Then you will have two more mp4 files with following format
      • http://<SERVER_NAME>:5080/LiveApp/streams/<STREAM_ID>_480p.mp4
      • http://<SERVER_NAME>:5080/LiveApp/streams/<STREAM_ID>_240p.mp4

    Play Live and VoD streams with Embedded Player in Ant Media Server

    Both Community and Enterprise Edition have embedded player. It can play both Live and VoD streams. Again assume that there is a live stream in Ant Media Server with <STREAM_ID> then you can watch and embed the live the stream in following URL format

    http://<SERVER_NAME>:5080/LiveApp/play.html?name=<STREAM_ID>

    After live stream is finished, the URL above plays the recorded MP4 file if it is created.

    Get Preview Live and VoD Streams (Enterprise Only)

    • Preview image URL will be available in this URL template http://<SERVER_NAME>:5080/<APP_NAME>/previews/<STREAM_ID>.png
    • Preview image is saved as 480p
    • Preview settings on <ANT_MEDIA_SERVER_DIR>/webapps/<APP_NAME>/WEB-INF/red5-web.properties file
      • settings.createPreviewPeriod=<PERIOD_MS> : Preview image creation period in milliseconds
      • settings.addDateTimeToMp4FileName : true or false. If true, adds date time value to preview file names. If false, it does not add date time values to preview file names
      • settings.previewOverwrite : true or false. If false, when a new stream is received with the same stream id, _N (increasing number) suffix is added to preview file name. If true, new preview file is replaced with the old file with .png when a new stream with the same stream id is received.

    Low Latency WebRTC Live Streaming

    Ant Media Server 1.2.0+ Enterprise Edition supports adaptive low latency WebRTC streaming.

    In addition, Ant Media Server can * Record WebRTC streams as MP4 and MKV * Convert WebRTC streams to adaptive live HLS * Create previews in PNG format from WebRTC streams

    Download

    Firstly, you need to have Ant Media Server Enterprise Edition. If you are a personal user and just want to try, contact with us at antmedia.io. We will reply back by providing Ant Media Server Enterprise Edition to try.

    If you are a professional user and need support, you can buy support at antmedia.io as well

    Quick Start

    Ant Media Server 1.2.0+ runs on Linux and Mac not on Windows.

    Let’s start, we assume that you have got Enterprise Edition somehow and downloaded to your local computer

    1. Follow the instructions on [Getting Started] for installation (https://github.com/ant-media/Ant-Media-Server/wiki/Getting-Started)

    2. Open the browser(Chrome or Firefox) and go to the http://localhost:5080/WebRTCAppEE. Let browser access your camera and mic unless it cannot send WebRTC Stream to the server

      Open WebRTCAppEE

      Open WebRTCAppEE

      WebRTCAppEE stands for WebRTCApp Enterprise Edition

    3. Write stream name or leave it as default and Press Start Publishing button. After you press the button, “Publishing” blinking text should appear

      Press Start Publishing button

      Press Start Publishing button

    4. Go to the http://localhost:5080/WebRTCAppEE/player.html

      Go to the player.html

      Go to the player.html

    5. Press Start Play button. After you press the button, webrtc stream should be started

      Press Start Playing Button

      Press Start Playing Button

    6. Open http://localhost:5080/WebRTCAppEE/player.html in other tabs and Press Start Playing button again to check how it plays and what the latency is.

    Running on Remote Instances - Enable SSL For Ant Media Server Enterprise

    If you are running the Ant Media Server Enterprise Edition in remote computer/instances, you may need SSL. If so, please follow the Enable SSL doc or this blog post.

    Feedbacks

    Please let us know your feedbacks about the latency and streaming or any other issue you have faced so that we can improve and let you try and use.

    You can use contact form at antmedia.io or contact at antmedia dot io e-mail to send your feedbacks

    Thank you

    Ant Media

    Low Latency Publish with RTMP & Play with WebRTC

    Developers can make their app users broadcast live video not only from their browser with WebRTC, but also from OBS, thanks to WebRTC Adapter. Let’s start with introducing OBS which stands for Open Broadcaster Software. OBS is a free open source software for video recording and live streaming. You can use either your PC’s embedded camera or externally connected one as a video source with OBS. Sound sources also can be configured with it. Ant Media Server Enterprise is fully compatible with OBS.

    Let’s have a look at step by step how to use OBS for streaming: ### Step 1: Getting the OBS:

    Download via its official web page. It has Windows, Mac, and Linux releases.

    OBS Image

    OBS Image

    RTMP stream from OBS for WebRTC replay

    By default, OBS starts to capture from your embedded camera if exists after initialized. You can add or remove video/audio source from Sources section, such as an image can be broadcasted as a video source or external microphone can be added as an audio source.

    Contact with us from contact form in order to try Ant Media Server Enterprise Edition. Extract the Ant Media Server Enterprise zip file and start the server with start.sh command in the terminal. For detailed information please follow steps described in the Getting Started.

    cd /path/to/ant-media-server
    
    ./start.sh
    

    After that, you need to create a live stream on Ant Media Server Enterprise Management console. You can reach it at http://<server-address>:5080 address, then click WebRTCAppEE from Applications section and New Live Stream. The server creates a live stream with an unique ID with the format of rtmp://<server-address>/WebRTCAppEE/325859929809451108600212. You can copy this url with clicking clipboard icon.

    Ant Media Server Dashboard Ant Media Server Dashboard

    You need to write live stream parameters to OBS in order to start broadcasting. Click Settings then select Stream tab. Split the rtmp://<server-address>/WebRTCAppEE/325859929809451108600212 url and and write url and stream key parameters as described in the below image. Make sure that Stream ID should be written to Stream Key field, not to the url.

    OBS (Open Broadcaster Software) Stream Configuration OBS and Ant Media Server

    If you want to decrease latency as well, you can ``tune`` encoder for ``zerolatency`` in encoder settings.

    Close settings window and just click the Start Streaming button in the main window of OBS. You can watch WebRTC stream from either Ant Media Management console or other platforms such as VLC player with same RTMP URL.

    To Play with WebRTC, go to http://<server-address>:5080/WebRTCAppEE/player.html and enter the stream key parameter and click “Start Playing” button.

    WebRTC Play - Ant Media Server

    WebRTC Play - Ant Media Server

    You can also play on Ant Media Management console which plays via HLS at about 8-10 seconds latency. A dialog will be displayed where you can watch the live stream.

    Ant Media Server Management Console

    Ant Media Server Management Console

    In order to reduce latency in RTMP streaming, please follow the instructions here

    We hope this tutorial will be helpful for you 🙂 please feel free in case you have any question, just send an email (contact at antmedia.io) or contact with us from contact page.