javascript - Is it possible/How to stream a canvas animation from an API

Question

I have a webpage that loops a simple canvas animation.

The page automatically runs a script such as:

var recordedChunks = [];
const canvas = document.getElementsByTagName('canvas')[0];
var stream = canvas.captureStream(60);
const mediaRecorder = new MediaRecorder(stream, {
    mimeType: "video/webm; codecs=vp9"
});
mediaRecorder.start(time || 10);
setTimeout(() => {
    mediaRecorder.stop();
}, 5000);
mediaRecorder.ondataavailable = function (e) {
    recordedChunks.push(e.data);
}
mediaRecorder.onstop = () => {
    var blob = new Blob(recordedChunks, {
        type: "video/mp4"
    });
    fileSaver(blob);
}

and then a puppeteer script that allows for the canvas animation to be recorded off a headless browser and downloaded:

const browser = await puppeteer.launch({ headless: false, args: ['--autoplay-policy=no-user-gesture-required'] });
const page = await browser.newPage();
await page.goto('http://localhost:9001/');
await page._client.send('Page.setDownloadBehavior', {behavior: 'allow', downloadPath: 'C:\Projects\vueWebpackPlayground\frames'})

That works fine but I am trying to stream the animation from the api, not download the animation as a file. I have seen streaming files with fs link from an api:

const fs = require('fs');
const server = require('http').createServer();

server.on('request', (req, res) => {
  const src = fs.createReadStream('./big.file');
  src.pipe(res);
});

server.listen(8000);

but the object returned by canvas.captureStream does not have any way to pipe to the res obj. I also looked throughout the MediaRecorder object and did not find anything similar. At this point im curious if its even possible and if so, how could I go about doing so?

question from:https://stackoverflow.com/questions/65894092/is-it-possible-how-to-stream-a-canvas-animation-from-an-api

Answer 1

Waitting for answers