add web support

Author: Piasy

.github/workflows/ci.yaml

@@ -31,6 +31,8 @@ jobs:
             dep: "brew update && brew install cocoapods xcodegen"
           - cmd: ".\\scripts\\setup_windows.bat \"C:\\Program Files\\Microsoft Visual Studio\\2022\\Enterprise\\VC\\Tools\\MSVC\\14.43.34808\\bin\\Hostx64\\x64\\lib.exe\" && cd example\\winApp && msbuild winApp.vcxproj /t:Build /p:Configuration=Release /p:Platform=x64"
             os: windows-latest
+          - cmd: "./gradlew :example:webApp:jsBrowserDistribution"
+            os: macos-latest
     runs-on: ${{ matrix.os }}
     permissions:
       pull-requests: write

README.md

@@ -12,8 +12,7 @@ KMP wrapper for WebRTC.
 |       `iOS`        |          🚀          |
 |      `macOS`       |          🚀          |
 |   `Windows X64`    |          🚀          |
-| `JS`     (Chrome)  |          🔮          |
-| `WasmJS` (Chrome)  |          🔮          |
+| `JS`     (Chrome)  |          🚀          |
 |    `Linux X64`     |          🔮          |
 
 ## Dependency
@@ -90,6 +89,12 @@ Open the project (the repo root dir) in Android studio, and run the example.andr
 # open example\winApp\winApp.sln in Visual Studio 2022, and run it.
 ```
 
+### JS
+
+```bash
+./gradlew :example:webApp:jsBrowserRun
+```
+
 ## Build WebRTC
 
 [hack_webrtc_43659 branch of HackWebRTC/webrtc](https://github.com/HackWebRTC/webrtc/tree/hack_webrtc_43659), which is based on m133.

example/androidApp/src/main/java/com/piasy/kmp/webrtc/android/CallActivity.java

@@ -328,6 +328,7 @@ public void onIceConnected(@NotNull String peerUid) {
     runOnUiThread(new Runnable() {
       @Override
       public void run() {
+        // 10. on ice connected, add renderer for remote stream
         pcClient.addRemoteTrackRenderer(remoteRenderer);
       }
     });

example/iosApp/iosApp/CallViewController.m

@@ -371,7 +371,7 @@ - (void)startLoopback {
     _pcClient = [_pcClientFactory createPeerConnectionClientPeerUid:@"test"
                                                                dir:0
                                                           hasVideo:YES
-                                                   videoMaxBitrate:[[_settingsModel currentMaxBitrateSettingFromStore] intValue]
+                                                videoMaxBitrateBps:[[_settingsModel currentMaxBitrateSettingFromStore] intValue]
                                                  videoMaxFrameRate:30
                                                           callback:self];
 

example/macApp/macApp/APPRTCViewController.m

@@ -302,7 +302,7 @@ - (void)startLoopback {
     _pcClient = [_pcClientFactory createPeerConnectionClientPeerUid:@"test"
                                                                dir:0
                                                           hasVideo:YES
-                                                   videoMaxBitrate:2000
+                                                videoMaxBitrateBps:2000
                                                  videoMaxFrameRate:30
                                                           callback:self];
 

example/webApp/build.gradle.kts

@@ -0,0 +1,20 @@
+plugins {
+    alias(libs.plugins.kmp)
+}
+
+kotlin {
+    js(IR) {
+        browser {
+        }
+        binaries.executable()
+    }
+
+    applyDefaultHierarchyTemplate()
+    sourceSets {
+        commonMain {
+            dependencies {
+                implementation(project(":kmp-webrtc"))
+            }
+        }
+    }
+}

example/webApp/src/jsMain/kotlin/com/piasy/kmp/webrtc/web/WebApp.kt

@@ -0,0 +1,149 @@
+package com.piasy.kmp.webrtc.web
+
+import com.piasy.kmp.webrtc.*
+import com.piasy.kmp.webrtc.data.IceCandidate
+import com.piasy.kmp.webrtc.data.RtcStatsReport
+import com.piasy.kmp.webrtc.data.SessionDescription
+import kotlinx.browser.document
+import kotlinx.browser.window
+import org.w3c.dom.HTMLButtonElement
+import org.w3c.dom.events.Event
+
+var isLoopback = false
+var loopback: HTMLButtonElement? = null
+
+var pcClientFactory: PeerConnectionClientFactory? = null
+// on web, we can't disable encryption, so we need two pc clients.
+var localPcClient: PeerConnectionClient? = null
+var remotePcClient: PeerConnectionClient? = null
+
+fun main() {
+    window.onload = {
+        loopback = document.getElementById("loopbackButton") as HTMLButtonElement
+        loopback?.addEventListener("click", ::handleLoopbackClick)
+    }
+}
+
+fun handleLoopbackClick(event: Event) {
+    isLoopback = !isLoopback
+    loopback?.innerHTML = if (isLoopback) "Stop" else "Loopback"
+    if (isLoopback) {
+        startLoopback()
+    } else {
+        stopLoopback()
+    }
+}
+
+fun startLoopback() {
+    // 1. initialize
+    initializeWebRTC(null, "", true)
+
+    // 2. create PcClientFactory
+    val privateConfig = JsPrivateConfig(js("createBlackStream")())
+    val config = PeerConnectionClientFactory.Config(
+        PeerConnectionClientFactory.VIDEO_CAPTURE_IMPL_SYSTEM_CAMERA, 1280, 720, 30,
+        PeerConnectionClientFactory.CAMERA_FACE_FRONT, privateConfig,
+    )
+    pcClientFactory = createPeerConnectionClientFactory(config) { code, msg ->
+        println("PeerConnectionClientFactory error: $code, $msg")
+    }
+
+    // 3. create local tracks
+    pcClientFactory?.createLocalTracks()
+
+    // 4. add local preview & start camera capture
+    pcClientFactory?.addLocalTrackRenderer(document.getElementById("localVideo")!!)
+    pcClientFactory?.startVideoCapture()
+
+    // 5. create PcClient
+    localPcClient = pcClientFactory?.createPeerConnectionClient(
+        "test_local", PeerConnectionClientFactory.DIR_SEND_ONLY, true,
+        800_000, 30, localPcClientCallback
+    )
+    remotePcClient = pcClientFactory?.createPeerConnectionClient(
+        "test_remote", PeerConnectionClientFactory.DIR_RECV_ONLY, true,
+        800_000, 30, remotePcClientCallback
+    )
+
+    // 6. create pc
+    localPcClient?.createPeerConnection(emptyList())
+    remotePcClient?.createPeerConnection(emptyList())
+
+    // 7. create offer
+    localPcClient?.createOffer()
+}
+
+val localPcClientCallback = object : PeerConnectionClientCallback {
+    override fun onLocalDescription(peerUid: String, sdp: SessionDescription) {
+        // 8.1. send offer to remote
+        remotePcClient?.setRemoteDescription(sdp)
+        remotePcClient?.createAnswer()
+    }
+
+    override fun onIceCandidate(peerUid: String, candidate: IceCandidate) {
+        // 9. send ice candidate to remote, get ice candidate from remote, add ice candidate
+        remotePcClient?.addIceCandidate(candidate)
+    }
+
+    override fun onIceConnected(peerUid: String) {
+    }
+
+    override fun onPreferCodecs(peerUid: String, sdp: String): String {
+        return sdp
+    }
+
+    override fun onIceCandidatesRemoved(peerUid: String, candidates: List<IceCandidate>) {
+    }
+
+    override fun onPeerConnectionStatsReady(peerUid: String, report: RtcStatsReport) {
+    }
+
+    override fun onIceDisconnected(peerUid: String) {
+    }
+
+    override fun onError(peerUid: String, code: Int) {
+    }
+}
+
+val remotePcClientCallback = object : PeerConnectionClientCallback {
+    override fun onLocalDescription(peerUid: String, sdp: SessionDescription) {
+        // 8.2. get answer from remote, and set answer
+        localPcClient?.setRemoteDescription(sdp);
+    }
+
+    override fun onIceCandidate(peerUid: String, candidate: IceCandidate) {
+        // 9. send ice candidate to remote, get ice candidate from remote, add ice candidate
+        localPcClient?.addIceCandidate(candidate);
+    }
+
+    override fun onIceConnected(peerUid: String) {
+        // 10. on ice connected, add renderer for remote stream
+        remotePcClient?.addRemoteTrackRenderer(document.getElementById("remoteVideo")!!)
+    }
+
+    override fun onPreferCodecs(peerUid: String, sdp: String): String {
+        return sdp
+    }
+
+    override fun onIceCandidatesRemoved(peerUid: String, candidates: List<IceCandidate>) {
+    }
+
+    override fun onPeerConnectionStatsReady(peerUid: String, report: RtcStatsReport) {
+    }
+
+    override fun onIceDisconnected(peerUid: String) {
+    }
+
+    override fun onError(peerUid: String, code: Int) {
+    }
+}
+
+fun stopLoopback() {
+    pcClientFactory?.stopVideoCapture()
+    localPcClient?.close()
+    remotePcClient?.close()
+    pcClientFactory?.destroyPeerConnectionFactory()
+    pcClientFactory = null
+    localPcClient = null
+    remotePcClient = null
+}