回到2020

Question

我想将HTML5画布中的动画转换为可上传到YouTube的视频文件。是否有任何类型的屏幕捕获API或某些东西可以让我以编程方式执行此操作？

Answer 1

回到2020

使用MediaRecorder API解决了该问题。它正是为了做到这一点而构建的。

这里是录制X毫秒的画布视频的解决方案您可以使用Buttons UI对其进行扩展，以开始，暂停，继续，停止，生成URL。

function record(canvas, time) {
    var recordedChunks = [];
    return new Promise(function (res, rej) {
        var stream = canvas.captureStream(25 /*fps*/);
        mediaRecorder = new MediaRecorder(stream, {
            mimeType: "video/webm; codecs=vp9"
        });

        //ondataavailable will fire in interval of `time || 4000 ms`
        mediaRecorder.start(time || 4000);

        mediaRecorder.ondataavailable = function (e) {
            recordedChunks.push(event.data);
            if (mediaRecorder.state === 'recording') {
                // after stop data avilable event run one more time
                mediaRecorder.stop();
            }

        }

        mediaRecorder.onstop = function (event) {
            var blob = new Blob(recordedChunks, {
                type: "video/webm"
            });
            var url = URL.createObjectURL(blob);
            res(url);
        }
    })
}

Answer 2

Firefox有一个实验性功能（默认情况下禁用），称为HTMLCanvasElement.captureStream（）

基本上它将canvas元素捕获为视频流，然后可以使用RTCPeerConnection（）将其发送到另一台计算机，或者您可以使用YouTube直播流API直接流式传输。

请参阅：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream

另外：https://developers.google.com/youtube/v3/live/getting-started

Answer 3

有一个whammy图书馆声称使用JavaScript从剧照制作webm视频：
http://antimatter15.com/wp/2012/08/whammy-a-real-time-javascript-webm-encoder/

请注意，存在限制（如预期的那样）。这个编码器基于webp图像格式，目前只支持Chrome（也许是新的Opera，但我没有检查过）。这意味着您无法在其他浏览器中进行编码，除非您找到一种方法来对要用作webp图像的图像进行编码（请参阅this link以获取可能的解决方案）。

除此之外，无法使用本机浏览器API使用JavaScript和画布从图像创建视频文件。

Answer 4

这应该有帮助，它允许您删除一些转换为HTML5 CANVAS然后转换为webm视频的图像：http://techslides.com/demos/image-video/create.html

Answer 5

在命令行上

FileSaver.js + ffmpeg

借助FilSaver.js，我们可以将每个画布框架下载为PNG：how to save canvas as png image?

然后，我们只需从命令行How to create a video from images with FFmpeg?

使用ffmpeg将PNG转换为任何视频格式。

Chromium 75询问您是否要允许它保存多个图像。然后，一旦您说“是”，它就会自动将图像分别下载到0.png，1.png等下载文件夹下。

它在Firefox 68中也可以使用，但是效果不佳，因为浏览器打开了一堆“您是否要保存此文件”窗口。他们确实有一个“对类似下载执行相同操作”的弹出窗口，但是您必须快速选择它并按Enter，否则就会出现一个新的弹出窗口！

要停止它，必须关闭选项卡，或添加停止按钮和一些JavaScript逻辑。

var canvas = document.getElementById("my-canvas");
var ctx = canvas.getContext("2d");
var pixel_size = 1;
var t = 0;

/* We need this to fix t because toBlob calls are asynchronous. */
function createBlobFunc(t) {
  return function(blob) {
    saveAs(blob, t.toString() + '.png');
  };
}

function draw() {
    console.log("draw");
    for (x = 0; x < canvas.width; x += pixel_size) {
        for (y = 0; y < canvas.height; y += pixel_size) {
            var b = ((1.0 + Math.sin(t * Math.PI / 16)) / 2.0);
            ctx.fillStyle =
                "rgba(" +
                (x / canvas.width) * 255 + "," +
                (y / canvas.height) * 255 + "," +
                b * 255 +
                ",255)"
            ;
            ctx.fillRect(x, y, pixel_size, pixel_size);
        }
    }
    canvas.toBlob(createBlobFunc(t));
    t++;
    window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);

<canvas id="my-canvas" width="512" height="512" style="border:1px solid black;"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>

GitHub upstream。

以下是使用此图像到GIF输出的图像：https://askubuntu.com/questions/648244/how-do-i-create-an-animated-gif-from-still-images-preferably-with-the-command-l

也许有一天有人会回答：Running ffmpeg in browser - options?，然后我们就可以直接下载视频了！

在Ubuntu 19.04中测试。

如果您确定浏览器不适合您，则为OpenGL版本：-) How to use GLUT/OpenGL to render to a file?

Answer 6

纯 javascript，没有其他第三包。

如果您有视频并想拍摄一些帧，您可以尝试如下

class Video2Canvas {
  /**
   * @description Create a canvas and save the frame of the video that you are giving.
   * @param {HTMLVideoElement} video
   * @param {Number} fps
   * @see https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_manipulation#video_manipulation
   * */
  constructor(video, fps) {
    this.video = video
    this.fps = fps
    this.canvas = document.createElement("canvas");
    [this.canvas.width, this.canvas.height] = [video.width, video.height]
    document.querySelector("body").append(this.canvas)
    this.ctx =  this.canvas.getContext('2d')
    this.initEventListener()
  }

  initEventListener() {
    this.video.addEventListener("play", ()=>{
      const timeout = Math.round(1000/this.fps)
      const width = this.video.width
      const height = this.video.height
      const recordFunc = ()=> {
        if (this.video.paused || this.video.ended) {
          return
        }
        this.ctx.drawImage(this.video, 0, 0, width, height)
        const frame = this.ctx.getImageData(0, 0, width, height)
        // ... // you can make some modifications to change the frame. For example, create the grayscale frame: https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_manipulation#video_manipulation

        // ? Below is the options. That saves each frame as a link. If you wish, then you can click the link to download the picture.
        const range = document.createRange()
        const frag = range.createContextualFragment('<div><a></a></div>')
        const tmpCanvas = document.createElement('canvas')
        tmpCanvas.width = this.canvas.width
        tmpCanvas.height = this.canvas.height
        tmpCanvas.getContext('2d').putImageData(frame, 0, 0)
        const a = frag.querySelector('a')
        a.innerText = "my.png"
        a.download = "my.png"
        const quality = 1.0
        a.href = tmpCanvas.toDataURL("image/png", quality)
        a.append(tmpCanvas)
        document.querySelector('body').append(frag)
        setTimeout(recordFunc, timeout)
      }
      setTimeout(recordFunc, timeout)
    })
  }
}
const v2c = new Video2Canvas(document.querySelector("video"), 1)

<video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous">
  <source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm">
</video>

如果您想编辑视频（例如，拍摄 5~8_sec+12~15_sec 然后创建一个新视频）您可以尝试

class CanvasRecord {
  /**
   * @param {HTMLCanvasElement} canvas
   * @param {Number} fps
   * @param {string} mediaType: video/webm, video/mp4(not support yet) ...
   * */
  constructor(canvas, fps, mediaType) {
    this.canvas = canvas
    const stream = canvas.captureStream(25) // fps // https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream
    this.mediaRecorder = new MediaRecorder(stream, { // https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder
      mimeType: mediaType
    })
    this.initControlBtn()

    this.chunks = []
    this.mediaRecorder.ondataavailable = (event) => {
      this.chunks.push(event.data)
    }
    this.mediaRecorder.onstop = (event) => {
      const blob = new Blob(this.chunks, {
        type: mediaType
      })
      const url = URL.createObjectURL(blob)

      // ? Below is a test code for you to know you are successful. Also, you can download it if you wish.
      const video = document.createElement('video')
      video.src = url
      video.onend = (e) => {
        URL.revokeObjectURL(this.src);
      }
      document.querySelector("body").append(video)
      video.controls = true
    }
  }

  initControlBtn() {
    const range = document.createRange()
    const frag = range.createContextualFragment(`<div>
    <button id="btn-start">Start</button>
    <button id="btn-pause">Pause</button>
    <button id="btn-resume">Resume</button>
    <button id="btn-end">End</button>
    </div>
    `)
    const btnStart = frag.querySelector(`button[id="btn-start"]`)
    const btnPause = frag.querySelector(`button[id="btn-pause"]`)
    const btnResume  = frag.querySelector(`button[id="btn-resume"]`)
    const btnEnd   = frag.querySelector(`button[id="btn-end"]`)
    document.querySelector('body').append(frag)
    btnStart.onclick = (event) => {
      this.chunks = [] // clear
      this.mediaRecorder.start() // https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/start
      console.log(this.mediaRecorder.state) // https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/state

    }

    btnPause.onclick = (event) => { // https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/pause
      this.mediaRecorder.pause()
      console.log(this.mediaRecorder.state)
    }

    btnResume.onclick = (event) => {
      this.mediaRecorder.resume()
      console.log(this.mediaRecorder.state)
    }

    btnEnd.onclick = (event) => {
      this.mediaRecorder.requestData() // trigger ``ondataavailable``  // https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/requestData
      this.mediaRecorder.stop()
      console.log(this.mediaRecorder.state)
    }
  }
}


class Video2Canvas {
  /**
   * @description Create a canvas and save the frame of the video that you are giving.
   * @param {HTMLVideoElement} video
   * @param {Number} fps
   * @see https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_manipulation#video_manipulation
   * */
  constructor(video, fps) {
    this.video = video
    this.fps = fps
    this.canvas = document.createElement("canvas");
    [this.canvas.width, this.canvas.height] = [video.width, video.height]
    document.querySelector("body").append(this.canvas)
    this.ctx =  this.canvas.getContext('2d')
    this.initEventListener()
  }

  initEventListener() {
    this.video.addEventListener("play", ()=>{
      const timeout = Math.round(1000/this.fps)
      const width = this.video.width
      const height = this.video.height
      const recordFunc = ()=> {
        if (this.video.paused || this.video.ended) {
          return
        }
        this.ctx.drawImage(this.video, 0, 0, width, height)
        /*
        const frame = this.ctx.getImageData(0, 0, width, height)
        // ... // you can make some modifications to change the frame. For example, create the grayscale frame: https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_manipulation#video_manipulation

        // ? Below is the options. That saves each frame as a link. If you wish, then you can click the link to download the picture.
        const range = document.createRange()
        const frag = range.createContextualFragment('<div><a></a></div>')
        const tmpCanvas = document.createElement('canvas')
        tmpCanvas.width = this.canvas.width
        tmpCanvas.height = this.canvas.height
        tmpCanvas.getContext('2d').putImageData(frame, 0, 0)
        const a = frag.querySelector('a')
        a.innerText = "my.png"
        a.download = "my.png"
        const quality = 1.0
        a.href = tmpCanvas.toDataURL("image/png", quality)
        a.append(tmpCanvas)
        document.querySelector('body').append(frag)
        */
        setTimeout(recordFunc, timeout)
      }
      setTimeout(recordFunc, timeout)
    })
  }
}

(()=>{
  const v2c = new Video2Canvas(document.querySelector("video"), 60)
  const canvasRecord = new CanvasRecord(v2c.canvas, 25, 'video/webm')

  v2c.video.addEventListener("play", (event)=>{
    if (canvasRecord.mediaRecorder.state === "inactive") {
      return
    }
    document.getElementById("btn-resume").click()
  })

  v2c.video.addEventListener("pause", (event)=>{
    if (canvasRecord.mediaRecorder.state === "inactive") {
      return
    }
    document.getElementById("btn-pause").click()
  })
})()

<video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous">
  <source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm">
</video>

将HTML5 Canvas序列转换为视频文件

6 个答案:

回到2020