0

I am making an HTML/JS document, and I'll need a way to take a picture of the screen every frame and store it in an array, so that it's basically like a screen recording. But I'm having trouble knowing how to do this. What I was thinking was something like this:

var pictures = [];
setInterval(function() {
    pictures.push(/**something here**/);
}, 1);

But I don't know what to put inside the setInterval function in order for it to capture the screen and store it in the pictures array. I've seen something to do with html2canvas, but I don't know how to use that.

Potato
  • 190
  • 1
  • 2
  • 10
  • https://code-boxx.com/take-screenshots-javascript/ this is quite complicated. Basicaly your grab the dom and render it in a canvas. – SoJS Feb 26 '21 at 17:24
  • Please be careful with your interval. `1` means every 1 millisecond (though the limit is 10, IIRC). [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) might be a better option as it will try to execute 60 times per second (60FPS). – Emiel Zuurbier Feb 26 '21 at 17:27
  • @So Js: Could you try and dumb it down for me (make it a bit simpler)? I'm not sure I get it. – Potato Feb 26 '21 at 17:27
  • @Emiel Zuurbier: Okay. I'll check that out, thanks :D – Potato Feb 26 '21 at 17:28
  • @Potato, there is a module that simplifies it. (See answer) – SoJS Feb 26 '21 at 17:47
  • @Potato why are you trying to do this? Because depending on your usecase, there might be better alternatives. Browser extensions, screen recording applications or (my personal favourite) writing a state based application with a state container like [redux](https://redux.js.org/) and collecting the state changes rather than the images. This allows for [time-travelling through your state](https://redux.js.org/recipes/implementing-undo-history). – Stanislas Feb 26 '21 at 20:56
  • @Stanislas I want a way to have this sharable way of installing a piece of code into the script so that the webpage will be recorded, and if you press a certain button, it'll give you the code, and you can share the code with other people and they'll be able to see what video you have. Just for a test. – Potato Feb 26 '21 at 23:46
  • @Potato is it like recording a bunch of CLI commands? Like `npm install ...`, `npm run build ..` or more like recording the running of an installer? – Stanislas Feb 26 '21 at 23:51

1 Answers1

1

<p class="codepen" data-height="558" data-theme-id="dark" data-default-tab="js,result" data-user="sojs_coder" data-slug-hash="BaQYxRX" data-preview="true" style="height: 558px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Screenshot JS">
  <span>See the Pen <a href="https://codepen.io/sojs_coder/pen/BaQYxRX">
  Screenshot JS</a> by So JS (<a href="https://codepen.io/sojs_coder">@sojs_coder</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

I made a codepen demonstrating a JS screenshot library. The Stackoverflow snipped was not working. It works fine on codepen. Uncomment the pics.push(url) line to save the photo. All it does right now it update the image on a rate of ~60FPS. This is technically not a recording, as nothing is recorded, but it is a pretty good illusion.

SoJS
  • 123
  • 1
  • 9
  • Oh, thanks! Is there any way you could somehow turn the arrow syntax into normal? I don't really understand arrow syntax. – Potato Feb 26 '21 at 23:55
  • ()=>{} is the equivalent of function(){}. And sure. – SoJS Feb 27 '21 at 00:45
  • Okay. So, I'm using Khan Academy for this programming, and I'm not sure what went wrong, but it doesn't seem to work. I've tried it on a notepad HTML document, but it doesn't seem to load in. The image is just that symbol that it shows if it couldn't display the image. – Potato Feb 27 '21 at 16:12
  • Okay @Potato, 1: make sure the code is correct. #2, try using [repl.it](https://repl.it), as I know khan academy has a lot of pre-made functions. Just create a new HTML, CSS, and JS repl, and then just copy and past the HTML CSS and JS from the pen. – SoJS Mar 01 '21 at 18:41
  • Yeah. It works on repl.it, and all the sites I've tried, just not Khan Academy. Did they block something? – Potato Mar 01 '21 at 22:58
  • Not sure - they might have blocked the `requestAnimationFrame()` function as it goes quite quickly, and they don't want things to crash, or taking screenshots for security reasons. Not sure. Glad to hear its working though! :) Also please mark my answer as correct if it is working, so other people know it works. – SoJS Mar 01 '21 at 23:04