App: Create mkv player

This uses a custom ffmpeg-wasm.core version to fix usage on iOS.

The custom version can be found here: ffmpegwasm/ffmpeg.wasm-core#15

Signed-off-by: kingbri <bdashore3@gmail.com>

package.json

@@ -3,12 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ffmpeg/core": "^0.10.0",
     "@ffmpeg/ffmpeg": "^0.9.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-hook-videojs": "^2.1.0-beta.1",
     "react-scripts": "3.4.1"
   },
   "scripts": {

src/App.js

@@ -3,27 +3,75 @@ import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
 import './App.css';
 
 function App() {
+  const [showVideoPlayer, setShowVideoPlayer] = useState(false);
   const [videoSrc, setVideoSrc] = useState('');
-  const [message, setMessage] = useState('Click Start to transcode');
+  const [subsSrc, setSubsSrc] = useState('');
+  const [message, setMessage] = useState('Add a URL and click start to remux to mp4');
+  const [url, setUrl] = useState('')
   const ffmpeg = createFFmpeg({
+    corePath: '/ffmpeg/ffmpeg-core.js',
     log: true,
+    progress: (p) => {
+      console.log(p)
+    }
   });
-  const doTranscode = async () => {
+
+  async function doTranscode() {
     setMessage('Loading ffmpeg-core.js');
     await ffmpeg.load();
-    setMessage('Start transcoding');
-    ffmpeg.FS('writeFile', 'test.avi', await fetchFile('/flame.avi'));
-    await ffmpeg.run('-i', 'test.avi', 'test.mp4');
-    setMessage('Complete transcoding');
+
+    setMessage('FFmpeg loaded');
+    setMessage('Fetching your video file')
+    let file = await fetchFile(url)
+
+    ffmpeg.FS('writeFile', 'test.mkv', file);
+    setMessage('Remuxing started')
+    await ffmpeg.run(
+      '-i',
+      'test.mkv',
+      '-map',
+      '0:s',
+      'subs.vtt',
+      '-map',
+      '0:v',
+      '-map',
+      '0:a:0',
+      '-c',
+      'copy',
+      'test.mp4'
+    );
+
+    setMessage('Remuxing complete');
+
     const data = ffmpeg.FS('readFile', 'test.mp4');
     setVideoSrc(URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' })));
+
+    const subs = ffmpeg.FS('readFile', 'subs.vtt');
+    setSubsSrc(URL.createObjectURL(new Blob([subs], { type: 'text/vtt' })));
+
+    setShowVideoPlayer(true)
   };
+
+  function handleURLChange(e) {
+    setUrl(e.target.value)
+  }
+
   return (
     <div className="App">
-      <p/>
-      <video src={videoSrc} controls></video><br/>
+      <p />
+      <label>
+        Enter URL: <input type="text" value={url} onChange={handleURLChange}></input>
+      </label>
       <button onClick={doTranscode}>Start</button>
       <p>{message}</p>
+      { showVideoPlayer && 
+        <div>
+          <br/>
+          <video src={videoSrc} controls>
+            <track label="English" kind="subtitles" srclang="en" src={subsSrc} default></track>
+          </video>
+        </div>
+      }
     </div>
   );
 }