Merge pull request #489 from shiguredo/feature/mp4-media-stream-vite

MP4 から MediaStream を作成するためのパッケージを追加する
shiguredo · Oct 16, 2024 · a37d597 · a37d597
2 parents 95386d6 + f09464a
commit a37d597
Show file tree

Hide file tree

Showing 22 changed files with 1,829 additions and 3 deletions.
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -21,6 +21,7 @@ jobs:
         with:
           version: 0.12.0
       - run: zig version
+      - run: rustup update stable && rustup target add wasm32-unknown-unknown
       - uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}

diff --git a/.gitignore b/.gitignore
@@ -42,3 +42,6 @@ yarn.lock
 
 # Ignore typedoc output
 apidoc/
+
+# Rust
+/target/
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -0,0 +1,3 @@
+[workspace]
+members = ["packages/mp4-media-stream/wasm/"]
+resolver = "2"
diff --git a/examples/index.html b/examples/index.html
@@ -12,8 +12,9 @@
       <li><a href="./light-adjustment/">ライト調整サンプル</a></li>
       <li><a href="./light-adjustment-gpu/">ライト調整GPUサンプル</a></li>
       <li><a href="./noise-suppression/">ノイズ抑制サンプル</a></li>
+      <li><a href="./mp4-media-stream/">MP4 メディアストリームサンプル</a></li>
     </ul>
   </div>
 </body>
 
-</html>
+</html>
diff --git a/examples/mp4-media-stream/index.html b/examples/mp4-media-stream/index.html
@@ -0,0 +1,26 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Media Processors: MP4 メディアストリームサンプル</title>
+  </head>
+  <body>
+    <h1>Media Processors: MP4 メディアストリームサンプル</h1>
+
+    <h3>入力 MP4 ファイル</h3>
+    ファイル選択後に「再生開始」ボタンを押してください。
+    <br /><br />
+    <input id="input" type="file" accept="video/mp4" />
+    <br /><br />
+    <input id="play" type="button" value="再生開始" />
+    <input id="stop" type="button" value="再生停止" />
+
+    <br /><br />
+    <input id="repeat" type="checkbox"> リピート再生を有効にする
+    <br />
+
+    <h3>出力映像</h3>
+    <video id="output" autoplay playsinline></video>
+
+    <script type="module" src="./main.mts"></script>
+  </body>
+</html>
diff --git a/examples/mp4-media-stream/main.mts b/examples/mp4-media-stream/main.mts
@@ -0,0 +1,57 @@
+import { Mp4MediaStream } from '@shiguredo/mp4-media-stream'
+
+document.addEventListener('DOMContentLoaded', async () => {
+  let mp4MediaStream
+
+  if (!Mp4MediaStream.isSupported()) {
+    alert('Unsupported platform')
+    throw Error('Unsupported platform')
+  }
+
+  async function load() {
+    const input = document.getElementById('input')
+    const files = input.files
+    if (files === null || files.length === 0) {
+      return
+    }
+    const file = files[0]
+
+    if (mp4MediaStream !== undefined) {
+      await mp4MediaStream.stop()
+    }
+
+    try {
+      mp4MediaStream = await Mp4MediaStream.load(file)
+    } catch (e) {
+      alert(e.message)
+      throw e
+    }
+  }
+
+  function play() {
+    if (mp4MediaStream === undefined) {
+      alert('MP4 ファイルが未選択です')
+      return
+    }
+
+    const options = {
+      repeat: document.getElementById('repeat').checked,
+    }
+    const stream = mp4MediaStream.play(options)
+
+    const output = document.getElementById('output')
+    output.srcObject = stream
+  }
+
+  async function stop() {
+    if (mp4MediaStream === undefined) {
+      return
+    }
+
+    await mp4MediaStream.stop()
+  }
+
+  document.getElementById('input').addEventListener('change', load)
+  document.getElementById('play').addEventListener('click', play)
+  document.getElementById('stop').addEventListener('click', stop)
+})
diff --git a/examples/package.json b/examples/package.json
@@ -12,9 +12,10 @@
     "@shiguredo/light-adjustment": "workspace:*",
     "@shiguredo/light-adjustment-gpu": "workspace:*",
     "@shiguredo/noise-suppression": "workspace:*",
-    "@shiguredo/virtual-background": "workspace:*"
+    "@shiguredo/virtual-background": "workspace:*",
+    "@shiguredo/mp4-media-stream": "workspace:*"
   },
   "devDependencies": {
     "vite-plugin-static-copy": "1.0.6"
   }
-}
+}
diff --git a/examples/vite.config.mjs b/examples/vite.config.mjs
@@ -24,6 +24,10 @@ export default defineConfig({
         __dirname,
         '../packages/light-adjustment-gpu/dist/light_adjustment_gpu.mjs',
       ),
+      '@shiguredo/mp4-media-stream': resolve(
+        __dirname,
+        '../packages/mp4-media-stream/dist/mp4_media_stream.mjs',
+      ),
     },
   },
   optimizeDeps: {
@@ -32,6 +36,7 @@ export default defineConfig({
       '@shiguredo/noise-suppression',
       '@shiguredo/light-adjustment',
       '@shiguredo/light-adjustment-gpu',
+      '@shiguredo/mp4-media-stream',
     ],
   },
   build: {
@@ -44,6 +49,7 @@ export default defineConfig({
         noiseSuppression: resolve(__dirname, 'noise-suppression/index.html'),
         videoMultiProcessors: resolve(__dirname, 'video-multi-processors/index.html'),
         videoMultiProcessorsGpu: resolve(__dirname, 'video-multi-processors-gpu/index.html'),
+        mp4MediaStream: resolve(__dirname, 'mp4-media-stream/index.html'),
       },
     },
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -42,3 +42,6 @@ yarn.lock @@
     # Ignore typedoc output
     apidoc/
+    # Rust
+    /target/