Play SBS Videos in 4V

In the previous section, we seen how to play a Quad video in 4V using the ExoPlayer. Playing a SBS video is very similar to playing a Quad video using the SDK.
For this section, we will stream a 2x1 video using ExoPlayer.
Resources
For this section, we will be working with a SBS video. We will be streaming the video using this url
https://dev.streaming.leialoft.com/out/v1/08cd49f09fbc4a1e9c063424fa0bfc00/7845cda1bdd5494db13a24f5d13374ea/adacb4edf0434177ae441f124d989fe7/index.mp
dev.streaming.leialoft.com
As we are going to be streaming the 2x1 video from the internet, you need to add the Internet permission in your app's manifest file.
1
<uses-permission android:name="android.permission.INTERNET"/>
Copied!
Setup Environment
Setup the Android SDK in your Android project by following the steps outlined in the Getting Started Section.
We will also need to add the ExoPlayer dependency to our project. Add the following dependency to your app's build.gradle file.
1
implementation 'com.google.android.exoplayer:exoplayer:2.11.7'
Copied!
Add the QuadView to your XML Layout file
1
  <com.leiainc.androidsdk.core.QuadView
2
    android:id="@+id/quad_view"
3
    android:layout_width="match_parent"
4
    android:layout_height="match_parent"/>
Copied!
The QuadView is a reusable Android view which allows you to easily render a quad with just one line of code.
Link the QuadView to your Activity or Fragment
Obtain the reference to the QuadView in your Activity or Fragment using findViewById()
Kotlin
Java
1
val quadView: QuadView = findViewById(R.id.quad_view)
Copied!
1
 QuadView quadView = findViewById(R.id.quad_view);
Copied!
Implement SurfaceTextureReady Callbacks
In order to play videos on the QuadView, you need to obtain the SurfaceTexture when it becomes available. You can do so by implementing the SurfaceTextureReadyCallback which will notify you when the Surface Texture becomes available via callbacks. 
Kotlin
Java
1
class VideoActivity : AppCompatActivity(), SurfaceTextureReadyCallback {
2
    // rest of activity code
3
    
4
    override fun onSurfaceTextureReady(surfaceTexture: SurfaceTexture?) {
5
        TODO("Not yet implemented")
6
    }
7
}
Copied!
1
public class VideoActivity extends AppCompatActivity implements SurfaceTextureReadyCallback {
2
    // rest of activity code
3
    
4
    @Override
5
    public void onSurfaceTextureReady(SurfaceTexture surfaceTexture) {
6
       // TODO
7
    }
8
}
Copied!
Attach Callbacks to QuadView
We now have to attach the callback to the QuadView. This registers the callback so the QuadView can notify us when the surface texture becomes available. We can do this by calling getInputSurfaceTexture() as shown below
Kotlin
Java
1
val quadView: QuadView = findViewById(R.id.quad_view)
2
quadView.getInputSurfaceTexture(this)
Copied!
1
QuadView quadView = findViewById(R.id.quad_view);
2
quadView.getInputSurfaceTexture(this);
Copied!
Initialize ExoPlayer
Initialize the ExoPlayer in your Activity's onCreate() function. Add exoPlayer as a global variable so it can be accessed in other functions as well.
Kotlin
Java
1
private lateinit var exoPlayer: SimpleExoPlayer
2
​
3
override fun onCreate(savedInstanceState: Bundle?) {
4
    super.onCreate(savedInstanceState)
5
    setContentView(R.layout.activity_video)
6
    val quadView: QuadView = findViewById(R.id.quad_view)
7
    quadView.getInputSurfaceTexture(this)
8
​
9
    // Initialize ExoPlayer
10
    exoPlayer = SimpleExoPlayer.Builder(this).build()
11
}
Copied!
1
private SimpleExoPlayer exoPlayer;
2
​
3
 @Override
4
 public void onCreate(Bundle savedInstanceState) {
5
     super.onCreate(savedInstanceState);
6
     setContentView(R.layout.activity_video);
7
     
8
     QuadView quadView = findViewById(R.id.quad_view);
9
     quadView.getInputSurfaceTexture(this);
10
     
11
     // Initialize ExoPlayer
12
    exoPlayer = SimpleExoPlayer.Builder(this).build();
13
}
Copied!
Initialize SBS Video Surface Renderer
This step is where it gets a bit different from playing a regular Quad video. For SBS videos, we need to first pass the surface to the SBS Surface Renderer. The SBS Surface renderer performs real time conversion from 2x1 to 2x2. 
You can obtain the converted surface texture via callbacks. Pass this surface to the ExoPlayer to play the video in 4V.
Kotlin
Java
1
class VideoActivity : AppCompatActivity(), SurfaceTextureReadyCallback {
2
    // rest of activity code
3
    private lateinit var sbsVideoSurfaceRenderer: SbsVideoSurfaceRenderer
4
    
5
    override fun onSurfaceTextureReady(surfaceTexture: SurfaceTexture?) {
6
        // Initialize and pass in surface texture to the SBSVideoSurfaceRenderer
7
        if (sbsVideoSurfaceRenderer == null) { 
8
            sbsVideoSurfaceRenderer = SbsVideoSurfaceRenderer(
9
                        this,
10
                        Surface(surfaceTexture),
11
                        TextureShape.LANDSCAPE,
12
                ) {
13
                    configureExoplayer(it)
14
              }
15
         }
16
    }
17
}
18
​
19
 private fun configureExoplayer(surfaceTexture: SurfaceTexture) {
20
        // Note: This is appropriate for 2x2 textures on Hydrogen One.
21
        exoPlayer.setVideoSurface(Surface(surfaceTexture))
22
        val userAgent = Util.getUserAgent(this, "exoplayer2example")
23
        val uri = Uri.parse(
24
            "https://dev.streaming.leialoft.com/out/v1/08cd49f09fbc4a1e9c063424fa0bfc00/7845cda1bdd5494db13a24f5d13374ea/adacb4edf0434177ae441f124d989fe7/index.mpd"
25
        )
26
        val dataSourceFactory: DataSource.Factory = DefaultHttpDataSourceFactory(userAgent)
27
        val videoSource: MediaSource =
28
            DashMediaSource.Factory(dataSourceFactory).createMediaSource(uri)
29
        val loopingSource = LoopingMediaSource(videoSource)
30
        exoPlayer.prepare(loopingSource)
31
    }
Copied!
1
public class VideoActivity extends AppCompatActivity implements SurfaceTextureReadyCallback {
2
    private SbsVideoSurfaceRenderer sbsVideoSurfaceRenderer = null;
3
    
4
    @Override
5
    public void onSurfaceTextureReady(SurfaceTexture surfaceTexture) {
6
        if (sbsVideoSurfaceRenderer == null) {
7
           sbsVideoSurfaceRenderer = SbsVideoSurfaceRenderer(
8
                        this,
9
                        new Surface(surfaceTexture),
10
                        TextureShape.LANDSCAPE,
11
                        (surfaceTexure) -> {
12
                            configureExoplayer(surfaceTexture);
13
                        });
14
        }
15
    }
16
    
17
    private void configureExoplayer(SurfaceTexture surfaceTexture) {
18
        exoPlayer.setVideoSurface(new Surface(surfaceTexture));
19
        
20
        String userAgent = Util.getUserAgent(this, "exoplayer2example");
21
        Uri uri = Uri.parse(
22
            "https://dev.streaming.leialoft.com/out/v1/08cd49f09fbc4a1e9c063424fa0bfc00/7845cda1bdd5494db13a24f5d13374ea/adacb4edf0434177ae441f124d989fe7/index.mpd"
23
        );
24
        DataSource.Factory dataSourceFactory = new DefaultHttpDataSourceFactory(userAgent);
25
        MediaSource videoSource =
26
            DashMediaSource.Factory(dataSourceFactory).createMediaSource(uri);
27
        LoopingMediaSource loopingSource = new LoopingMediaSource(videoSource);
28
        
29
        exoPlayer.prepare(loopingSource);
30
    }
31
}
Copied!
Playing the Video
With the ExoPlayer now setup, we can play the video by calling playWhenReady() in your Activity's onResume() function.
Kotlin
Java
1
override fun onResume() {
2
    super.onResume()
3
    exoPlayer.playWhenReady = true
4
}
Copied!
1
@Override
2
protected void onResume() {
3
    super.onResume();
4
    exoPlayer.setPlayWhenReady(true);
5
}
Copied!
Pause playing the video when the activity's onPause() is called.
Kotlin
Java
1
override fun onPause() {
2
    super.onPause()
3
    exoPlayer.playWhenReady = false
4
}
Copied!
1
@Override
2
protected void onPause() {
3
    super.onPause();
4
    exoPlayer.setPlayWhenReady(false);
5
}
Copied!
You can learn more about using the ExoPlayer here.
Toggle the Backlight
The last step is to switch on the backlight to view the image in 4V. We can request toggling backlight using the LeiaDisplayManager . 
Place the following line of code in your Activity/Fragment's onResume() function. 
Kotlin
Java
1
override fun onResume() {
2
   super.onResume()
3
   exoPlayer.playWhenReady = true
4
   
5
   val displayManager: LeiaDisplayManager? = LeiaSDK.getDisplayManager(applicationContext)
6
   displayManager?.requestBacklightMode(LeiaDisplayManager.BacklightMode.MODE_3D)
7
}
Copied!
1
@Override
2
protected void onResume() {
3
    super.onResume();
4
    exoPlayer.setPlayWhenReady(true);
5
    
6
    LeiaDisplayManager displayManager = LeiaSDK.getDisplayManager(applicationContext);
7
    displayManager.requestBacklightMode(LeiaDisplayManager.BacklightMode.MODE_3D);
8
}
Copied!
This will turn on the backlight on a Leia Light-field device.
To turn off the backlight, you can call the same line of code with BacklightMode.MODE_2D. Its a good practice to turn off the backlight in your activity's onPause() function. This ensures the backlight is turned off when the user exits the app.
Kotlin
Java
1
override fun onPause() {
2
   super.onPause()
3
   exoPlayer.playWhenReady = false
4
   
5
   val displayManager: LeiaDisplayManager? = LeiaSDK.getDisplayManager(applicationContext)
6
   displayManager?.requestBacklightMode(LeiaDisplayManager.BacklightMode.MODE_2D)
7
}
Copied!
1
@Override
2
protected void onPause() {
3
    super.onPause();
4
    exoPlayer.setPlayWhenReady(false);
5
    
6
    LeiaDisplayManager displayManager = LeiaSDK.getDisplayManager(applicationContext);
7
    displayManager.requestBacklightMode(LeiaDisplayManager.BacklightMode.MODE_2D);
8
}
Copied!
You can learn more about the LeiaDisplayManager here.
Build your app
If you followed the steps above correctly, you should be able to play the SBS video in 4V. If you had trouble following the steps, you can checkout the sample app on Github
​Play SBS Video Sample​