An extension for Google Chrome that allows page scripts to coordinate a recording of what is happening in a tab and to download the resulting video file. Comes with an API script to simplify communication.
- Create a page with scripted animation.
- Let page scripts to utilize methods provided by this extension to record the animation.
- Get the resulting video file and use it as needed.
The tool was created because I needed to record a small dummy video for testing an HTML5 video player project and I couldn't find a way to do so without using ancient/buggy/bloated/ad-infested/overpriced software.
Chrome provides extensions a way to record what is happening in a tab: chrome.tabCapture.
MediaRecorder API provides a simple way to record media streams.
This extension is a bridge between your page scripts and those functionalities.
Using that bridge, scripts can start, stop, pause/resume, and trigger downloading of the recording when they need to, and you don't need to fiddle with video editing software to crop it.
- Install the extension - from the source code folder or from the Chrome Web Store.
- Include the ./api.js file to the page that will coordinate the recording.
- Use the API.
See API docs and the source code of the demo.
- Simultaneus recording of multiple tabs is not supported.
- I didn't implement any error handling - it was tedious enough to pass data between 3 isolated layers. If something is not working, look into the console output of both the host page and of the extension background page. You're welcome to add error handling and submit a PR.
- Last tested with Chrome 52. Browser APIs are evolving over time and it might not work with newer versions.
- The extension does not provide a way to consume the recorded activity in any form except for by explicitly sending the file to download to the user who started the recording.
- There is no way to start a recording without a user consent, which is given by clicking the toolbar button.
- The recording is not interrupted on page reload, and can be controlled and downloaded after visiting other pages, but only from the same domain where it was started at.
- Add a small (~100 ms., varies) delay before calling
coordinatedCapture.stop()
so that the frame with the final state could have a chance to be recorded.