Unified Video Participant: Composing Cross-Platform for iOS, Android & Desktop | by Kashif Mehmood | July 2023

Unlock Cross-Platform Enjoyable: Introducing Compose Cross-Platform Video Participant for iOS, Android & Desktop!

A lot of you who’ve labored with XML and within the outdated days of ExoPlayer know the way tough it’s to combine a video participant into an utility. Thankfully, with Jetpack Compose, issues have improved dramatically. However even higher than Compose itself is Compose Multiplatform, which permits Android builders to turn into ‘iOS lite’ builders.

On this puzzle, nonetheless, some items are lacking, and as Physician Unusual put it, “Within the common calculus of the multiverse, some views ought to keep the identical, or else there will likely be no authentic.” One in all these views is the video participant; it must be platform-specific, in any other case the app will lack the native really feel of every platform. Nobody needs to make use of an iPhone and get an Android-like video participant.

So let’s get began.

Anticipate the precise mechanism:

When you’ve had expertise with KMM, you are in all probability aware of the expectation/actuality mechanism. We are able to use it to make VideoPlayer perform as anticipated perform and every platform will present its precise implementation.

@Composable
count on enjoyable VideoPlayer(modifier: Modifier, url: String)

On this strategy, it’s thought-about an excellent observe to move the Modifier as the primary parameter to each Composable perform. It permits you to customise the aspect with out altering its inner modification string.

Then every platform (Android, iOS, and so forth.) will implement the precise VideoPlayer performance with platform-specific code whereas adhering to the identical anticipated perform signature. Add sensible performance to all platforms.

@Composable
precise enjoyable VideoPlayer(modifier: Modifier, url: String) {
// Platform-specific implementation right here
}

Android Deployment:

As an Android developer, you are in all probability aware of ExoPlayer, a media participant library for Android.

Step 1:

Add ExoPlayer dependency to Android Principal in shared module’s construct.gradle file

     val androidMain by getting {
dependencies {
implementation("androidx.media3:media3-exoplayer:1.1.0")
implementation("androidx.media3:media3-exoplayer-dash:1.1.0")
implementation("androidx.media3:media3-ui:1.1.0")
}
}

Now you need to add the precise implementation of your Video participant. To try this you need to go to the primary Android the place you created the precise perform and add this code.

@Composable
precise enjoyable VideoPlayer(modifier: Modifier, url: String){
AndroidView(
modifier = modifier,
manufacturing unit = { context ->
VideoView(context).apply {
setVideoPath(url)
val mediaController = MediaController(context)
mediaController.setAnchorView(this)
setMediaController(mediaController)
begin()
}
},
replace = {})
}

Within the precise implementation of the video participant for Android, we’ll use AndroidView composable to wrap ExoPlayer performance inside an Android View. VideoPlayer for Android is utilizing ExoPlayer internally by means of VideoView wrapped inside composable AndroidView, permitting us to play video in cross-platform.

Fairly easy?

iOS Deployment:

In iOS implementation, we are able to combine AVPlayer and UIKit views utilizing Kotlin’s C-Interop. First, we create an AVPlayer occasion with the supplied URL and use AVPlayerLayer and AVPlayerViewController. AVPlayerViewController handles playback controls and feels pure. AVPlayer is just like ExoPlayer in Android.

 val participant = bear in mind { AVPlayer(uRL = NSURL.URLWithString(url)!!) }
val playerLayer = bear in mind { AVPlayerLayer() }
val avPlayerViewController = bear in mind { AVPlayerViewController() }
avPlayerViewController.participant = participant
avPlayerViewController.showsPlaybackControls = true
playerLayer.participant = participant

Composable UIKitView is used to combine AVPlayerViewController with present UIKit views. The participant container view is created and the AVPlayerViewController’s view is added as a subview. The onResize callback ensures the participant’s body is adjusted accurately. As soon as the view is up to date, the participant will begin enjoying. You may see right here the modifier we handed can be utilized instantly on UIKitView

 // Use a UIKitView to combine along with your present UIKit views
UIKitView(
manufacturing unit = {
// Create a UIView to carry the AVPlayerLayer
val playerContainer = UIView()
playerContainer.addSubview(avPlayerViewController.view)
// Return the playerContainer as the basis UIView
playerContainer
},
onResize = { view: UIView, rect: CValue ->
CATransaction.start()
CATransaction.setValue(true, kCATransactionDisableActions)
view.layer.setFrame(rect)
playerLayer.setFrame(rect)
avPlayerViewController.view.layer.body = rect
CATransaction.commit()
},
replace = { view ->
participant.play()
avPlayerViewController.participant!!.play()
},
modifier = modifier)

Our Remaining perform will seem like this,

@Composable
precise enjoyable VideoPlayer(modifier: Modifier, url: String) {
val participant = bear in mind { AVPlayer(uRL = NSURL.URLWithString(url)!!) }
val playerLayer = bear in mind { AVPlayerLayer() }
val avPlayerViewController = bear in mind { AVPlayerViewController() }
avPlayerViewController.participant = participant
avPlayerViewController.showsPlaybackControls = true
playerLayer.participant = participant
// Use a UIKitView to combine along with your present UIKit views
UIKitView(
manufacturing unit = {
// Create a UIView to carry the AVPlayerLayer
val playerContainer = UIView()
playerContainer.addSubview(avPlayerViewController.view)
// Return the playerContainer as the basis UIView
playerContainer
},
onResize = { view: UIView, rect: CValue ->
CATransaction.start()
CATransaction.setValue(true, kCATransactionDisableActions)
view.layer.setFrame(rect)
playerLayer.setFrame(rect)
avPlayerViewController.view.layer.body = rect
CATransaction.commit()
},
replace = { view ->
participant.play()
avPlayerViewController.participant!!.play()
},
modifier = modifier)
}

and we’re performed. You should use all out there uikit views utilizing this technique akin to audio participant, digital camera and so forth.

and we’re performed.

Implement the desktop:

Integrating video playback in Compose Desktop is a bit sophisticated, however doable. We use SwingPanel, add VLC dependency to Desktop Principal

    SwingPanel(
manufacturing unit = manufacturing unit,
background = Coloration.Clear,
modifier = modifier,
replace = {
}
)

    val desktopMain by getting {
dependencies {
implementation("uk.co.caprica:vlcj:4.7.0")


}
}

Right here is an easy VideoPlayer implementation with VLCJ. It initializes the media participant, performs video URLs, and handles macOS-specific participant elements. Now you possibly can take pleasure in video playback on Compose Desktop! ❤️

@Composable
enjoyable VideoPlayerImpl(
url: String,
modifier: Modifier,
) {
val mediaPlayerComponent = bear in mind { initializeMediaPlayerComponent() }
val mediaPlayer = bear in mind { mediaPlayerComponent.mediaPlayer() }
val manufacturing unit = bear in mind { { mediaPlayerComponent } }


LaunchedEffect(url) { mediaPlayer.media().play/*OR .begin*/(url) }
DisposableEffect(Unit) { onDispose(mediaPlayer::launch) }
SwingPanel(
manufacturing unit = manufacturing unit,
background = Coloration.Clear,
modifier = modifier,
replace = {


}
)
}


personal enjoyable initializeMediaPlayerComponent(): Part {
NativeDiscovery().uncover()
return if (isMacOS()) {
CallbackMediaPlayerComponent()
} else {
EmbeddedMediaPlayerComponent()
}
}


personal enjoyable Part.mediaPlayer() = when (this) {
is CallbackMediaPlayerComponent -> mediaPlayer()
is EmbeddedMediaPlayerComponent -> mediaPlayer()
else -> error("mediaPlayer() can solely be referred to as on vlcj participant elements")
}


personal enjoyable isMacOS(): Boolean 

and performed ❤.

Composer desktop multiplatform video participant is experimental and might be discovered This.

Consequence:

Repository hyperlink: https://github.com/Kashif-E/Compose-Multiplatform-Video-Participant

Thanks for studying ❤ clap for those who realized one thing.

Please join on Twitter And LinkedIn and focus on extra concepts.