RTP/UDP Streaming for Web Applications

The Transport Stream (TS) protocol specifies a container format for encapsulating packetized elementary streams, with error correction and synchronization pattern features.

Samsung Hospitality Display devices support RTP/UDP live streaming in the following ways:

In addition, you can play content in several rotation modes, or control closed captions within the streaming content.

Prerequisites

  • A wired network connection is necessary for RTP/UDP streaming.
  • IPv4 multicasting requires the IGMPv2 protocol, or a newer version.
  • The network switch or router needs to support 80MBps data transfer.
  • In UDP streams, a UDP packet needs to start with the sync byte x47.
  • The UDP stream URL must be in udp://IP:Port format.
  • RTP streams use the same specification as UDP, except URL format, which is rtp://IP:Port.
  • An IP network with multicast support is required for streaming solution.

Multicast address rules:

  • The address range between 234.0.0.0 and 238.255.255.255 is recommended for streaming.
  • The first 3 octets of the IPv4 address range must be same for a group, and the last octet needs to be unique for multicast streams. For example, 235.10.1.xxx
  • The address ranges 224.x.x.x and 239.x.x.x must not be used for multicast streams.

Clear Transport Stream Playback

Clear Transport Stream playback refers to playing streaming content without DRM.

  • To play streaming content without DRM, use the AVPlayExtension API.

  • To use this API, include the "avplayextension.js" file in the "index.html" file.

     <script type="text/javascript" src="$WEBAPIS/avplayextension/avplayextension.js"></script>

Sample code:

var player = webapis.avplay; 
var url ="udp://<IP>:<Port>";  
var listener = function() { 
  onevent: function(eventType, eventData) { 
    console.log("event type error : " + eventType + ", data: " + eventData); 
  }, 

  ondrmevent: function(drmEvent, drmData) { 
    console.log("DRM callback: " + drmEvent + ", data: " + drmData); 
  }, 

  onerror: function(eventType) { 
    console.log("event type error : " + eventType); 
  } 
}  

try { 
  player.open(url); 
  player.setDisplayRect(0, 0, 1920, 1080); 
  player.setListener(listener); 
  player.prepareAsync(function() { 
    player.play(); 
  });                
 } catch (error) { 
  console.log("Error name = "+ error.name + ", Error message = " + error.message); 
}

DRM-Encrypted Transport Stream Playback

You can also play streaming content that has been encrypted with DRM. You can refer to the supported streaming protocols and DRMs here.

  • Before you can play encrypted content, you must first execute the setDrm() method.

  • The security privilege must be declared in the "config.xml" file:

    <tizen privilege name="http://developer.samsung.com/privilege/drmplay"/>

Sample code:

var player = webapis.avplay; 
var url = "udp://231.1.1:12345";  
var listener = function() { 
  onevent: function(eventType, eventData) { 
    console.log("event type error : " + eventType + ", data: " + eventData); 
  }, 

  ondrmevent: function(drmEvent, drmData) { 
    console.log("DRM callback: " + drmEvent + ", data: " + drmData); 
  }, 
  
  onerror: function(eventType) { 
    console.log("event type error : " + eventType); 
  } 
}  

var drmParam = { 
  LYNKServer:"NONE", // No LYNK server required 
  type: "1" 
 }; 

try { 
  player.open(url); 
  player.setDisplayRect(0, 0, 1920, 1080); 
  player.setListener(listener); 
  player.setDrm("LYNK", "Initialize", JSON.stringify(drmParam)); 
  player.prepareAsync(function() { 
    player.play(); 
  });                  
} 
catch (error) { 
  console.log("Error name = "+ error.name + ", Error message = " + error.message); 
}

Controlling Streaming Content Orientation

You can change the streaming content orientation using the setDisplayRotation() method of the AVPlay API.

The following orientation values are supported:

  • PLAYER_DISPLAY_ROTATION_NONE
  • PLAYER_DISPLAY_ROTATION_90
  • PLAYER_DISPLAY_ROTATION_180
  • PLAYER_DISPLAY_ROTATION_270

Sample code:

webapis.avplay.setDisplayRotation("PLAYER_DISPLAY_ROTATION_NONE");

Closed Captions for UDP Streaming

The TvInfo API is needed to enable or disable captions in streams containing them.
This API is supported for US device models.

  • Use the AVPlayExtension API to play streaming content.

  • Use the TvInfo API to enable or disable closed captions in the stream.

  • To use these APIs, include the WebAPI libraries in the "index.html" file.

    <head>
 <script type="text/javascript" src="$WEBAPIS/webapis/webapis.js"></script>
</head>

Sample code:

var player = webapis.avplay;

var url = "udp://231.1.1.21:12345";
var rtpUrl = "rtp://239.10.10.21:12345";

//Listener for Player
var listener = {
  onbufferingstart: function() {
    console.log("Buffering started");
  },
  
  onbufferingprogress: function(percent) {
    document.getElementById('test').innerHTML = '<br/>'+'Buffering progress, '+percent+' percent<br/>';
    console.log("Buffering progress "+percent+" percent");
  },
  
  onbufferingcomplete: function() {
    console.log("Buffering completed");
  },
  
  oncurrentplaytime: function(currentTime) {
    //console.log("current playtime :: " + currentTime);
  },
  
  onevent: function(eventType, eventData) {
    console.log("onevent " + eventType + " data " + eventData);        	
  },
  
  onstreamcompleted: function() {
    console.log("Stream completed");               
  },
  
  onerror: function(eventType) {
    console.log("Error has occurred: "+eventType);
  },
  
  onsubtitlechange: function(duration, text, data3, data4) {
    console.log("Subtitle changed: duration = "+duration+" | text = "+text+" | data3 = "+data3+" | data4 = "+data4);
  },
  
  ondrmevent: function(drmEvent, drmData) {
    console.log("DRM callback: " + drmEvent + ", data: " + drmData);
  }
};

// Start playback for streaming
var play = function(url) {	
  try {
    player.open(url);
    player.setDisplayRect(0, 0, 1920, 1080);
    player.setListener(listener);
    player.prepareAsync(function() {
      player.play();
    });
  } catch (error) {
    console.log("Could not play the requested URL: "+url+" - exception occurred:"+error+" Error name = "+ error.name + ", Error message = " + error.message);
  }
};

// Stop playback for streaming
function stop() {
  try {
    if (player.getState() !== 'NONE') {
      player.stop();
    }
  } catch (error) {
      console.log("Could not stop the requested URL: "+url+" - exception occurred:"+error+" Error name = "+ error.name + ", Error message = " + error.message);
  }
}

// Call sequence for enabling closed captions in streaming 
var key = webapis.tvinfo.TvInfoMenuKey.CAPTION_ONOFF_KEY;
console.log('key:'+ key);
var value = webapis.tvinfo.TvInfoMenuValue.CAPTION_ON;
console.log('value:'+ value);
var onsuccess = function() {
  console.log("Captions enabled");
};

var onerror = function() {
  console.log("Error has occurred");
};
webapis.tvinfo.setMenuValue(key, value, onsuccess, onerror);

// Call sequence for disabling closed captions in streaming 
var key = webapis.tvinfo.TvInfoMenuKey.CAPTION_ONOFF_KEY;
console.log('key:'+ key);
var value = webapis.tvinfo.TvInfoMenuValue.CAPTION_OFF;
console.log('value:'+ value);
var onsuccess = function() {
  console.log("Captions disabled");
};
var onerror = function() {
  console.log("Error has occurred");
};
webapis.tvinfo.setMenuValue(key, value, onsuccess, onerror);