const MIME_TYPE = 'video/webm; codecs="vp9"'
// 画面をキャプチャーしてくれるやつ
const displayMedia = await navigator.mediaDevices.getDisplayMedia({ audio: { channelCount: 2 }, video: true })
// パソコンの画面を流す
mediaRecorder = new MediaRecorder(displayMedia, { mimeType: MIME_TYPE })
// 録画データが着たら呼ばれる
mediaRecorder.ondataavailable = (ev) => {
    chunks.push(ev.data)
}
// 録画開始
mediaRecorder.start(100)
 
// TODO ダウンロード処理

 +----+----------+------+
 | ID | DataSize | Data |
 +----+----------+------+

44 89 84 48 b6 c8 60

- EBML Header
    - EBML version
    - EBML read version
    - EBMLMaxIDLength
    - EBMLMaxSizeLength
    - Document type
    - Document type version
    - Document type read version
- Segment
    - SeekHead
        - SeekEntry         # Info の位置
            - SeekID
            - SeekPosition
        - SeekEntry         # Tracks の位置
            - SeekID
            - SeekPosition
        - SeekEntry         # Cluster の位置
            - SeekID
            - SeekPosition
        - SeekEntry         # Cue の位置
            - SeekID
            - SeekPosition
    - Info
        - TimestampScale
        - MuxingApp
        - WritingApp
        - Duration
    - Tracks
        - Track
            - TrackNumber
            - TrackUID
            - TrackType
            - CodecID
            - CodecPrivateData
            - AudioTrack
                - SamplingFrequency
                - Channels
        - Track
            - TrackNumber
            - TrackUID
            - TrackType
            - CodecID
            - VideoTrack
                - PixelWidth
                - PixelHeight
    - Cluster
        - ClusterTimestamp
        - SimpleBlock
        - SimpleBlock
    - Cluster               # 動画が続く限り Cluster が増えていく
    - Cue
        - CuePoint
            - CueTime
            - CueTrackPositions
                - CueTrack
                - CueClusterPosition
        - CuePoint          # Cluster の数だけ CuePoint を入れる

- EBML Header
- Segment
    - Info
        - Duration
    - Tracks
        - Track
        - Track
    - Cue
    - Cluster
    - Cluster
    - Cluster

- EBML Header
- Segment
    - Info
        - Duration
    - Tracks
        - Track
        - Track
    - Cluster
    - Cluster
    - Cluster
    - Cue

- EBML Header
- Segment
    - Info
        - Duration
    - Tracks
        - Track
        - Track
    - Cue が入るから適当に大きめのスペースを取る。予測する必要がある
    - Cluster
    - Cluster
    - Cluster

- EBML Header
- Segment
    - Info
        - Duration
    - Tracks
        - Track
        - Track
    - Cue
        - CuePoint
            - ClusterPosition       # <-- Cluster の位置を書き込むが、この位置は今書き込んでいる Cue のサイズも考慮する必要がある
    - Cluster                       # <-- もちろん Cue が追加されれば Cluster の位置もズレていく
    - Cluster
    - Cluster

/**
 * Matroska の ID
 *
 * @param byteArray ID のバイト配列
 * @param isParent 子要素を持つ親かどうか
 * @param parentTag 親要素の [MatroskaId]
 */
enum class MatroskaId(
    val byteArray: ByteArray,
    val isParent: Boolean,
    val parentTag: MatroskaId?
) {
    EBML(byteArrayOf(0x1A.toByte(), 0x45.toByte(), 0xDF.toByte(), 0xA3.toByte()), true, null),
    EBMLVersion(byteArrayOf(0x42.toByte(), 0x86.toByte()), false, EBML),
    EBMLReadVersion(byteArrayOf(0x42.toByte(), 0xF7.toByte()), false, EBML),
    EBMLMaxIDLength(byteArrayOf(0x42.toByte(), 0xF2.toByte()), false, EBML),
    EBMLMaxSizeLength(byteArrayOf(0x42.toByte(), 0xF3.toByte()), false, EBML),
    DocType(byteArrayOf(0x42.toByte(), 0x82.toByte()), false, EBML),
    DocTypeVersion(byteArrayOf(0x42.toByte(), 0x87.toByte()), false, EBML),
    DocTypeReadVersion(byteArrayOf(0x42.toByte(), 0x85.toByte()), false, EBML),
 
    Segment(byteArrayOf(0x18.toByte(), 0x53.toByte(), 0x80.toByte(), 0x67.toByte()), true, null),
 
    SeekHead(byteArrayOf(0x11.toByte(), 0x4D.toByte(), 0x9B.toByte(), 0x74.toByte()), true, Segment),
    Seek(byteArrayOf(0x4D.toByte(), 0xBB.toByte()), true, SeekHead),
    SeekID(byteArrayOf(0x53.toByte(), 0xAB.toByte()), false, Seek),
    SeekPosition(byteArrayOf(0x53.toByte(), 0xAC.toByte()), false, Seek),
 
    Info(byteArrayOf(0x15.toByte(), 0x49.toByte(), 0xA9.toByte(), 0x66.toByte()), true, Segment),
    Duration(byteArrayOf(0x44.toByte(), 0x89.toByte()), false, Info),
    SegmentUUID(byteArrayOf(0x73.toByte(), 0xA4.toByte()), false, Info),
    TimestampScale(byteArrayOf(0x2A.toByte(), 0xD7.toByte(), 0xB1.toByte()), false, Info),
    MuxingApp(byteArrayOf(0x4D.toByte(), 0x80.toByte()), false, Info),
    WritingApp(byteArrayOf(0x57.toByte(), 0x41.toByte()), false, Info),
 
    Tracks(byteArrayOf(0x16.toByte(), 0x54.toByte(), 0xAE.toByte(), 0x6B.toByte()), true, Segment),
    TrackEntry(byteArrayOf(0xAE.toByte()), true, Tracks),
    TrackNumber(byteArrayOf(0xD7.toByte()), false, TrackEntry),
    TrackUID(byteArrayOf(0x73.toByte(), 0xC5.toByte()), false, TrackEntry),
    TrackType(byteArrayOf(0x83.toByte()), false, TrackEntry),
    Language(byteArrayOf(0x22.toByte(), 0xB5.toByte(), 0x9C.toByte()), false, TrackEntry),
    CodecID(byteArrayOf(0x86.toByte()), false, TrackEntry),
    CodecPrivate(byteArrayOf(0x63.toByte(), 0xA2.toByte()), false, TrackEntry),
    CodecName(byteArrayOf(0x25.toByte(), 0x86.toByte(), 0x88.toByte()), false, TrackEntry),
    FlagLacing(byteArrayOf(0x9C.toByte()), false, TrackEntry),
    DefaultDuration(byteArrayOf(0x23.toByte(), 0xE3.toByte(), 0x83.toByte()), false, TrackEntry),
    TrackTimecodeScale(byteArrayOf(0x23.toByte(), 0x31.toByte(), 0x4F.toByte()), false, TrackEntry),
    VideoTrack(byteArrayOf(0xE0.toByte()), false, TrackEntry),
    PixelWidth(byteArrayOf(0xB0.toByte()), false, VideoTrack),
    PixelHeight(byteArrayOf(0xBA.toByte()), false, VideoTrack),
    FrameRate(byteArrayOf(0x23.toByte(), 0x83.toByte(), 0xE3.toByte()), false, VideoTrack),
    MaxBlockAdditionID(byteArrayOf(0x55.toByte(), 0xEE.toByte()), false, VideoTrack),
    AudioTrack(byteArrayOf(0xE1.toByte()), true, TrackEntry),
    SamplingFrequency(byteArrayOf(0xB5.toByte()), false, AudioTrack),
    Channels(byteArrayOf(0x9F.toByte()), false, AudioTrack),
    BitDepth(byteArrayOf(0x62.toByte(), 0x64.toByte()), false, AudioTrack),
 
    Cues(byteArrayOf(0x1C.toByte(), 0x53.toByte(), 0xBB.toByte(), 0x6B.toByte()), true, Segment),
    CuePoint(byteArrayOf(0xBB.toByte()), true, Cues),
    CueTime(byteArrayOf(0xB3.toByte()), false, CuePoint),
    CueTrackPositions(byteArrayOf(0xB7.toByte()), true, CuePoint),
    CueTrack(byteArrayOf(0xF7.toByte()), false, CueTrackPositions),
    CueClusterPosition(byteArrayOf(0xF1.toByte()), false, CueTrackPositions),
    CueRelativePosition(byteArrayOf(0xF0.toByte()), false, CueTrackPositions),
 
    Cluster(byteArrayOf(0x1F.toByte(), 0x43.toByte(), 0xB6.toByte(), 0x75.toByte()), true, Segment),
    Timestamp(byteArrayOf(0xE7.toByte()), false, Cluster),
    SimpleBlock(byteArrayOf(0xA3.toByte()), false, Cluster)
}

/**
 * EBMLの要素を表すデータクラス
 *
 * @param matroskaId [MatroskaId]
 * @param data データ
 */
data class MatroskaElement(
    val matroskaId: MatroskaId,
    val data: ByteArray
)

// JavaScript
// 展開しない
console.log([1,2,3, [4,5,6] ]) // [1,2,3, [4,5,6] ]
// 配列内に展開する（スプレッド構文）
console.log([1,2,3, ...[4,5,6] ]) // [ 1, 2, 3, 4, 5, 6 ]

// Kotlin
println(listOf(1,2,3, listOf(4,5,6) )) // [1, 2, 3, [4, 5, 6]]
println(listOf(1, 2, 3, *arrayOf(4, 5, 6))) // [1, 2, 3, 4, 5, 6]

listOf(1, 2, 3, *arrayOf(4, 5, 6))
listOf(1, 2, 3) + arrayOf(4, 5, 6)

/** DataSize の長さが不定の場合の表現 */
internal val UNKNOWN_DATA_SIZE = byteArrayOf(0x1F.toByte(), 0xFF.toByte(), 0xFF.toByte(), 0xFF.toByte(), 0xFF.toByte(), 0xFF.toByte(), 0xFF.toByte(), 0xFF.toByte())
 
/** VINT とバイト数 */
private val BIT_SIZE_LIST = listOf(
    0b1000_0000 to 1,
    0b0100_0000 to 2,
    0b0010_0000 to 3,
    0b0001_0000 to 4,
    0b0000_1000 to 5,
    0b0000_0100 to 6,
    0b0000_0010 to 7,
    0b0000_0001 to 8
)
 
/** 最大値と必要なバイト数 */
private val INT_TO_BYTEARRAY_LIST = listOf(
    0xFF to 1,
    0xFFFF to 2,
    0xFFFFFF to 3,
    0x7FFFFFFF to 4
)
 
/** [MatroskaElement]の配列から[MatroskaId]をフィルターする */
internal fun List<MatroskaElement>.filterId(matroskaId: MatroskaId) = this.filter { it.matroskaId == matroskaId }
 
/**
 * VINT の長さを返す
 * 注意してほしいのは、DataSize は Data の長さを表すものだが、この DataSize 自体の長さが可変長。
 */
internal fun Byte.getElementLength(): Int {
    // UInt にする必要あり
    val uIntValue = toInt().andFF()
    // 左から最初に立ってるビットを探して、サイズをもとめる
    // 予めビットとサイズを用意しておく読みやすさ最優先実装...
    return BIT_SIZE_LIST.first { (bit, _) ->
        // ビットを AND して、0 以外を探す（ビットが立ってない場合は 0 になる）
        uIntValue and bit != 0
    }.second
}
 
/** [MatroskaElement] を EBML 要素のバイト配列にする */
internal fun MatroskaElement.toEbmlByteArray(): ByteArray {
    // ID
    val idByteArray = this.matroskaId.byteArray
    // DataSize
    val dataSize = this.data.size
    val dataSizeByteArray = dataSize.toDataSize()
    // Data
    val data = this.data
    // ByteArray にする
    return byteArrayOf(*idByteArray, *dataSizeByteArray, *data)
}
 
/** [ByteArray]から[MatroskaId]を探す */
internal fun ByteArray.toMatroskaId(): MatroskaId {
    return MatroskaId.entries.first { it.byteArray.contentEquals(this) }
}
 
/** [ByteArray]が入っている[List]を、全部まとめて[ByteArray]にする */
internal fun List<ByteArray>.concatByteArray(): ByteArray {
    val byteArray = ByteArray(this.sumOf { it.size })
    var write = 0
    this.forEach { cluster ->
        repeat(cluster.size) { read ->
            byteArray[write++] = cluster[read]
        }
    }
    return byteArray
}
 
/**
 * DataSize 要素から実際の Data の大きさを出す
 * @see [getElementLength]
 * @return 長さ不定の場合は -1
 */
internal fun ByteArray.getDataSize(): Int {
    // 例外で、 01 FF FF FF FF FF FF FF のときは長さが不定なので...
    // Segment / Cluster の場合は子要素の長さを全部足せば出せると思うので、、、
    if (contentEquals(UNKNOWN_DATA_SIZE)) {
        return -1
    }
 
    var firstByte = first().toInt().andFF()
    // DataSize 要素の場合、最初に立ってるビットを消す
    for ((bit, _) in BIT_SIZE_LIST) {
        if (firstByte and bit != 0) {
            // XOR で両方同じ場合は消す
            firstByte = firstByte xor bit
            // 消すビットは最初だけなので
            break
        }
    }
    // 戻す
    return if (size == 1) {
        firstByte
    } else {
        byteArrayOf(firstByte.toByte(), *copyOfRange(1, size)).toInt()
    }
}
 
/** 実際のデータの大きさから DataSize 要素のバイト配列にする */
internal fun Int.toDataSize(): ByteArray {
    // Int を ByteArray に
    val byteArray = this.toByteArray()
    // 最初のバイトは、DataSize 自体のサイズを入れる必要がある（ VINT ）
    val firstByte = byteArray.first().toInt().andFF()
 
    // DataSize 自体のサイズとして、最初のバイトに OR で 1 を立てる
    var resultByteArray = byteArrayOf()
    BIT_SIZE_LIST.forEachIndexed { index, (bit, size) ->
        if (size == byteArray.size) {
            resultByteArray = if (firstByte < bit) {
                // V_INT を先頭のバイトに書き込む
                byteArrayOf(
                    (firstByte or bit).toByte(),
                    *byteArray.copyOfRange(1, byteArray.size)
                )
            } else {
                // 最初のバイトに書き込めない場合
                // （DataSize 自身のサイズのビットを立てる前の時点で、最初のバイトのほうが大きい場合）
                // size が +1 するので、配列の添字は -1 する必要あり
                byteArrayOf(BIT_SIZE_LIST[index + 1].first.toByte(), *byteArray)
            }
        }
    }
    // 戻す
    return resultByteArray
}
 
/**
 * Segment の長さ不定のデータサイズを上から舐めてもとめる。
 * ByteArray は ID までは読めている、DataSize は長さ不定なので 8 バイト固定。というわけで ID + DataSize を消した Data だけください。
 */
internal fun ByteArray.analyzeUnknownDataSizeForSegmentData(): Int {
    var index = 0
 
    while (true) {
        // Segment も Cluster も親要素なので、それぞれの子を見ていけばデータの長さが分かるはず。
        val idLength = this[index].getElementLength()
        val idElement = this.copyOfRange(index, index + idLength)
        // ID 分足していく
        index += idLength
 
        // DataSize を取り出す
        val dataSizeLength = this[index].getElementLength()
        // Cluster の場合は長さ不定の場合があるため、追加処理
        val dataSizeElement = this.copyOfRange(index, index + dataSizeLength).getDataSize().let { dataSizeOrUnknown ->
            // 長さが求まっていればそれを使う
            if (dataSizeOrUnknown != -1) {
                return@let dataSizeOrUnknown
            }
 
            // Cluster は上から舐めて求められる
            val dataByteArray = this.copyOfRange(index + UNKNOWN_DATA_SIZE.size, this.size)
            if (idElement.toMatroskaId() == MatroskaId.Cluster) {
                // Cluster の長さ不定は求められる、再帰で求める。Data を渡す
                dataByteArray.analyzeUnknownDataSizeForClusterData()
            } else {
                throw RuntimeException("長さ不定")
            }
        }
 
        // DataSize 分足していく
        index += dataSizeLength
        // データの大きさを出すため、Data の中身までは見ない
        // Data 分足していく
        index += dataSizeElement
 
        // もう読み出せない場合はここまでをデータの大きさとする
        if (size <= index) {
            break
        }
        // 次の要素が 3 バイト以上ない場合は break（解析できない）
        if (size <= index + 3) {
            break
        }
    }
    return index
}
 
/**
 * Cluster の長さ不定のデータサイズを上から舐めてもとめる。
 *
 * ByteArray は ID までは読めている、DataSize は長さ不定なので 8 バイト固定。というわけで ID + DataSize を消した Data だけください。
 */
internal fun ByteArray.analyzeUnknownDataSizeForClusterData(): Int {
    var index = 0
 
    while (true) {
        // Segment も Cluster も親要素なので、それぞれの子を見ていけばデータの長さが分かるはず。
        val idLength = this[index].getElementLength()
        val idElement = this.copyOfRange(index, index + idLength)
 
        // Cluster だった場合は break。次の Cluster にぶつかったってことです。
        if (idElement.toMatroskaId() == MatroskaId.Cluster) {
            break
        }
 
        // ID 分足していく
        index += idLength
        // DataSize を取り出す
        val dataSizeLength = this[index].getElementLength()
        val dataSizeElement = this.copyOfRange(index, index + dataSizeLength).getDataSize()
        // DataSize 分足していく
        index += dataSizeLength
        // データの大きさを出すため、Data の中身までは見ない
        // Data 分足していく
        index += dataSizeElement
 
        // もう読み出せない場合はここまでをデータの大きさとする
        if (size <= index) {
            break
        }
        // もしかしたら他のブラウザでもなるかもしれないけど、
        // Chromeの場合、録画終了を押したとき、要素をきれいに終わらせてくれるわけでは無いらしく SimpleBlock の途中だろうとぶった切ってくるらしい、中途半端にデータが余ることがある
        // 例：タグの A3 で終わるなど
        // その場合にエラーにならないように、この後3バイト（ID / DataSize / Data それぞれ1バイト）ない場合はループを抜ける
        if (size <= index + 3) {
            break
        }
    }
    return index
}
 
/** Int を ByteArray に変換する */
internal fun Int.toByteArray(): ByteArray {
    // 多分 max 4 バイト
    val size = INT_TO_BYTEARRAY_LIST.first { (maxValue, _) ->
        this <= maxValue
    }.second
    var l = this
    val result = ByteArray(size)
    for (i in 0..<size) {
        result[i] = (l and 0xff).toByte()
        l = l shr 8
    }
    // 逆になってるのでもどす
    result.reverse()
    return result
}
 
/** ByteArray から Int へ変換する。ByteArray 内にある Byte は符号なしに変換される。 */
internal fun ByteArray.toInt(): Int {
    // 先頭に 0x00 があれば消す
    val validValuePos = kotlin.math.max(0, this.indexOfFirst { it != 0x00.toByte() })
    var result = 0
    // 逆にする
    // これしないと左側にバイトが移動するようなシフト演算？になってしまう
    // for を 多い順 にすればいいけどこっちの方でいいんじゃない
    drop(validValuePos).reversed().also { bytes ->
        for (i in 0 until bytes.count()) {
            result = result or (bytes.get(i).toInt().andFF() shl (8 * i))
        }
    }
    return result
}
 
/** ByteをIntに変換した際に、符号付きIntになるので、AND 0xFF するだけの関数 */
internal fun Int.andFF() = this and 0xFF

object FixWebmSeek {
 
    /**
     * WebM をパースする
     *
     * @param webmFileByteArray WebM ファイル
     * @return [MatroskaElement]の配列
     */
    fun parseWebm(webmFileByteArray: ByteArray): List<MatroskaElement> {
 
        /**
         * [byteArray] から次の EBML のパースを行う
         *
         * @param byteArray EBML の[ByteArray]
         * @param startPosition EBML 要素の開始位置
         * @return パース結果[MatroskaElement]と、パースしたデータの位置
         */
        fun parseEbmlElement(byteArray: ByteArray, startPosition: Int): Pair<MatroskaElement, Int> {
            var currentPosition = startPosition
 
            // ID をパース
            val idLength = byteArray[currentPosition].getElementLength()
            val idByteArray = byteArray.copyOfRange(currentPosition, currentPosition + idLength)
            val matroskaId = idByteArray.toMatroskaId()
            currentPosition += idLength
 
            // DataSize をパース
            val dataSizeLength = byteArray[currentPosition].getElementLength()
            // JavaScript の MediaRecorder は Segment / Cluster が DataSize が長さ不明になる
            val dataSize = byteArray.copyOfRange(currentPosition, currentPosition + dataSizeLength).getDataSize().let { dataSizeOrUnknown ->
                if (dataSizeOrUnknown == -1) {
                    // 長さ不明の場合は上から舐めて出す
                    val dataByteArray = byteArray.copyOfRange(currentPosition + UNKNOWN_DATA_SIZE.size, byteArray.size)
                    when (matroskaId) {
                        MatroskaId.Segment -> dataByteArray.analyzeUnknownDataSizeForSegmentData()
                        MatroskaId.Cluster -> dataByteArray.analyzeUnknownDataSizeForClusterData()
                        else -> throw RuntimeException("Cluster Segment 以外は長さ不明に対応していません；；")
                    }
                } else {
                    // 長さが求まっていればそれを使う
                    dataSizeOrUnknown
                }
            }
            currentPosition += dataSizeLength
 
            // Data を取り出す
            val dataByteArray = byteArray.copyOfRange(currentPosition, currentPosition + dataSize)
            currentPosition += dataSize
 
            // 返す
            val matroskaElement = MatroskaElement(matroskaId, dataByteArray)
            return matroskaElement to currentPosition
        }
 
        /**
         * [byteArray] から EBML 要素をパースする。
         * 親要素の場合は子要素まで再帰的に見つける。
         *
         * 一つだけ取りたい場合は [parseEbmlElement]
         * @param byteArray WebM のバイト配列
         * @return 要素一覧
         */
        fun parseAllEbmlElement(byteArray: ByteArray): List<MatroskaElement> {
            var readPosition = 0
            val elementList = arrayListOf<MatroskaElement>()
 
            while (true) {
                // 要素を取得し位置を更新
                val (element, currentPosition) = parseEbmlElement(byteArray, readPosition)
                elementList += element
                readPosition = currentPosition
 
                // 親要素の場合は子要素の解析をする
                if (element.matroskaId.isParent) {
                    val children = parseAllEbmlElement(element.data)
                    elementList += children
                }
 
                // 次のデータが 3 バイト以上ない場合は break（解析できない）
                // 3 バイトの理由ですが ID+DataSize+Data それぞれ1バイト以上必要なので
                if (byteArray.size <= readPosition + 3) {
                    break
                }
            }
 
            return elementList
        }
 
        // WebM の要素を全部パースする
        return parseAllEbmlElement(webmFileByteArray)
    }
 
}

private const val WEBM_PATH = """C:\Users\takusan23\Downloads\record-1703001154715.webm"""
 
fun main(args: Array<String>) {
    // ファイルを読み出す
    val webmByteArray = File(WEBM_PATH).readBytes()
    // 要素のリストに
    val elementList = FixWebmSeek.parseWebm(webmByteArray)
    println(elementList.map { it.matroskaId })
}

object FixWebmSeek {
 
    // 省略 ...
 
    /**
     * [parseWebm]で出来た要素一覧を元に、シークできる WebM を作成する
     *
     * @param elementList [parseWebm]
     * @return シークできる WebM のバイナリ
     */
    fun fixSeekableWebM(elementList: List<MatroskaElement>): ByteArray {
 
        /** SimpleBlock と Timestamp から動画の時間を出す */
        fun getVideoDuration(): Int {
            val lastTimeStamp = elementList.filterId(MatroskaId.Timestamp).last().data.toInt()
            // Cluster は 2,3 バイト目が相対時間になる
            val lastRelativeTime = elementList.filterId(MatroskaId.SimpleBlock).last().data.copyOfRange(1, 3).toInt()
            return lastTimeStamp + lastRelativeTime
        }
 
        /** 映像トラックの番号を取得 */
        fun getVideoTrackNumber(): Int {
            var videoTrackIndex = -1
            var latestTrackNumber = -1
            var latestTrackType = -1
            for (element in elementList) {
                if (element.matroskaId == MatroskaId.TrackNumber) {
                    latestTrackNumber = element.data.toInt()
                }
                if (element.matroskaId == MatroskaId.TrackType) {
                    latestTrackType = element.data.toInt()
                }
                if (latestTrackType != -1 && latestTrackNumber != -1) {
                    if (latestTrackType == 1) {
                        videoTrackIndex = latestTrackNumber
                        break
                    }
                }
            }
            return videoTrackIndex
        }
 
        /**
         * Cluster を見て [MatroskaId.CuePoint] を作成する
         *
         * @param clusterStartPosition Cluster 開始位置
         * @return CuePoint
         */
        fun createCuePoint(clusterStartPosition: Int): List<MatroskaElement> {
            // Cluster を上から見ていって CuePoint を作る
            val cuePointList = mutableListOf<MatroskaElement>()
            // 前回追加した Cluster の位置
            var prevPosition = clusterStartPosition
            elementList.forEachIndexed { index, element ->
                if (element.matroskaId == MatroskaId.Cluster) {
                    // Cluster の子から時間を取り出して Cue で使う
                    var childIndex = index
                    var latestTimestamp = -1
                    var latestSimpleBlockRelativeTime = -1
                    while (true) {
                        val childElement = elementList[childIndex++]
                        // Cluster のあとにある Timestamp を控える
                        if (childElement.matroskaId == MatroskaId.Timestamp) {
                            latestTimestamp = childElement.data.toInt()
                        }
                        // Cluster から見た相対時間
                        if (childElement.matroskaId == MatroskaId.SimpleBlock) {
                            latestSimpleBlockRelativeTime = childElement.data.copyOfRange(1, 3).toInt()
                        }
                        // Cluster の位置と時間がわかったので
                        if (latestTimestamp != -1 && latestSimpleBlockRelativeTime != -1) {
                            cuePointList += MatroskaElement(
                                MatroskaId.CuePoint,
                                byteArrayOf(
                                    *MatroskaElement(MatroskaId.CueTime, (latestTimestamp + latestSimpleBlockRelativeTime).toByteArray()).toEbmlByteArray(),
                                    *MatroskaElement(
                                        MatroskaId.CueTrackPositions,
                                        byteArrayOf(
                                            *MatroskaElement(MatroskaId.CueTrack, getVideoTrackNumber().toByteArray()).toEbmlByteArray(),
                                            *MatroskaElement(MatroskaId.CueClusterPosition, prevPosition.toByteArray()).toEbmlByteArray()
                                        )
                                    ).toEbmlByteArray()
                                )
                            )
                            break
                        }
                    }
                    // 進める
                    prevPosition += element.toEbmlByteArray().size
                }
            }
            return cuePointList
        }
 
        /** SeekHead を組み立てる */
        fun reclusiveCreateSeekHead(
            infoByteArraySize: Int,
            tracksByteArraySize: Int,
            clusterByteArraySize: Int
        ): MatroskaElement {
 
            /**
             * SeekHead を作成する
             * 注意しないといけないのは、SeekHead に書き込んだ各要素の位置は、SeekHead 自身のサイズを含めた位置にする必要があります。
             * なので、SeekHead のサイズが変わった場合、この後の Info Tracks の位置もその分だけズレていくので、注意が必要。
             */
            fun createSeekHead(seekHeadSize: Int): MatroskaElement {
                val infoPosition = seekHeadSize
                val tracksPosition = infoPosition + infoByteArraySize
                val clusterPosition = tracksPosition + tracksByteArraySize
                // Cue は最後
                val cuePosition = clusterPosition + clusterByteArraySize
                // トップレベル要素、この子たちの位置を入れる
                val topLevelElementList = listOf(
                    MatroskaId.Info to infoPosition,
                    MatroskaId.Tracks to tracksPosition,
                    MatroskaId.Cluster to clusterPosition,
                    MatroskaId.Cues to cuePosition
                ).map { (tag, position) ->
                    MatroskaElement(
                        MatroskaId.Seek,
                        byteArrayOf(
                            *MatroskaElement(MatroskaId.SeekID, tag.byteArray).toEbmlByteArray(),
                            *MatroskaElement(MatroskaId.SeekPosition, position.toByteArray()).toEbmlByteArray()
                        )
                    )
                }
                val seekHead = MatroskaElement(MatroskaId.SeekHead, topLevelElementList.map { it.toEbmlByteArray() }.concatByteArray())
                return seekHead
            }
 
            // まず一回 SeekHead 自身のサイズを含めない SeekHead を作る。
            // これで SeekHead 自身のサイズが求められるので、SeekHead 自身を考慮した SeekHead を作成できる。
            var prevSeekHeadSize = createSeekHead(0).toEbmlByteArray().size
            var seekHead: MatroskaElement
            while (true) {
                seekHead = createSeekHead(prevSeekHeadSize)
                val seekHeadSize = seekHead.toEbmlByteArray().size
                // サイズが同じになるまで SeekHead を作り直す
                if (prevSeekHeadSize == seekHeadSize) {
                    break
                } else {
                    prevSeekHeadSize = seekHeadSize
                }
            }
 
            return seekHead
        }
 
        // Duration 要素を作る
        val durationElement = MatroskaElement(MatroskaId.Duration, getVideoDuration().toFloat().toBits().toByteArray())
        // Duration を追加した Info を作る
        val infoElement = elementList.filterId(MatroskaId.Info).first().let { before ->
            before.copy(data = before.data + durationElement.toEbmlByteArray())
        }
 
        // ByteArray にしてサイズが分かるように
        val infoByteArray = infoElement.toEbmlByteArray()
        val tracksByteArray = elementList.filterId(MatroskaId.Tracks).first().toEbmlByteArray()
        val clusterByteArray = elementList.filterId(MatroskaId.Cluster).map { it.toEbmlByteArray() }.concatByteArray()
        // SeekHead を作る
        val seekHeadByteArray = reclusiveCreateSeekHead(
            infoByteArraySize = infoByteArray.size,
            tracksByteArraySize = tracksByteArray.size,
            clusterByteArraySize = clusterByteArray.size
        ).toEbmlByteArray()
 
        // Cues を作る
        val cuePointList = createCuePoint(seekHeadByteArray.size + infoByteArray.size + tracksByteArray.size)
        val cuesByteArray = MatroskaElement(MatroskaId.Cues, cuePointList.map { it.toEbmlByteArray() }.concatByteArray()).toEbmlByteArray()
 
        // Segment 要素に書き込むファイルが完成
        // 全部作り直しになる副産物として DataSize が不定長ではなくなります。
        val segment = MatroskaElement(
            MatroskaId.Segment,
            byteArrayOf(
                *seekHeadByteArray,
                *infoByteArray,
                *tracksByteArray,
                *clusterByteArray,
                *cuesByteArray
            )
        )
 
        // シークできるように修正した WebM のバイナリ
        // WebM 先頭の EBML を忘れずに、これは書き換える必要ないのでそのまま
        return byteArrayOf(
            *elementList.filterId(MatroskaId.EBML).first().toEbmlByteArray(),
            *segment.toEbmlByteArray()
        )
    }
 
}

import java.io.File
 
private const val WEBM_PATH = """C:\Users\takusan23\Downloads\record-1703001154715.webm"""
private val DOWNLOAD_FOLDER = File(System.getProperty("user.home"), "Downloads")
 
fun main(args: Array<String>) {
    // ファイルを読み出す
    val webmByteArray = File(WEBM_PATH).readBytes()
    // 要素のリストに
    val elementList = FixWebmSeek.parseWebm(webmByteArray)
    // シークできる WebM にする
    val seekableWebmByteArray = FixWebmSeek.fixSeekableWebM(elementList)
    // 保存する
    File(DOWNLOAD_FOLDER, "fix_webm_seek_kotlin_${System.currentTimeMillis()}.webm").writeBytes(seekableWebmByteArray)
}

plugins {
    kotlin("multiplatform") version "1.9.22"
}
 
group = "io.github.takusan23"
version = "1.0-SNAPSHOT"
 
repositories {
    mavenCentral()
}
 
kotlin {
    js {
        browser {
            // webpack とか
        }
        binaries.executable()
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FixSeekableWebmKotlinJs</title>
</head>
<body>
<script src="FixSeekableWebmKotlinJs.js"></script>
</body>
</html>

gradle jsRun --continuous 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FixSeekableWebmKotlinJs</title>
</head>
<style>
    .column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
</style>
<body>
<div class="column">
    <h1>JavaScript の MediaRecorder で作った WebM をシーク可能な WebM ファイルに修正する Kotlin/JS</h1>
    <p>処理はすべてブラウザ側の JavaScript で完結します。</p>
 
    <form>
        <label for="webm_picker">WebM ファイル:</label>
        <input type="file" id="webm_picker" accept="video/webm"/>
    </form>
 
    <button id="start_button">処理を開始</button>
 
    <p id="status_text">進捗</p>
</div>
<script src="FixSeekableWebmKotlinJs.js"></script>
</body>
</html>

import kotlinx.browser.document
import kotlinx.browser.window
 
fun main() {
    console.log("Hello, Kotlin/JS! こんにちは")
    document
    window.fetch()
    window.alert()
}

import kotlinx.browser.document
import kotlinx.browser.window
import org.w3c.dom.HTMLInputElement
import org.w3c.files.Blob
import org.w3c.files.FileReader
import org.w3c.files.get
 
fun main() {
    val buttonElement = document.getElementById("start_button")!!
    val statusElement = document.getElementById("status_text")!!
    val inputElement = document.getElementById("webm_picker")!! as HTMLInputElement
 
    // ボタンを押した時
    buttonElement.addEventListener("click", {
 
        // 選択したファイル
        val selectWebmFile = inputElement.files?.get(0)
        if (selectWebmFile == null) {
            window.alert("WebM ファイルを選択して下さい")
            return@addEventListener
        }
 
        // JavaScript の FileReader で WebM の ByteArray を取得する
        val fileReader = FileReader()
        fileReader.onload = {
            // ロード完了
            statusElement.textContent = "ロード完了"
 
            // なんか適当に値を返しておく必要がある？
            Unit
        }
 
        // ロード開始
        statusElement.textContent = "ロード中です"
        fileReader.readAsArrayBuffer(selectWebmFile)
    })
 
}

fun main() {
    val buttonElement = document.getElementById("start_button")!!
    val statusElement = document.getElementById("status_text")!!
    val inputElement = document.getElementById("webm_picker")!! as HTMLInputElement
 
    // ボタンを押した時
    buttonElement.addEventListener("click", {
 
        // 選択したファイル
        val selectWebmFile = inputElement.files?.get(0)
        if (selectWebmFile == null) {
            window.alert("WebM ファイルを選択して下さい")
            return@addEventListener
        }
 
        // JavaScript の FileReader で WebM の ByteArray を取得する
        val fileReader = FileReader()
        fileReader.onload = {
            // ロード完了
            statusElement.textContent = "ロード完了"
 
            // WebM のバイナリを取る
            val webmByteArray = (fileReader.result as ArrayBuffer).asByteArray()
 
            // 処理を始める
            // パース処理
            statusElement.textContent = "WebM を分解しています"
            val elementList = FixWebmSeek.parseWebm(webmByteArray)
 
            // 修正と再組み立て
            statusElement.textContent = "WebM へシーク時に必要な値を書き込んでいます"
            val seekableWebmByteArray = FixWebmSeek.fixSeekableWebM(elementList)
 
            // ダウンロード
            statusElement.textContent = "終了しました"
            seekableWebmByteArray.downloadFromByteArray()
 
            // なんか適当に値を返しておく必要がある？
            Unit
        }
        fileReader.readAsArrayBuffer(selectWebmFile)
    })
 
}
 
/** JS の ArrayBuffer を Kotlin の ByteArray にする */
private fun ArrayBuffer.asByteArray(): ByteArray = Int8Array(this).unsafeCast<ByteArray>()
 
/** ByteArray をダウンロードさせる */
private fun ByteArray.downloadFromByteArray() {
    // Blob Url
    val blob = Blob(arrayOf(this), BlobPropertyBag(type = "video/webm"))
    val blobUrl = URL.createObjectURL(blob)
    // <a> タグを作って押す
    val anchor = document.createElement("a") as HTMLAnchorElement
    anchor.href = blobUrl
    anchor.download = "fix-seekable-webm-kotlinjs-${Date.now()}.webm"
    document.body?.appendChild(anchor)
    anchor.click()
    anchor.remove()
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kotlin/JS で作った WebM ツール</title>
</head>
<style>
    .column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
</style>
<body>
<div class="column">
    <h1>JavaScript の MediaRecorder で画面録画するやつ。</h1>
    <p>処理はすべてブラウザ側の JavaScript で完結します。WebM
        ファイルが生成されます。そのままではシークできないので、下のツールを使ってください。</p>
 
    <button id="record_button">録画開始・終了</button>
 
    <h1>JavaScript の MediaRecorder で作った WebM をシーク可能な WebM ファイルに修正する Kotlin/JS。</h1>
    <p>処理はすべてブラウザ側の JavaScript で完結します。</p>
 
    <form>
        <label for="webm_picker">WebM ファイル:</label>
        <input type="file" id="webm_picker" accept="video/webm"/>
    </form>
 
    <button id="start_button">処理を開始</button>
 
    <p id="status_text">進捗</p>
 
    <a href="https://github.com/takusan23/FixSeekableWebmKotlinJs">ソースコード</a>
</div>
<script src="FixSeekableWebmKotlinJs.js"></script>
</body>
</html>

fun main() {
    setupScreenRecorde()
    setupWebmSeekable()
}
 
/** 画面録画のやつの初期化 */
private fun setupScreenRecorde() {
    val recordButtonElement = document.getElementById("record_button")!!
    var mediaStream: MediaStream? = null
    var mediaRecorder: dynamic = null
 
    /** 録画データ */
    val chunks = arrayListOf<Blob>()
 
    /** 録画中か */
    var isRecording = false
 
    fun startRecord() {
        // ここから先 Kotlin/JS 側で定義がなかったため全部 dynamic です。こわい！
        val mediaDevicesPrototype = js("window.navigator.mediaDevices")
        // Promise です
        mediaDevicesPrototype.getDisplayMedia(
            json(
                "audio" to json("channelCount" to 2),
                "video" to true
            )
        ).then { displayMedia: MediaStream ->
            mediaStream = displayMedia
            // どうやら変数とかはそのまま文字列の中に埋め込めば動くらしい。なんか気持ち悪いけど動くよ
            mediaRecorder = js(""" new MediaRecorder(displayMedia, { mimeType: 'video/webm; codecs="vp9"' }) """)
            // 録画データが細切れになって呼ばれる
            mediaRecorder.ondataavailable = { ev: dynamic ->
                chunks.add(ev.data as Blob)
                Unit
            }
            // 録画開始
            mediaRecorder.start(100)
            isRecording = true
            // 適当に値を返す
            Unit
        }.catch { err: dynamic -> console.log(err); window.alert("エラーが発生しました") }
    }
 
    fun stopRecord() {
        // 録画を止める
        isRecording = false
        mediaRecorder.stop()
        mediaStream?.getTracks()?.forEach { it.stop() }
        // Blob にして保存
        Blob(chunks.toTypedArray(), BlobPropertyBag(type = "video/webm"))
            .downloadFile(fileName = "javascript-mediarecorder-${Date.now()}.webm")
    }
 
    recordButtonElement.addEventListener("click", {
        if (!isRecording) {
            startRecord()
        } else {
            stopRecord()
        }
    })
}
 
/** WebM をシーク可能にするやつの初期化 */
private fun setupWebmSeekable() {
    val buttonElement = document.getElementById("start_button")!!
    val statusElement = document.getElementById("status_text")!!
    val inputElement = document.getElementById("webm_picker")!! as HTMLInputElement
 
    // ボタンを押した時
    buttonElement.addEventListener("click", {
 
        // 選択したファイル
        val selectWebmFile = inputElement.files?.get(0)
        if (selectWebmFile == null) {
            window.alert("WebM ファイルを選択して下さい")
            return@addEventListener
        }
 
        // JavaScript の FileReader で WebM の ByteArray を取得する
        val fileReader = FileReader()
        fileReader.onload = {
            // ロード完了
            statusElement.textContent = "ロード完了"
 
            // WebM のバイナリを取る
            val webmByteArray = (fileReader.result as ArrayBuffer).asByteArray()
 
            // 処理を始める
            // パース処理
            statusElement.textContent = "WebM を分解しています"
            val elementList = FixWebmSeek.parseWebm(webmByteArray)
 
            // 修正と再組み立て
            statusElement.textContent = "WebM へシーク時に必要な値を書き込んでいます"
            val seekableWebmByteArray = FixWebmSeek.fixSeekableWebM(elementList)
 
            // ダウンロード
            statusElement.textContent = "終了しました"
            Blob(arrayOf(seekableWebmByteArray), BlobPropertyBag(type = "video/webm"))
                .downloadFile(fileName = "fix-seekable-webm-kotlinjs-${Date.now()}.webm")
 
            // なんか適当に値を返しておく必要がある？
            Unit
        }
 
        // ロード開始
        statusElement.textContent = "ロード中です"
        fileReader.readAsArrayBuffer(selectWebmFile)
    })
}
 
/** JS の ArrayBuffer を Kotlin の ByteArray にする */
private fun ArrayBuffer.asByteArray(): ByteArray = Int8Array(this).unsafeCast<ByteArray>()
 
/** [Blob]をダウンロードする */
private fun Blob.downloadFile(fileName: String) {
    // Blob Url
    val blobUrl = URL.createObjectURL(this)
    // <a> タグを作って押す
    val anchor = document.createElement("a") as HTMLAnchorElement
    anchor.href = blobUrl
    anchor.download = fileName
    document.body?.appendChild(anchor)
    anchor.click()
    anchor.remove()
}

val displayMedia = ...
// 変数等を渡したい場合は、テンプレートではなく変数名をそのまま JavaScript のコードの中に埋め込めばおっけー
val mediaRecorder = js(""" new MediaRecorder(displayMedia, { mimeType: 'video/webm; codecs="vp9"' }) """)

Element(Cluster, [0x00,0x00,0x00,0x00,0x00]) // Cluster の子要素全体 の ByteArray。この後に続く SimpleBlock の分まで持ってる
Element(Timestamp, [0x00,0x00,0x00,0x00,0x00]) // 各子要素 の ByteArray
Element(SimpleBlock, [0x00,0x00,0x00,0x00,0x00])
Element(SimpleBlock, [0x00,0x00,0x00,0x00,0x00])
Element(SimpleBlock, [0x00,0x00,0x00,0x00,0x00])