JSFiddle - React, Tailwind, and code Playground

by kanonji

HTML

<script src="https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg.min.js"></script>
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>1 frame video</title>
</head>
<body>
  <header>
    <h1>1 frame video</h1>
  </header>

  <a id="download">download</a>

  <section>
    <canvas id="canvas"></canvas>
  </section>

</body>
</html>

CSS

#canvas{
  background: lightgray;
  width: 100%;
  height: 100%;
}

JavaScript

const anchor = document.getElementById('download')
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
const stream = canvas.captureStream()
const recorder = new MediaRecorder(stream, {mimeType : 'video/webm;codecs=vp8'})
const chunks = []
let metaType = null

async function generateMp4(mimeType) {
    const { createFFmpeg, fetchFile } = FFmpeg
    const ffmpeg = createFFmpeg({
      /* log: true */
    })

    const name = 'record.webm'

    // Load ffmpeg
    console.log('Loading ffmpeg js')
    await ffmpeg.load()

    // Start trans coding. Actually, the transcoding performance is poor now
    // so that we only do copy(just change the container).
    console.log('Start transcoding')
    const blob = new Blob(chunks, { type: mimeType })
    
    ffmpeg.FS('writeFile', name, await fetchFile(blob))
    await ffmpeg.run('-i', name, '-c', 'copy', 'output.mp4')

    // Complete transcoding
    console.log('Complete transcoding')
    const data = ffmpeg.FS('readFile', 'output.mp4')

    // File donwload procedure
    const url = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }))
    const fileName = this.getNowYMDhmsStr() + '.mp4'
    anchor.download = fileName
  	anchor.href = url
  }

recorder.ondataavailable = function(ev) {
	chunks.push(ev.data)
  //download(ev.data.type)
  generateMp4(ev.data.type)
}
const download = function(mimeType) {
  const blob = new Blob(chunks, {type:  metaType});
  const url = URL.createObjectURL(blob);
  anchor.download = 'recorded.webm'
  anchor.href = url
}
const render = function(image, start) {
	canvas.width = image.width
  canvas.height = image.height
  ctx.drawImage(image, 0, 0, image.width, image.height)
  recorder.start()
  setTimeout(function(){
  	recorder.stop()
  }, 5000)
}
const cancelEvent = function(e) {
  e.preventDefault()
  e.stopPropagation()
  return false
}

document.addEventListener("dragover", cancelEvent, false)
document.addEventListener("dragenter",...