Managing PiP Windows

This topic describes how to show device source video in your application, using picture-in-picture.

You can use picture-in-picture (PiP) to display device source video, such as a TV channel or HDMI input, on your application.

All Samsung devices based on Tizen since 2015 support PiP. PiP is also supported on the TV emulator since Tizen TV Extension 2.1.2.

Prerequisites

To use the TVWindow, and TVAudioControl APIs, the application has to request permission by adding the following privileges to the "config.xml" file:

<tizen:privilege name="http://tizen.org/privilege/tv.window"/> 
<tizen:privilege name="http://tizen.org/privilege/tv.audio"/>

Creating and Hiding a PiP Window

To create a PiP window, call the show() method of the TVWindow API:

tizen.tvwindow.show(
  function(success){
    console.log('success');
  },
  function(fail){
    console.log('fail');
  },
  ['0px', '0px', '50%', '540px'],
  'MAIN',
);

Note

The PiP window is created on top of and covers HTML elements.

To hide the PiP window, call the hide() method:

tizen.tvwindow.hide(
  function(success){
    console.log('success');
  },
  function(fail){
    console.log('fail');	
  }
);

Controlling Audio Volume

The audio volume of the PiP window can be controlled using the volume keys on the remote control, or using the TVAudioControl API:

tizen.tvaudiocontrol.setVolumeUp();

Changing the Video Source

To change the video source of the PiP window, use the setSource() method of the TVWindow API:

tizen.systeminfo.getPropertyValue(
  'VIDEOSOURCE', 
  function(videoSource) {
    console.log('success');

    var connectedVideoSources = videoSource.connected;
    for (var i = 0; i < connectedVideoSources.length; i++) {
      if (connectedVideoSources[i].type === 'HDMI') {
        tizen.tvwindow.setSource(
          connectedVideoSources[i],
          function(success){
            console.log('success');
          },
          function(fail){
            console.log('fail');
          });
        break;
      }
    }
  },
  function(fail){
    console.log('fail');
  }
);