Skip to content

Poor Man's Screenflow that records your screen and camera and outputs a video

Notifications You must be signed in to change notification settings

JMPerez/screenflow

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Poor Man's ScreenFlow

This project uses the MediaRecorder API to record your screen, as well as your camera in a corner or in full page.

Recording of me trying this out

You can also see the generated .webm video.

How to make it work

As of December 2016 this demo is only supported on Firefox. Chrome is not supported out of the box, needing an extension and lots of custom code (see this WebRTC experiment for more information. It will show your camera, but won't record anything.

These are the steps to make the demo work:

  1. Open Firefox's about:config and add jmperezperez.com to the media.getusermedia.screensharing.allowed_domains list
  2. Run this demo
  3. Accept to share your camera
  4. Finally, accept to share your screen. From this moment your screen is being recorded. Pressing escape finishes the recording and creates a .webm file.

Using it

On your page, include this script https://jmperezperez.com/screenflow/lib/embed.js. It will be used to display an iframe with your camera and bind the keyboard events.

These are the keyboard bindings supported by this library. The focused element must be the hosting page for it to work, so if you click the camera image, press again on the host page.

  • Escape: finishes the recording and saves the file
  • s: Switches the camera between full page and picture-in-picture
  • a: Toggles the visibility of the camera

References

This project is based on Soledad Penadés' Real time front-end alchemy talk.

About

Poor Man's Screenflow that records your screen and camera and outputs a video

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published