https://github.com/FormidableLabs/clips

Create short shareable screen recordings – all using web APIs
https://github.com/FormidableLabs/clips

Last synced: 9 months ago
JSON representation

Create short shareable screen recordings – all using web APIs

• Host: GitHub
• URL: https://github.com/FormidableLabs/clips
• Owner: FormidableLabs
• License: mit
• Created: 2022-08-23T14:56:05.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-10-12T15:37:01.000Z (about 2 years ago)
• Last Synced: 2024-08-02T17:37:52.247Z (over 1 year ago)
• Language: Svelte
• Homepage: https://clips.formidable.dev/
• Size: 1.54 MB
• Stars: 128
• Watchers: 25
• Forks: 11
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![Clips — Formidable, We build the modern web](https://raw.githubusercontent.com/FormidableLabs/clips/main/clips-Hero.png)](https://formidable.com/open-source/)

This repo is an active experiment. The primary goal of this app is to make it easy to create short screen recordings that are shareable to various platforms – such as LinkedIn and YouTube – all using web APIs. The app is intended to:

- be opinionated enough that a user can click a few buttons, and then have a nice-looking screen recording ready to go;

- be flexible enough that users can theme their screen recordings to their liking (to some extent);

- be sexy enough that the end result stands out from the rest of the screen recordings on the various platforms.

## Technology used

- The UI is built using [Svelte](https://svelte.dev/). Svelte rocks, and for an experimental UI like this, is a pleasure to use.

- Uses [`MediaDevice` API](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) for capturing screen, webcam, and mic.

- Uses [`AudioContext` API](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext) for audio visualizations.

- Uses HTML canvas for drawing the video and audio visualizations, and `CanvasRenderingContext2D`'s `captureStream` for capturing the canvas as a media stream.

- Uses [`MediaRecorder` API](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder) for recording the media stream as a WebM.

End result is an interface that looks something like this:

![Sample screenshot](./docs/sample.jpg)

(Still in progress, working on improving the UI and screen recording styling/layouts/presets.)