Remote preview and control for a playout application using WebRTC

This post explains how to remotely view and control your playlist with the WebRTC features in MPlatform SDK.


Deploy your signaling  server and HTML pages as described here or just skip this step and use our public signaling server with a local HTML file our public HTML page.


Run sample application. 

- MPlatform SDK:  "C:\Program Files (x86)\Medialooks\MPlatform SDK\Samples WebRTC\C#\Sample Streaming To Browser\bin\x86\Debug\Sample Streaming To Browser.exe" 

- MFormats SDK: "C:\Program Files (x86)\Medialooks\MFormats SDK\Samples WebRTC\C#\Sample Streaming To Browser\bin\x86\Debug\Sample Streaming To Browser.exe" 


During startup, the application will automatically connect to your signaling server. Load file and start the playback in the application to get some cool video playing. Finally, click on the link on the form to open it in your Google Chrome (Firefox) browser. The web page will load and connect to the signaling server as well. It will establish a peer-to-peer connection with the application and you'll be able to see the same video in the browser. Like this:




Please note that there are 3 types of URL available for tests: 

  • Local file URL - just a HTML file in MPlatfrom installation folder. You can use it to try the preview locally. 
  • Local server URL - it's a default URL of the page deployed to your locel web server. You can use it locally or shere the preview with someone else if they have access to your local web server.
  • Medialooks server URL - it's a HTML page deployed to our server. You can use it to control your application over the internet or even share with someone else. Send this link to your freinds and let them preview or control your playout application! 


The code behind is quite simple. 

- MPlatform SDK: 


On the startup of the sample, the MWebRTC instance is created. Then it logs into signaling server and joins some room:


// WebRTC class is used to send audio/video to a remote peer
MWebRTCClass m_objWebRTC = new MWebRTCClass();

// Login to signaling server. We will use default Medialooks one and room named "room555"
// Webpage client will join the same room
m_objWebRTC.Login("https://medialooks.com:8889/room555", "Sender", out myId);


Also the events handler is added to listen messages from web pages:


//We need to handle WebRTC object events to be able to get messages  
m_objWebRTC.OnEvent += new IMEventsEvent_OnEventSafeEventHandler (m_objWebRTC_OnEvent);  
 
//Handle remote messages
void m_objWRTC_OnEvent(string bsChannelID, string bsEventName, string bsEventParam, object pEventObject)  
{  
    if (bsEventName == "message")  
    {  
        //Parse message and control your object  
    }  
}


Finally MFWebRTC object is added as the plugin to playlist object:


//Add WebRTC plugin to start network streaming   
//Web clients can connect\disconnect at any time  
m_objPlaylist.PluginsAdd(m_objWebRTC, 0);

- MFormats SDK:
Once the MWebRTC instance is created, specify peer name and signaling server:

// WebRTC class is used to send audio/video to a remote peer
MWebRTCClass m_objWebRTC = new MWebRTCClass();

// Login to signaling server. We will use default Medialooks one and room named "room555"
// Webpage client will join the same room
m_objWebRTC.Login("https://medialooks.com:8889/room555", "Sender", out myId);

Subscribe to the events to listen messages from web pages: 
//Handle remote messages
void m_objWRTC_OnEvent(string bsName, string bsEventName, string bsEventParam, object pEventObject)
{
    if (bsEventParam != null && bsEventParam.Length > 0)
    {
             //Parse bsEventParam message here
    }
}

Make a separate thread and start putting frames into MWebRTC object to transmit the stream to the page.

//Send to WebRTC channel to be received by all viewers 
m_objWRTC.ReceiverFramePut(pFrame, 0, "");

That's it - looks pretty simple. We hope you will like this and are open to all kinds of feedback with regards to this area of development.