3 ms·
> Vippet is a video recording and editing tool for the browser. Wait, is this thing entirely client-side, in only 17.5 KiB? I know browsers can capture video f
by vanderZwan 6y ago
> Vippet is a video recording and editing tool for the browser.
Wait, is this thing entirely client-side, in only 17.5 KiB? I know browsers can capture video frames, but how does it export it afterwards?
[0] https://vippet.netlify.app/ https://vippet.netlify.app/
- longnguyen 6y agoYou can use MediaStream Recording API[0] for that [0] https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API https://developer.mozilla.org/en-US/docs/Web/API/MediaStream...
- pimterry 6y agoI think this is the source: https://github.com/mattorchard/vippet/ https://github.com/mattorchard/vippet/. Export code is here: https://github.com/mattorchard/vippet/blob/master/src/helpers/exportHelpers.ts https://github.com/mattorchard/vippet/blob/master/src/helper.... Seems like MediaRecorder (https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder https://developer.mozilla.org/en-US/docs/Web/API/MediaRecord...) is the standard API to record the screen, it takes a video format during setup, and then `recorder.requestData()` will give you the raw bytes for your format of choice when you're done, ready to download and save or do whatever with. Web standards do a lot of heavy lifting for you nowadays!
- ricardobeat 6y agoThat is the beauty of Svelte. Check out the Timeline component you see at the bottom: https://github.com/mattorchard/vippet/blob/master/src/components/Timeline.svelte https://github.com/mattorchard/vippet/blob/master/src/compon... The entire app bundle [1] is roughly the size of a library adapter like react-redux [2], which is just glue code. [1] https://vippet.netlify.app/build/bundle.js https://vippet.netlify.app/build/bundle.js [2] https://unpkg.com/react-redux@7.2.2/dist/react-redux.min.js https://unpkg.com/react-redux@7.2.2/dist/react-redux.min.js
- vanderZwan 6y agoI don't think your point really applies to my question, which was more about what exactly was doing the heavy lifting of the video exporting. As a point of reference, just this week I saw someone on Observable experiment with WASM-compiled encoder packages for that exact reason[0][1]. Svelte seems really nice and lean though, I do agree with that [0] https://www.npmjs.com/package/h264-mp4-encoder https://www.npmjs.com/package/h264-mp4-encoder [1] https://observablehq.com/@rreusser/h264-mp4-encoder https://observablehq.com/@rreusser/h264-mp4-encoder