npm install takusan23/himari-webm-kotlin-multiplatform-npm-library

mapOf(
    "Android Studio" to "Android Studio Narwhal | 2025.1.1",
    "Kotlin" to "2.2.0",
    "Next.js" to "15.3.4"
)

kotlin {
    // gradle wasmJsBrowserProductionRun
    // JavaScript からは、kotlin/wasm でライブラリとして npm で登録する。
    wasmJs {
        outputModuleName = "fix-seekable-webm-kotlin-wasm"
        binaries.executable()
        browser {
        }
        generateTypeScriptDefinitions()

        // https://kotlinlang.org/docs/wasm-js-interop.html#exception-handling
        compilerOptions {
            freeCompilerArgs.add("-Xwasm-attach-js-exception")
        }

        // npm の package.json に types を入れてくれないので
        // https://youtrack.jetbrains.com/issue/KT-77319
        // https://youtrack.jetbrains.com/issue/KT-77073
        compilations["main"].packageJson {
            this@packageJson.types = "kotlin/${outputModuleName.get()}.d.ts"
        }
    }

    // 以下省略
}

@OptIn(ExperimentalJsExport::class)
@JsExport
fun fixSeekableWebm() {
    // common で書いた処理を呼び出すなど
}

@OptIn(ExperimentalJsExport::class)
@JsExport
fun fixSeekableWebm(webmByteArray: JsArray<JsNumber>): JsArray<JsNumber> {
    val kotlinByteArray = webmByteArray.toList().map { it.toInt().toByte() }.toByteArray()
    val elementList = HimariWebmParser.parseWebmLowLevel(kotlinByteArray)
    val fixedByteArray = HimariFixSeekableWebm.fixSeekableWebm(elementList)
    val wasmFixedByteArray = fixedByteArray.map { it.toInt().toJsNumber() }.toJsArray()
    return wasmFixedByteArray
}

@JsExport
fun fixSeekableWebm(int: Int, string: String) // OK

@JsExport
fun fixSeekableWebm(list: List<String>) // エラー

@JsExport
fun fixSeekableWebm(intList: JsArray<JsNumber>, stringList: JsArray<JsString>) {
    val kotlinIntList: List<Int> = intList.toList().map { it.toInt() }
    val kotlinStringList  = stringList.toList().map { it.toString() }
}

val kotlinByteArray: ByteArray = webmByteArray.toList().map { it.toInt().toByte() }.toByteArray()
val wasmFixedByteArray: JsArray<JsNumber> = fixedByteArray.map { it.toInt().toJsNumber() }.toJsArray()

@JsExport
fun parseWebm(webmByteArray: JsArray<JsNumber>): JsReference<WebmParseResult> {
    return HimariWebmParser.parseWebm(webmByteArray.toByteArray()).toJsReference()
}

@JsExport
fun getVideoWidthFromWebmParseResult(reference: JsReference<WebmParseResult>): Int? {
    return reference.get().videoTrack?.videoWidth
}

const parseRef = parseWebm(intArray)
const width: number = getVideoWidthFromWebmParseResult(parseRef)

gradle wasmJsBrowserProductionRun

FAILURE: Build failed with an exception.

* What went wrong:
Configuration cache state could not be cached: field `value` of `kotlin.reflect.jvm.internal.ReflectProperties$LazySoftVal` bean found in field `descriptor$delegate` of `kotlin.reflect.jvm.internal.KClassImpl$Data` bean found in field `value` of `kotlin.InitializedLazyImpl` bean found in field `data` of `kotlin.reflect.jvm.internal.KClassImpl` bean found in field `nodeJsRootKlass` of `org.jetbrains.kotlin.gradle.targets.web.nodejs.NodeJsRootPluginApplier` bean found in field `this$0` of `org.jetbrains.kotlin.gradle.targets.web.nodejs.NodeJsRootPluginApplier$apply$nodeJsRoot$1` bean found in field `nodeJs` of `org.jetbrains.kotlin.gradle.targets.wasm.nodejs.WasmNodeJsRootExtension` bean found in field `nodeJsRoot` of `org.jetbrains.kotlin.gradle.targets.js.ir.KotlinBrowserJsIr` bean found in field `value` of `kotlin.InitializedLazyImpl` bean found in field `browserLazyDelegate` of `org.jetbrains.kotlin.gradle.targets.js.ir.KotlinJsIrTarget` bean found in field `$this_wasmJs` of `Build_gradle$1$1$3` bean found in field `__packageJsonHandlers__` of task `:library:wasmJsPackageJson` of type `org.jetbrains.kotlin.gradle.targets.js.npm.tasks.KotlinPackageJsonTask`: error writing value of type 'java.lang.ref.SoftReference'
> Unable to make field private long java.lang.ref.SoftReference.timestamp accessible: module java.base does not "opens java.lang.ref" to unnamed module @81439d1

org.gradle.configuration-cache=false

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':kotlinWasmStoreYarnLock'.
> Lock file was changed. Run the `kotlinWasmUpgradeYarnLock` task to actualize lock file

npx create-next-app@latest

import { fixSeekableWebm } from "fix-seekable-webm-kotlin-wasm";

export default function Home() {
    fixSeekableWebm()
}

"use client"

import { useRef, useState } from "react";

export default function Home() {
  const chunkList = useRef<Blob[]>([])
  const mediaRecorder = useRef<MediaRecorder>(null)
  const mediaStream = useRef<MediaStream>(null)
  const [isRunning, setRunning] = useState(false)

  async function handleStartClick() {
    mediaStream.current = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: { channelCount: 2 } });
    mediaRecorder.current = new MediaRecorder(mediaStream.current, { mimeType: 'video/webm; codecs="vp9"' })
    mediaRecorder.current.ondataavailable = (event) => {
      chunkList.current.push(event.data);
    }
    mediaRecorder.current.start(100)
  }

  async function handleStopClick() {
    // 終了させる
    mediaRecorder.current?.stop()
    mediaStream.current?.getTracks().forEach((track) => track.stop())
    // シークできるようにする関数
    const webmArrayBuffer = await (new Blob(chunkList.current, { type: "video/webm" })).arrayBuffer()
    startFixSeekableWebmLibAndDownload(webmArrayBuffer)
    // リセット
    chunkList.current.splice(0)
  }

  async function startFixSeekableWebmLibAndDownload(arrayBuffer: ArrayBuffer) {
    // UI に反映
    setRunning(true)
    // Kotlin/Wasm の JsArray<Number> にする
    const intArray = new Int8Array(arrayBuffer)
    // Kotlin/Wasm でエクスポートした関数を呼び出す
    // 今のところ遅延ロードでクライアントからインポートする必要がありそう
    // window オブジェクトが使えるかの判定を内部でしている雰囲気
    const { fixSeekableWebm } = await import("fix-seekable-webm-kotlin-wasm")
    const fixSeekableWebmNumberList = fixSeekableWebm(intArray as any)
    const fixSeekableWebmIntArray = new Int8Array(fixSeekableWebmNumberList as any)
    // ダウンロード
    const downloadBlob = new Blob([fixSeekableWebmIntArray], { type: "video/webm" })
    const blobUrl = URL.createObjectURL(downloadBlob)
    // <a> タグを作って押す
    const anchor = document.createElement("a") as HTMLAnchorElement
    anchor.href = blobUrl
    anchor.download = `fix-seekable-webm-kotlin-wasm-${Date.now()}.webm`
    document.body?.appendChild(anchor)
    anchor.click()
    anchor.remove()
    // 戻す
    setRunning(false)
  }

  async function handleWebmFilePicker(event: React.ChangeEvent<HTMLInputElement>) {
    // 取得
    const webmFile = event.currentTarget.files?.[0]
    if (!webmFile) return
    // 処理開始
    const webmArrayBuffer = await webmFile.arrayBuffer()
    startFixSeekableWebmLibAndDownload(webmArrayBuffer)
  }

  return (
    <div className="flex flex-col items-start space-y-2">

      <h1>JavaScript の MediaRecorder で出力される WebM をシークできるようにする Kotlin/Wasm</h1>
      <h2>Kotlin/Wasm を npm install して Next.js から使っています。</h2>

      {
        isRunning && (
          <p className="text-red-400">
            WebM ファイルをシークできるように修正中です。すこし時間がかかります。
          </p>
        )
      }

      <div className="flex flex-col p-2 border-2 border-blue-400 rounded-lg">
        <h3>MediaRecorder 録画開始・終了</h3>
        <button className="border-2" onClick={handleStartClick}>録画開始</button>
        <button className="border-2" onClick={handleStopClick}>録画終了</button>
      </div>

      <div className="flex flex-col p-2 border-2 border-blue-400 rounded-lg">
        <h3>すでにある WebM ファイルをシークできるようにする</h3>
        <input
          className="border-2"
          type="file"
          accept=".webm"
          onChange={handleWebmFilePicker} />
      </div>
    </div>
  )
}

Error: Cannot read properties of undefined (reading 'name')

const isNodeJs = (typeof process !== 'undefined') && (process.release.name === 'node');

// truthy
const isNodeJs = (typeof process !== 'undefined') && process.release && (process.release.name === 'node');

// もしくは optional chaining
const isNodeJs = (typeof process !== 'undefined') && (process.release?.name === 'node');

typeof window !== 'undefined'

import { fixSeekableWebm } from "fix-seekable-webm-kotlin-wasm"

async function startFixSeekableWebmLibAndDownload(arrayBuffer: ArrayBuffer) {
    // 必要になるまでライブラリを import しない
    const { fixSeekableWebm } = await import("fix-seekable-webm-kotlin-wasm")
    const fixSeekableWebmNumberList = fixSeekableWebm(intArray as any)
}