moqt-js

v2026.1.0

Published

15 days ago

MOQT (Media over QUIC Transport) client library

0High
0Medium
0Low

voluntas

takeruohta

moqt webtransport

moqt-js

[!WARNING] このライブラリは開発中であり、仕様が積極的に変更される場合があります。

[!WARNING] このライブラリは時雨堂が開発している MOQT Relay サーバーとのみ疎通確認を行っています。他の MOQT Relay サーバーとの疎通確認は行っておらず、今後も予定はありません。

About Shiguredo's open source software

We will not respond to PRs or issues that have not been discussed on Discord. Also, Discord is only available in Japanese.

Please read https://github.com/shiguredo/oss/blob/master/README.en.md before use.

時雨堂のオープンソースソフトウェアについて

利用前に https://github.com/shiguredo/oss をお読みください。

moqt-js について

moqt-js はブラウザ向けの Media over QUIC Transport (MOQT) クライアントライブラリです。

特徴

ブラウザ向け MOQT クライアント
- WebTransport API を利用
- Publisher / Subscriber 対応
- 高レベル API (WebCodecs / MediaStream 対応)
Media over QUIC Transport (MOQT) 対応
- Media over QUIC Transport
- draft-07 と draft-15 対応
Low Overhead Container 対応
- Media over QUIC - Low Overhead Container
MOQT Streaming Format (MSF) 対応
- MOQT Streaming Format
- Catalog (トラックメタデータ)
外部依存なし

実装状況

Media over QUIC Transport

draft-ietf-moq-transport-15 の機能実装状況です。

Publisher

PUBLISH メッセージ
PUBLISH_OK メッセージ
PUBLISH_DONE メッセージ
Object Stream 送信 (Subgroup Header)
Object Datagram 送信
Publisher Priority
DELIVERY_TIMEOUT パラメータ
MAX_CACHE_DURATION パラメータ

Subscriber

SUBSCRIBE メッセージ
SUBSCRIBE_OK メッセージ
SUBSCRIBE_UPDATE メッセージ
UNSUBSCRIBE メッセージ
Object Stream 受信 (Subgroup Header)
Object Datagram 受信
FETCH メッセージ (Standalone)
FETCH メッセージ (Joining Relative)
FETCH メッセージ (Joining Absolute)
FETCH_OK メッセージ
FETCH_CANCEL メッセージ
Subscription Filter (Largest Object)
Subscription Filter (Next Group Start)
Subscription Filter (AbsoluteStart)
Subscription Filter (AbsoluteRange)
Subscriber Priority
Group Order (Ascending / Descending)
DELIVERY_TIMEOUT パラメータ

コントロールメッセージ

CLIENT_SETUP / SERVER_SETUP
GOAWAY
MAX_REQUEST_ID
REQUESTS_BLOCKED
REQUEST_OK
REQUEST_ERROR
PUBLISH_NAMESPACE
PUBLISH_NAMESPACE_DONE
PUBLISH_NAMESPACE_CANCEL
SUBSCRIBE_NAMESPACE
UNSUBSCRIBE_NAMESPACE
TRACK_STATUS

データストリーム

Subgroup Header
Fetch Header
Object Datagram
Object Status (Normal / End of Group / End of Track)
Object Extensions
Extension Headers (Prior Group ID Gap / Prior Object ID Gap / Immutable Extensions)

Low Overhead Container

draft-ietf-moq-loc-01 の機能実装状況です。

LOC Header Extensions

Capture Timestamp
Video Config
Video Frame Marking
Audio Level

MOQT Streaming Format

draft-ietf-moq-msf の機能実装状況です。

Catalog

Root
- version / generatedAt / isComplete / tracks
- deltaUpdate / addTracks / removeTracks / cloneTracks
Track
- namespace / name / packaging / isLive
- role / label / lang
- targetLatency / trackDuration
Track Grouping
- renderGroup / altGroup / depends
- temporalId / spatialId / parentName
Codec
- codec / mimeType / initData / eventType
Video
- width / height / displayWidth / displayHeight
- framerate / timescale / bitrate
Audio
- samplerate / channelConfig / bitrate

Timeline

Media Timeline
Event Timeline

インストール

pnpm add -E moqt-js

使い方

高レベル API (推奨)

MediaStream を使用した簡単な配信・受信 API です。WebCodecs API を内部で使用し、エンコード・デコードを自動的に行います。

Publisher

import { createMediaPublisher } from "moqt-js";

const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });

const publisher = await createMediaPublisher(
  "https://example.com/moqt",
  {
    namespace: ["live"],
    audio: {
      trackName: "audio",
      codec: "opus",
      bitrate: 128_000,
    },
    video: {
      trackName: "video",
      codec: "h264",
      width: 1280,
      height: 720,
      bitrate: 2_000_000,
      framerate: 30,
    },
  },
  {
    onStateChange: (state) => console.log("state:", state),
    onError: (e) => console.error(e),
  },
);

await publisher.start(stream);

// 配信終了
await publisher.close();

Subscriber

import { createMediaSubscriber } from "moqt-js";

const subscriber = await createMediaSubscriber(
  "https://example.com/moqt",
  {
    namespace: ["live"],
    audio: { trackName: "audio" },
    video: { trackName: "video" },
  },
  {
    onStateChange: (state) => console.log("state:", state),
    onError: (e) => console.error(e),
  },
);

await subscriber.start();

// MediaStream を video 要素に設定
videoElement.srcObject = subscriber.mediaStream;

// 受信終了
await subscriber.close();

低レベル API

プロトコルレベルの細かい制御が必要な場合に使用します。WebCodecs API や MediaStream API の処理は自前で実装する必要があります。

Publisher

import { connect } from "moqt-js";

const session = await connect("https://example.com/moqt", {
  close: () => console.log("disconnected"),
  error: (e) => console.error(e),
});

const publisher = await session.publish(["live"], "video", { error: (e) => console.error(e) });

publisher.sendObject({ groupId: 0, objectId: 0, payload: new Uint8Array([1, 2, 3]) });
await publisher.done();

Subscriber

import { connect } from "moqt-js";

const session = await connect("https://example.com/moqt", {
  close: () => console.log("disconnected"),
  error: (e) => console.error(e),
});

const subscriber = await session.subscribe(["live"], "video", {
  object: (obj) => console.log(obj),
  end: () => console.log("track ended"),
  error: (e) => console.error(e),
});

// データ受信待機

await subscriber.unsubscribe();

動作環境

Chrome 最新版で --enable-features=EnableWebTransportDraft07 フラグを有効にした状態でのみ動作確認しています。

[!NOTE] Chrome は現時点で WebTransport draft-02 が実装されています。 moqt-js は draft-07 を必要とするため、上記のフラグが必須です。

macOS での実行例

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-features=EnableWebTransportDraft07

ビルド

pnpm install
pnpm build

テスト

pnpm test

サンプル

examples/ ディレクトリにサンプルコードがあります。

pnpm dev:examples

high-level-api

高レベル API を使用した Publisher / Subscriber のサンプルです。1 ページで配信と受信を体験できます。

DevTools

devtools/ ディレクトリに開発ツールがあります。

pnpm build
pnpm run dev

使用技術

Preact - UI フレームワーク
@preact/signals - 状態管理
preact-iso - ルーティング
Tailwind CSS - CSS フレームワーク
Vite - ビルドツール
TypeScript - 言語
Oxc - リンター / フォーマッター
Vitest - テストフレームワーク
fast-check - プロパティベーステスト

moqt-devtools

moqt-js を利用した MOQT の動作確認ツールです。

Publisher / Subscriber 両方の動作確認
複数 Subscriber の同時接続
ダミー映像 / カメラ映像の選択
コーデック選択 (VP8 / VP9 / AV1 / H.264 / H.265)
解像度 / フレームレート / ビットレート / キーフレーム間隔の設定
MAX_CACHE_DURATION の設定
自己署名証明書のハッシュ指定
WebCodecs Dedicated Worker 対応
デバッグパネル (MOQT プロトコルメッセージのログ表示)
統計情報の表示 (エンコード/デコードフレーム数、送受信バイト数など)
カタログ情報の表示
Joining Fetch 対応
設定を URL クエリパラメータで共有

webcodecs-devtools

WebCodecs API の動作確認ツールです。moqt-js とは独立しています。

VideoEncoder / VideoDecoder の動作確認
ダミー映像 / カメラ映像の選択
コーデック選択 (VP8 / VP9 / AV1 / H.264 / H.265)
解像度 / フレームレート / ビットレート / キーフレーム間隔の設定
Dedicated Worker モード対応
統計情報の表示 (フレーム数、キーフレーム数、総バイト数、平均ビットレート)
フレームログの表示

webtransport-devtools

WebTransport API の動作確認ツールです。moqt-js とは独立しています。

WebTransport 接続 / 切断
自己署名証明書のハッシュ指定
双方向ストリームの作成と送受信
送信専用単方向ストリームの作成と送信
受信専用単方向ストリームの受信
Datagram の送受信

ライセンス

Apache License 2.0

Copyright 2025-2026, Shiguredo Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

moqt-js

About Shiguredo's open source software

時雨堂のオープンソースソフトウェアについて

moqt-js について

特徴

実装状況

Media over QUIC Transport

Publisher

Subscriber

コントロールメッセージ

データストリーム

Low Overhead Container

LOC Header Extensions

MOQT Streaming Format

Catalog

Timeline

インストール

使い方

高レベル API (推奨)

Publisher

Subscriber

低レベル API

Publisher

Subscriber

動作環境

macOS での実行例

ビルド

テスト

サンプル

high-level-api

DevTools

使用技術

moqt-devtools

webcodecs-devtools

webtransport-devtools

ライセンス