Add text into video

[khali1]

@gre When rendering video, it would be nice if you could add text in the playing video, do you know if there is a way how to achieve this? Do you plan to implement this functionality?

[gre]

It's not built-in in diaporama right now,

but you could use another DOM element on top of the Diaporama and listen to diaporama "render" event to put the text you want based on the current time.

function createTextDiv (){} // TODO : create a div (or a span), position it on top of diaporama, give it the styles you want - or maybe it can already be in your HTML and you just have to getElementById it
function getTextForTime(time) { return "HELLO WORLD"; } // TODO

var absoluteDiv = createTextDiv(), currentText = "";

function syncTextForTime (time) {
  var text = getTextForTime(time);
  if (currentText !== text) { // optim to not set `textContent` if nothing changes
    currentText = text;
    absoluteDiv.textContent = text;
    // BTW here i'm showing the basic way to do with DOM, but e.g; in react context, it can be simpler
  }
}

diaporama.on("render", function (time) {
  syncTextForTime(time);
});

[gre]

As for implementing in diaporama, i'm not yet sure, I'm trying to keep diaporama minimal, and this one is tricky.

In diaporama paradigm, everything is rendered into a canvas (that allows experiments like https://github.com/glslio/diaporama-recorder that snapshot all frames and convert a diaporama to a video )

To be rendered into WebGL, I need to use a Canvas2D (the only way to get text in) inject it as a texture (like already done for "content" slides) and blend it with the video. It's not impossible but requires a bit more work.

[gre]

still, let's keep this issue opened because I'm not closing this door. I think this feature is interesting.

[mcorb]

Providing timeline hooks to support a workflow that overlays existing HTML presentation frameworks like RevealJS (https://github.com/hakimel/reveal.js) would be great.

(We have an in-house tool that renders text via Canvas2D and it's been very disappointing. Wish we'd focused on supporting HTML/CSS from the beginning. There must be a way to render document elements to canvas for the purpose of capturing?)

[gre]

what do you mean by timeline hooks? There are these events https://gre.gitbooks.io/diaporama/content/docs/events.html

[paramaggarwal]

I believe Diaporama now uses WebGL, and hence the original request is more likely possible now.