top

Managing PiP Windows

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

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

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

Prerequisites

To use the TVWindow, TVChannel, 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.channel"/> 
<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 the TV Channel

To switch the TV channel in the PiP window, you must use the TVChannel API. The remote control channel keys do not handle this automatically.

tizen.tvchannel.tuneUp(
  function(success){
    console.log('success');
  },
  function(fail){
    console.log('fail');
  },
  'ALL'
);
Note

The channel banner is not shown on the application. You must make it independently, using an HTML element.

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');
  }
);