纯JS录制Video标签播放的视频

修复 MediaRecorder 录制的视频时长.js

import { Decoder, tools, Reader } from './EBML.js'

// EBML: https://www.webrtc-experiment.com/EBML.js


/**
 * @param {Blob} file - File or Blob object.
 * @param {function} callback - Callback function.
 * @example
 * getSeekableBlob(blob or file, callback);
 * @see {@link https://github.com/muaz-khan/RecordRTC|RecordRTC Source Code}
 */
export function getSeekableBlob(inputBlob, callback) {
  const reader = new Reader()
  const decoder = new Decoder()
  const tool = tools

  const fileReader = new FileReader()
  fileReader.onload = function () {
    const ebmlElms = decoder.decode(this.result)
    ebmlElms.forEach(function (element) {
      reader.read(element)
    })
    reader.stop()
    const refinedMetadataBuf = tool.makeMetadataSeekable(reader.metadatas, reader.duration, reader.cues)
    const body = this.result.slice(reader.metadataSize)
    const newBlob = new Blob([refinedMetadataBuf, body], {
      type: inputBlob.type
    })

    callback(newBlob)
  }
  fileReader.readAsArrayBuffer(inputBlob)
}

纯JS录制Video标签播放的视频.js

const videoEl = document.getElementById('video')
const stream = videoEl.captureStream()
const videoRecorder = new MediaRecorder(stream, {mimeType:'video/webm;codecs=vp8,opus'})

let chunks = []
videoRecorder.ondataavailable = function (e) {
  chunks.push(e.data)
}
videoRecorder.onstop = function (e) {
  var blob = new Blob(chunks, { 'type' : videoRecorder.mimeType })
  let a = document.createElement('a')
  a.href = URL.createObjectURL(blob)
  a.download = `test.mp4`
  a.click()
  
  chunks = []
}

// 开始录制
videoRecorder.start()
// 暂停录制
videoRecorder.pause()
// 继续录制
videoRecorder.resume()
// 停止录制
videoRecorder.stop()