Merge pull request #594 from shiguredo/feature/fix-mp4-media

mp4Media 関連のバグ修正

CHANGES.md

@@ -18,6 +18,8 @@
     - Chrome / Edge のみで利用可能
     - B フレームを含んだ H.264 は正常に再生できない
   - @sile
+- [ADD] @shiguredo/mp4-media-stream (2024.1.2) を依存パッケージに追加する
+  - @sile
 - [CHANGE] audioBitRate と videoBitRate を自由に設定できるようにする
   - 自由入力にし、選択肢以外のビットレートでも Sora の接続パラメータとして使用できるようにする
   - @tnamao

package.json

@@ -27,7 +27,7 @@
   "dependencies": {
     "@reduxjs/toolkit": "2.3.0",
     "@shiguredo/light-adjustment": "2024.1.0",
-    "@shiguredo/mp4-media-stream": "2024.1.0",
+    "@shiguredo/mp4-media-stream": "2024.1.2",
     "@shiguredo/noise-suppression": "2022.4.2",
     "@shiguredo/virtual-background": "2023.2.0",
     "bootstrap": "5.3.3",

src/app/actions.ts

@@ -671,7 +671,11 @@ async function createMediaStream(
     )
     return [mediaStream, gainNode]
   }
-  if (state.mediaType === 'mp4Media' && state.mp4MediaStream !== null) {
+  if (state.mediaType === 'mp4Media') {
+    if (state.mp4MediaStream === null) {
+      throw new Error('No MP4 file has been selected')
+    }
+
     // 指定の MP4 を再生するための MediaStream を返す
     // DevTools ではいったん常に繰り返し再生にしておく
     return [state.mp4MediaStream.play({ repeat: true }), null]

src/app/slice.ts

@@ -289,7 +289,7 @@ export const slice = createSlice({
     setMediaStats: (state, action: PayloadAction<boolean>) => {
       state.mediaStats = action.payload
     },
-    setMp4MediaStream: (state, action: PayloadAction<Mp4MediaStream>) => {
+    setMp4MediaStream: (state, action: PayloadAction<Mp4MediaStream | null>) => {
       state.mp4MediaStream = action.payload
     },
     setNoiseSuppression: (state, action: PayloadAction<SoraDevtoolsState['noiseSuppression']>) => {

src/components/DevtoolsPane/Mp4FileForm.tsx

@@ -20,16 +20,28 @@ export const Mp4FileForm: React.FC = () => {
     if (files === null || files.length === 0) {
       return
     }
-    const mp4MediaStream = await Mp4MediaStream.load(files[0])
-    dispatch(setMp4MediaStream(mp4MediaStream))
+
+    // MP4 ファイルをロードする
+    try {
+      const mp4MediaStream = await Mp4MediaStream.load(files[0])
+      dispatch(setMp4MediaStream(mp4MediaStream))
+    } catch (e) {
+      // ロードに失敗したらファイル選択をクリアする
+      event.target.value = ''
+
+      // 以前の内容が残っていた場合に備えて null を入れておく
+      dispatch(setMp4MediaStream(null))
+
+      throw e
+    }
   }
   if (mediaType !== 'mp4Media') {
     return null
   }
   return (
     <FormGroup className="form-inline" controlId="mp4File">
       <TooltipFormLabel kind="mp4File">mp4File:</TooltipFormLabel>
-      <Form.Control type="file" disabled={disabled} onChange={onChange} />
+      <Form.Control type="file" accept="video/mp4" disabled={disabled} onChange={onChange} />
     </FormGroup>
   )
 }