Add WasmJS target

.github/workflows/pull_request.yml

@@ -1,11 +1,84 @@
-name: Pull Request
+name: Pull Request Checks
 
 on:
   pull_request:
     branches: [ main ]
 
 jobs:
-  build:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Set up JDK 17
+        uses: actions/setup-java@v1
+        with:
+          java-version: 17
+          cache: gradle
+
+      - name: Gradle cache
+        uses: gradle/gradle-build-action@v2
+
+      - name: Run Kotlin linter
+        run: ./gradlew ktlintCheck
+
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Set up JDK 17
+        uses: actions/setup-java@v1
+        with:
+          java-version: 17
+          cache: gradle
+
+      - name: Gradle cache
+        uses: gradle/gradle-build-action@v2
+
+      - name: Enable KVM
+        run: |
+          echo 'KERNEL=="kvm", GROUP="kvm", MODE="0666", OPTIONS+="static_node=kvm"' | sudo tee /etc/udev/rules.d/99-kvm4all.rules
+          sudo udevadm control --reload-rules
+          sudo udevadm trigger --name-match=kvm
+
+      - name: Run Android instrumented tests
+        uses: reactivecircus/android-emulator-runner@v2
+        with:
+          api-level: 29
+          target: google_apis
+          arch: x86_64
+          profile: Nexus 6
+          script: ./gradlew webrtc-kmp:connectedAndroidTest
+
+      - name: Upload Android test artifact
+        uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: "Android Instrumented Tests Report HTML"
+          path: "webrtc-kmp/build/reports/androidTests/connected"
+
+      - name: Run JS tests
+        run: ./gradlew cleanTest kotlinUpgradeYarnLock webrtc-kmp:jsTest
+
+      - name: Upload JS test artifact
+        uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: "JS Tests Report HTML"
+          path: "webrtc-kmp/build/reports/tests/js*Test"
+
+      - name: Run WasmJS tests
+        run: ./gradlew cleanTest kotlinUpgradeYarnLock webrtc-kmp:wasmJsTest
+
+      - name: Upload WasmJS test artifact
+        uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: "JS Tests Report HTML"
+          path: "webrtc-kmp/build/reports/tests/wasmJs*Test"
+
+  test-ios:
     runs-on: macos-latest
     steps:
       - uses: actions/checkout@v2
@@ -30,46 +103,12 @@ jobs:
       - name: Gradle cache
         uses: gradle/gradle-build-action@v2
 
-      - name: Grant execute permission for gradlew
-        run: chmod +x gradlew
-
-      - name: Run Kotlin linter
-        run: ./gradlew ktlintCheck
-
-# TODO: Android instrumented tests don't work
-
-#      - name: Run Android instrumented tests
-#        uses: reactivecircus/android-emulator-runner@v2
-#        with:
-#          api-level: 29
-#          target: google_apis
-#          arch: x86_64
-#          profile: Nexus 6
-#          script: ./gradlew webrtc-kmp:connectedAndroidTest
-#
-#      - name: Upload Android test artifact
-#        uses: actions/upload-artifact@v2
-#        if: failure()
-#        with:
-#          name: "Android Instrumented Tests Report HTML"
-#          path: "webrtc-kmp/build/reports/androidTests/connected"
-
       - name: Run iOS tests
-        run: ./gradlew cleanTest webrtc-kmp:iosX64Test
+        run: ./gradlew cleanTest webrtc-kmp:iosSimulatorArm64Test
 
       - name: Upload iOS test artifact
         uses: actions/upload-artifact@v2
         if: failure()
         with:
           name: "iOS Tests Report HTML"
           path: "webrtc-kmp/build/reports/tests/iosX64Test"
-
-      - name: Run JS tests
-        run: ./gradlew cleanTest kotlinUpgradeYarnLock webrtc-kmp:jsTest
-
-      - name: Upload JS test artifact
-        uses: actions/upload-artifact@v2
-        if: failure()
-        with:
-          name: "JS Tests Report HTML"
-          path: "webrtc-kmp/build/reports/tests/jsTest"

README.md

@@ -5,7 +5,7 @@ It supports Android, iOS, JS. Other platforms - PRs are welcome.
 
 
 ## API implementation map
- API |      Android       | iOS | JS 
+ API |      Android       | iOS | JS/WasmJS 
  :-: |:------------------:| :-: | :---: 
  Audio/Video | :white_check_mark: | :white_check_mark: | :white_check_mark:
  Data channel | :white_check_mark: | :white_check_mark: | :white_check_mark:

gradle.properties

@@ -21,6 +21,7 @@ kotlin.mpp.enableCInteropCommonization=true
 
 #Compose
 org.jetbrains.compose.experimental.jscanvas.enabled=true
+org.jetbrains.compose.experimental.wasm.enabled=true
 
 # Versions
 webRtcKmpVersion=0.114.4

gradle/libs.versions.toml

@@ -32,6 +32,7 @@ compose-plugin = "1.6.2"
 webrtc-sdk = { module = "io.github.webrtc-sdk:android", version.ref = "webrtc-android-sdk" }
 kotlin-coroutines = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core", version.ref = "kotlin-coroutines" }
 kotlin-coroutines-android = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-android", version.ref = "kotlin-coroutines" }
+kotlin-coroutines-test = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-test", version.ref = "kotlin-coroutines" }
 androidx-coreKtx = { module = "androidx.core:core-ktx", version.ref = "androidx-core" }
 androidx-appcompat = { module = "androidx.appcompat:appcompat", version.ref = "androidx-appcompat" }
 androidx-lifecycle-runtime = { module = "androidx.lifecycle:lifecycle-runtime-ktx", version.ref = "androidx-lifecycle" }

sample/README.md

@@ -21,8 +21,14 @@ Run Android emulator or connect real device.
 
 Open `sample/iosApp/iosApp.xcodeproj` in XCode build and run
 
-### Web
+### Web JS
 
 ```bash
-./gradlew jsBrowserRun
+./gradlew sample:composeApp:jsBrowserRun 
+```
+
+### Web WasmJS
+
+```bash
+./gradlew sample:composeApp:wasmJsBrowserRun 
 ```

sample/composeApp/build.gradle.kts

@@ -47,6 +47,23 @@ kotlin {
         }
     }
 
+    @OptIn(ExperimentalWasmDsl::class)
+    wasmJs {
+        moduleName = "composeApp"
+        browser {
+            commonWebpackConfig {
+                outputFileName = "composeApp.js"
+                devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply {
+                    static = (static ?: mutableListOf()).apply {
+                        // Serve sources to debug inside browser
+                        add(project.projectDir.path)
+                    }
+                }
+            }
+        }
+        binaries.executable()
+    }
+
     sourceSets {
         commonMain.dependencies {
             implementation(compose.runtime)
@@ -111,6 +128,10 @@ android {
     }
 }
 
+compose.experimental {
+    web.application {}
+}
+
 fun KotlinNativeTarget.configureWebRtcCinterops() {
     val webRtcFrameworkPath = file("$buildDir/cocoapods/synthetic/IOS/Pods/WebRTC-SDK")
         .resolveArchPath(konanTarget, "WebRTC")

sample/composeApp/src/androidMain/kotlin/Video.android.kt

@@ -9,28 +9,29 @@ import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.LifecycleEventObserver
+import com.shepeliev.webrtckmp.AudioStreamTrack
 import com.shepeliev.webrtckmp.VideoStreamTrack
 import com.shepeliev.webrtckmp.WebRtc
 import org.webrtc.RendererCommon
 import org.webrtc.SurfaceViewRenderer
 import org.webrtc.VideoSink
 
 @Composable
-actual fun Video(track: VideoStreamTrack, modifier: Modifier) {
+actual fun Video(videoTrack: VideoStreamTrack, modifier: Modifier, audioTrack: AudioStreamTrack?) {
     var renderer by remember { mutableStateOf<SurfaceViewRenderer?>(null) }
 
-    val lifecycleEventObserver = remember(renderer, track) {
+    val lifecycleEventObserver = remember(renderer, videoTrack) {
         LifecycleEventObserver { _, event ->
             when (event) {
                 Lifecycle.Event.ON_RESUME -> {
                     renderer?.also {
                         it.init(WebRtc.rootEglBase.eglBaseContext, null)
-                        track.addSinkCatching(it)
+                        videoTrack.addSinkCatching(it)
                     }
                 }
 
                 Lifecycle.Event.ON_PAUSE -> {
-                    renderer?.also { track.removeSinkCatching(it) }
+                    renderer?.also { videoTrack.removeSinkCatching(it) }
                     renderer?.release()
                 }
 
@@ -46,7 +47,7 @@ actual fun Video(track: VideoStreamTrack, modifier: Modifier) {
         lifecycle.addObserver(lifecycleEventObserver)
 
         onDispose {
-            renderer?.let { track.removeSinkCatching(it) }
+            renderer?.let { videoTrack.removeSinkCatching(it) }
             renderer?.release()
             lifecycle.removeObserver(lifecycleEventObserver)
         }

sample/composeApp/src/commonMain/kotlin/App.kt

@@ -16,6 +16,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import co.touchlab.kermit.Logger
 import co.touchlab.kermit.platformLogWriter
+import com.shepeliev.webrtckmp.AudioStreamTrack
 import com.shepeliev.webrtckmp.MediaDevices
 import com.shepeliev.webrtckmp.MediaStream
 import com.shepeliev.webrtckmp.PeerConnection
@@ -35,22 +36,29 @@ fun App() {
         val scope = rememberCoroutineScope()
         val (localStream, setLocalStream) = remember { mutableStateOf<MediaStream?>(null) }
         val (remoteVideoTrack, setRemoteVideoTrack) = remember { mutableStateOf<VideoStreamTrack?>(null) }
+        val (remoteAudioTrack, setRemoteAudioTrack) = remember { mutableStateOf<AudioStreamTrack?>(null) }
         val (peerConnections, setPeerConnections) = remember {
             mutableStateOf<Pair<PeerConnection, PeerConnection>?>(null)
         }
 
         LaunchedEffect(localStream, peerConnections) {
             if (peerConnections == null || localStream == null) return@LaunchedEffect
-            makeCall(peerConnections, localStream, setRemoteVideoTrack)
+            makeCall(peerConnections, localStream, setRemoteVideoTrack, setRemoteAudioTrack)
         }
 
         Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
             val localVideoTrack = localStream?.videoTracks?.firstOrNull()
 
-            localVideoTrack?.let { Video(track = it, modifier = Modifier.weight(1f)) }
+            localVideoTrack?.let { Video(videoTrack = it, modifier = Modifier.weight(1f)) }
                 ?: Box(modifier = Modifier.weight(1f))
 
-            remoteVideoTrack?.let { Video(track = it, modifier = Modifier.weight(1f)) }
+            remoteVideoTrack?.let {
+                Video(
+                    videoTrack = it,
+                    audioTrack = remoteAudioTrack,
+                    modifier = Modifier.weight(1f),
+                )
+            }
                 ?: Box(modifier = Modifier.weight(1f))
 
             Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
@@ -67,9 +75,12 @@ fun App() {
 
                 StopButton(
                     onClick = {
-                        hangup(peerConnections, setPeerConnections, setRemoteVideoTrack)
+                        hangup(peerConnections)
                         localStream.release()
                         setLocalStream(null)
+                        setPeerConnections(null)
+                        setRemoteVideoTrack(null)
+                        setRemoteAudioTrack(null)
                     }
                 )
 
@@ -85,7 +96,10 @@ fun App() {
                     )
                 } else {
                     HangupButton(onClick = {
-                        hangup(peerConnections, setPeerConnections, setRemoteVideoTrack)
+                        hangup(peerConnections)
+                        setPeerConnections(null)
+                        setRemoteVideoTrack(null)
+                        setRemoteAudioTrack(null)
                     })
                 }
             }

sample/composeApp/src/commonMain/kotlin/Hangup.kt

@@ -1,15 +1,8 @@
 import com.shepeliev.webrtckmp.PeerConnection
-import com.shepeliev.webrtckmp.VideoStreamTrack
 
-fun hangup(
-    peerConnections: Pair<PeerConnection, PeerConnection>?,
-    setPeerConnections: (Pair<PeerConnection, PeerConnection>?) -> Unit,
-    setRemoteVideoTrack: (VideoStreamTrack?) -> Unit
-) {
+fun hangup(peerConnections: Pair<PeerConnection, PeerConnection>?) {
     val (pc1, pc2) = peerConnections ?: return
     pc1.getTransceivers().forEach { pc1.removeTrack(it.sender) }
     pc1.close()
     pc2.close()
-    setPeerConnections(null)
-    setRemoteVideoTrack(null)
 }

sample/composeApp/src/commonMain/kotlin/MakeCall.kt

@@ -1,4 +1,5 @@
 import co.touchlab.kermit.Logger
+import com.shepeliev.webrtckmp.AudioStreamTrack
 import com.shepeliev.webrtckmp.IceCandidate
 import com.shepeliev.webrtckmp.MediaStream
 import com.shepeliev.webrtckmp.MediaStreamTrackKind
@@ -13,14 +14,16 @@ import com.shepeliev.webrtckmp.onSignalingStateChange
 import com.shepeliev.webrtckmp.onTrack
 import kotlinx.coroutines.awaitCancellation
 import kotlinx.coroutines.coroutineScope
-import kotlinx.coroutines.flow.filter
+import kotlinx.coroutines.flow.filterNotNull
 import kotlinx.coroutines.flow.launchIn
+import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.flow.onEach
 
 suspend fun makeCall(
     peerConnections: Pair<PeerConnection, PeerConnection>,
     localStream: MediaStream,
-    setRemoteVideoTrack: (VideoStreamTrack?) -> Unit
+    onRemoteVideoTrack: (VideoStreamTrack) -> Unit,
+    onRemoteAudioTrack: (AudioStreamTrack) -> Unit = {},
 ): Nothing = coroutineScope {
     val (pc1, pc2) = peerConnections
     localStream.tracks.forEach { pc1.addTrack(it) }
@@ -81,8 +84,15 @@ suspend fun makeCall(
         .launchIn(this)
     pc2.onTrack
         .onEach { Logger.d { "PC2 onTrack: ${it.track?.kind}" } }
-        .filter { it.track?.kind == MediaStreamTrackKind.Video }
-        .onEach { setRemoteVideoTrack(it.track as VideoStreamTrack) }
+        .map { it.track }
+        .filterNotNull()
+        .onEach {
+            if (it.kind == MediaStreamTrackKind.Audio) {
+                onRemoteAudioTrack(it as AudioStreamTrack)
+            } else if (it.kind == MediaStreamTrackKind.Video) {
+                onRemoteVideoTrack(it as VideoStreamTrack)
+            }
+        }
         .launchIn(this)
     val offer = pc1.createOffer(OfferAnswerOptions(offerToReceiveVideo = true, offerToReceiveAudio = true))
     pc1.setLocalDescription(offer)

sample/composeApp/src/commonMain/kotlin/Video.kt

@@ -1,6 +1,7 @@
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import com.shepeliev.webrtckmp.AudioStreamTrack
 import com.shepeliev.webrtckmp.VideoStreamTrack
 
 @Composable
-expect fun Video(track: VideoStreamTrack, modifier: Modifier = Modifier)
+expect fun Video(videoTrack: VideoStreamTrack, modifier: Modifier = Modifier, audioTrack: AudioStreamTrack? = null)