Is it possible to record what happens in an iframe on video?

Question

You can turn the content of an iframe into video, or there is some language that captures a certain area of a website on video?

briefly would be that only in the form of video

• updating: https://recordscreen.io/ << would be similar to this

I am attentive to the guidelines of colleagues

Answer 1

On the front end directly NAY is possible without relying on extra technologies, ie HTML+Javascript+Canvas is not possible.

What this site recordscreen.io does is capture the screen or window that the USER allows, using getDisplayMedia, to convert the canvas to a download (in the output format that the browser supports) you can use the example of https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API

var canvas = document.getElementById('meu-canvas');

// Optional frames per second argument.
var stream = canvas.captureStream(25);
var recordedChunks = [];

var options = { mimeType: "video/webm; codecs=vp9" };
mediaRecorder = new MediaRecorder(stream, options);

mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();

function handleDataAvailable(event) {
  console.log("data-available");
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
    console.log(recordedChunks);
    download();
  } else {
    // ...
  }
}
function download() {
  var blob = new Blob(recordedChunks, {
    type: "video/webm"
  });
  var url = URL.createObjectURL(blob);
  var a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";
  a.href = url;
  a.download = "test.webm";
  a.click();
  window.URL.revokeObjectURL(url);
}

// demo: to download after 9sec
setTimeout(event => {
  console.log("stopping");
  mediaRecorder.stop();
}, 9000);

Remember that the part canvas.captureStream(25) is what also sets the FPS rate, 25 for most web things will be great.

An example of a screenshot:

function capturar()
{
    var configs = {
        video: true
    };

    if (navigator.mediaDevices.getDisplayMedia) {
        navigator.mediaDevices.getDisplayMedia(configs).then(capturando).catch(erro);
    } else if (navigator.getDisplayMedia) {
        // Navegadores antigos
        navigator.getDisplayMedia(configs).then(capturando).catch(erro);
    } else {
        erro("sem suporte")
    }

    function capturando()
    {
        console.log("capturando");
    }

    function erro(error)
    {
        console.log("erro", error);
    }
}

<button onclick="capturar()">Capturar</button>

And to put the video on the canvas (so you can download it later (using the canvas.captureStream(25)) use the API itself to draw in loop, more or less like this:

var video = document.getElementById('meu-video');
var canvas = document.getElementById('meu-canvas');
var context = canvas.getContext('2d');

capturarVideo();

function capturarVideo()
{
    if (!video.paused && !video.ended) {
        context.drawImage(video, 0, 0, canvas.width, canvas.height);
    }

    setTimeout(capturarVideo, 1);
}

Of course this is a screenshot and from a functional point of view this is the best way to transmit something in a decent way, capture specific elements is unviable, unless you use external means and maybe a program of your own with a webView embarked.

---

The difficulties we need to discuss about capturing web page elements

On the site it is difficult to put a functional example because Stacksnippet uses sandbox and so I tested some things are limited, so as soon as possible (if it is really necessary) I will see a way to put an example online.

You could even try adding the iframe element to the canvas and only use the download part of the canvas with canvas.captureStream(<fps>), still canvas has limit for catching, there is even a lib called html2canvas, that maybe someone will quote you in the future, but it does not actually capture the page or elements, it is all simulated, it is slow (it is impossible to be faster) and so there is no way to use to turn into video.