proof of concept

package.json

@@ -25,6 +25,7 @@
   },
   "homepage": "https://skyrim.github.io/hlviewer.js",
   "devDependencies": {
+    "@types/dom-mediacapture-record": "^1.0.7",
     "@types/gl-matrix": "^2.4.1",
     "@types/node": "^10.5.4",
     "@types/pngjs": "^3.3.2",
@@ -34,7 +35,7 @@
     "cross-env": "^5.2.0",
     "mocha": "^5.2.0",
     "pngjs": "^3.3.3",
-    "typescript": "^2.9.2",
+    "typescript": "^4.1.3",
     "webpack": "^4.16.3",
     "webpack-cli": "^3.1.0",
     "webpack-node-externals": "^1.7.2"

src/PlayerInterface/Buttons/RecordButton/index.tsx

+import { h } from 'preact'
+import { ControlsStyle as cs } from '../../Controls.style'
+
+export function RecordButton(props: { onClick?: (e: any) => void }) {
+  return (
+    <div class={cs.button} onClick={props.onClick}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 64 64"
+        fill="red"
+      >
+        <path d="M0 0 L0 64 L64 32 Z" />
+      </svg>
+    </div>
+  )
+}

src/PlayerInterface/ReplayMode/index.tsx

@@ -6,10 +6,11 @@ import { TimeLine } from '../TimeLine'
 import { VolumeControl } from '../VolumeControl'
 import { PlayButton } from '../Buttons/PlayButton'
 import { PauseButton } from '../Buttons/PauseButton'
+import { RecordButton } from '../Buttons/RecordButton'
 import { VolumeButton } from '../Buttons/VolumeButton'
 import { SpeedUpButton } from '../Buttons/SpeedUpButton'
-import { SpeedDownButton } from '../Buttons/SpeedDownButton'
 import { SettingsButton } from '../Buttons/SettingsButton'
+import { SpeedDownButton } from '../Buttons/SpeedDownButton'
 import { FullscreenButton } from '../Buttons/FullscreenButton'
 import { ControlsStyle as cs } from '../Controls.style'
 
@@ -61,6 +62,42 @@ export class ReplayMode extends Component<ReplayModeProps> {
     this.forceUpdate()
   }
 
+  onRecord = () => {
+    const canvas = this.props.game.canvas
+    const stream = (canvas as any).captureStream(60) // record at 60fps
+    this.props.game.soundSystem.stream.stream.getAudioTracks().forEach((a) => stream.addTrack(a))
+
+    const chunks: Blob[] = []
+    const recorder = new MediaRecorder(stream, {
+      audioBitsPerSecond: 128000,
+      videoBitsPerSecond: 30720000,
+      mimeType: 'video/webm'
+    })
+    recorder.addEventListener('dataavailable', (e) => {
+      chunks.push(e.data)
+    })
+    recorder.addEventListener('stop', () => {
+      exportVid(new Blob(chunks, { type: 'video/webm' }))
+    })
+
+    recorder.start()
+    setTimeout(() => {
+      recorder.stop()
+    }, 3000)
+
+    function exportVid(blob: any) {
+      const vid = document.createElement('video')
+      vid.src = URL.createObjectURL(blob)
+      vid.controls = true
+      document.body.appendChild(vid)
+      const a = document.createElement('a')
+      a.download = 'output.webm'
+      a.href = vid.src
+      a.textContent = 'Download the clip'
+      document.body.appendChild(a)
+    }
+  }
+
   render() {
     const game = this.props.game
     const player = game.player
@@ -80,6 +117,7 @@ export class ReplayMode extends Component<ReplayModeProps> {
               <PauseButton onClick={this.onPauseClick} />
             )}
             <SpeedUpButton onClick={this.onSpeedUp} />
+            <RecordButton onClick={this.onRecord} />
             <VolumeButton onClick={this.onVolumeClick} />
             <VolumeControl game={game} />
             <Time player={player} />

src/SoundSystem.ts

@@ -8,6 +8,7 @@ const audioContext: AudioContext = new polyfillAudioContext()
 
 export class SoundSystem {
   context: AudioContext
+  stream: MediaStreamAudioDestinationNode
   channels: any[]
   masterGain: GainNode
   preMuteVolume: number
@@ -15,6 +16,7 @@ export class SoundSystem {
 
   constructor() {
     this.context = audioContext
+    this.stream = audioContext.createMediaStreamDestination()
 
     this.events = createNanoEvents()
 
@@ -27,6 +29,7 @@ export class SoundSystem {
     this.masterGain = this.context.createGain()
     this.masterGain.gain.value = volume
     this.masterGain.connect(this.context.destination)
+    this.masterGain.connect(this.stream)
 
     for (let i = 0; i < 8; ++i) {
       this.channels.push({

src/Time.ts

@@ -2,7 +2,7 @@ const wnd: any = window
 
 let _now
 if (typeof performance !== 'undefined') {
-  if (performance.now) {
+  if ((performance as any).now) {
     _now = () => wnd.performance.now()
   } else if (wnd.performance.mozNow) {
     _now = () => wnd.performance.mozNow()