Add video recorder functionality

[jellea]

I wanted to export some videos from Hydra, but my screen recording tool kept crashing. I figured I could capture the canvas directly and add some convenient UI. I'm not sure if there's any interest in this, but figured I'd open this PR to make it visible. Feel free to close if not relevant :)

Todo

• Capture and download video
• Add button to UI
• Add recording time to UI
• Get rid of black bar on right of screen
• Improve video quality
• Bonus: Find a way to show the editor in recording (if possible?)

[ssssam]

I like this, I did something similar (but simpler) in my local fork : https://github.com/ssssam/hydra/tree/sam/record

[jellea]

I like this, I did something similar (but simpler) in my local fork : https://github.com/ssssam/hydra/tree/sam/record

Interesting! Curiuos: Why did you go for RecordRTC as a dependency over WebMediaRecorder? Do you have more control over the quality of the video? I don't seem to be able to get this right :(

[ssssam]

I actually didn't test WebMediaRecorder, I used RecordRTC as the first thing I found. I didn't notice any quality issues with it.

[ojack]

Hi, I really like the UI idea. A video recorder already exists in hydra-synth as something you can call directly from the code (https://github.com/ojack/hydra-synth/blob/master/src/video-recorder.js). In general I have not been happy with the quality using the native MediaRecorder, and that is why it isn't documented :)

// start video
vidRecorder.start()

// stop video and download
vidRecorder.stop()

I like the UI in this pull request, but I want to get a better understanding of the quality issues before adding this to the website. It would be great if someone wanted to investigate and do a side-by-side comparison of quality settings. Also, updates to this should go into hydra-synth rather than hydra, except for the ui-button as a way to interface with the recorder.

I would also like to add a non-realtime renderer of lossless quality (similar in concept to https://github.com/spite/ccapture.js/) ... it is something I have done locally but not in the browser.

[ojack]

Side note: at one point you could also do s0.init({ src: vidRecorder.output }), and use the video recording as an input in hydra. However, this stopped working recently because of some issues with cross-origin requests.

[verstecken]

the vidRecorder function is cool! it would be nice, if there was a high quality recording/exporting method. to show non-nerdy friends beautiful fluently animations without the code overlay and even being able to make a video montage. @ojack did you make ccapture.js work with hydra? how? maybe Or am I missing something, another way to capture?