Screenshots and Video Grabs

Hi,

You can download a screenshot of what’s rendered on a 3d scene via the take screenshot and download file puzzles. See here for more info: https://www.soft8soft.com/docs/manual/en/puzzles/HTML.html#download_file.

EDIT: you also need to enable screenshots in your application via the configure_application puzzle. The option you need is called ‘enabled screenshots’.

grimmy wrote:

Could I theoretically use something like GetDisplayMedia if I created all the functions in Javascript?

Actually, yes. You can grab a video stream from the canvas element and download it.

Here’s a simple snippet which you can add into the runCode function in your app’s js file:

function runCode(app) {
    var isRecording = false;
    var TEXT_START = 'Start Recording';
    var TEXT_STOP = 'Stop Recording';

    var button = document.createElement('button');
    button.innerText = TEXT_START;
    button.style.position = 'relative';
    document.body.appendChild(button);

    var recorder = new MediaRecorder(app.renderer.domElement.captureStream());
    var videoElem = document.createElement('video');

    recorder.addEventListener('dataavailable', function(e) {
        var link = document.createElement('a');
        link.href = URL.createObjectURL(e.data);
        link.download = 'video.webm';
        document.body.appendChild(link);
        link.click();
        URL.revokeObjectURL(link.href);
    });

    button.addEventListener('click', function() {
        isRecording = !isRecording;
        button.innerText = isRecording ? TEXT_STOP : TEXT_START;

        if (isRecording) {
            recorder.start();
        } else {
            recorder.stop();
        }
    });
}

It adds a button to start recording and after you stop it automatically downloads the video in the webm format. Although, this snippet may not work in some browsers if some API features that’s used there are not supported, I only tested it in the latest Google Chrome version.

function runCode(app) {
  const type = v3d.Detector.checkIOS() ? 'video/mp4' : 'video/webm;codecs=avc1';
  const stream = app.renderer.domElement.captureStream(30);
  const recorder = new MediaRecorder(stream, {mimeType: type});

  recorder.addEventListener('dataavailable', function(e) {
    const link = document.createElement('a');
    link.href = URL.createObjectURL(e.data);
    link.download = 'video.mp4';
    document.body.appendChild(link);
    link.click();
    URL.revokeObjectURL(link.href);
    link.remove();
  });

  const start = document.getElementById('recordStart');
  start.addEventListener('click', function() {
    if (recorder.state == 'inactive')
      recorder.start();
  });

  const stop = document.getElementById('recordStop');
  stop.addEventListener('click', function() {
    if (recorder.state != 'inactive')
      recorder.stop();
  });
}

  const start = parent.document.getElementById('recordStart');
  const stop = parent.document.getElementById('recordStop');

One strange thing with this MediaRecorder: once created it loads CPU as if it’s already active and recording. After start() / stop() the CPU load drops down.

bhobbes wrote:

he outputted video dimensions vary randomly

what do you mean? the video dimensions directly depend on the canvas/window size. The canvas is captured 1:1.

Something in your logic changes the pixel ratio with the factor 1.6. Try to set the pixel ratio to 1 before recording…

function runCode(app) {
  const type = v3d.Detector.checkIOS() ? 'video/mp4' : 'video/webm;codecs=avc1';
  const stream = app.renderer.domElement.captureStream();
  const recorder = new MediaRecorder(stream, {mimeType: type});

  recorder.addEventListener('dataavailable', function(e) {
    const link = document.createElement('a');
    link.href = URL.createObjectURL(e.data);
    link.download = 'video.mp4';
    document.body.appendChild(link);
    link.click();
    URL.revokeObjectURL(link.href);
    link.remove();
  });

  const start = parent.document.getElementById('recordStart');
  start.addEventListener('click', function() {
    if (recorder.state == 'inactive') {
      setScreenScale(1);
      setTimeout(function() {
        recorder.start();
      }, 100);
    }
  });

  const stop = parent.document.getElementById('recordStop');
  stop.addEventListener('click', function() {
    if (recorder.state != 'inactive')
      recorder.stop();
  });

  function setScreenScale(factor) {
    app.renderer.setPixelRatio(factor);
    if (app.postprocessing)
      app.postprocessing.composer.setPixelRatio(factor);
    app.onResize();
  }
}