Support for video capture via the MediaRecorder API

[jeffposnick]

R: @ebidel @addyosmani

This is code for a 2.0.0 release of <google-youtube-upload>. Like the previous version, you can upload a local video file, but this version will use the new MediaRecorder API in supported browsers (Chrome and Firefox at the moment) to allow for uploads captured from your local camera stream.

There's a live version of the demo at https://jeffy.info/google-youtube-upload/components/google-youtube-upload/demo/

[ebidel]

Sweet demo! Reviewed.

Trying to record a video slows down the FPS to a crawl in Chrome stable. Have you see that? The captured video is janky.

Another UX thing is when I click the upload video icon, there's no way to cancel out of it (e.g. switch back to picking the record video).

[jeffposnick]

I have seen the Chrome Stable slowdown on OS X, yup. It's there is no slowdown in Canary M51, so I assumed it was a case where there was a less-than-optimal MediaRecorder API implemented in M49, which subsequently got more efficient. CC: @samdutton in case he knows.

The UX is what happens when I end up designing interfaces :-/ You can get back to the login/logout screen by tapping on your profile icon. Happy to implement via some other means if you have a suggestion.

[ebidel]

Chrome 51 is much better!

Didn't even try the profile icon. A material design back arrow might be nice, but no big deal if you don't want to add it.

LGTM

[jeffposnick]

When YouTube rolled out multi-account support and G+ Pages tied to channels, we encouraged developers to be super-explicit about which YouTube channel you were uploading into. (Kind of like making sure which Tweetdeck account you're acting as when you're composing a tweet.) So I wanted to keep the profile picture visible, and that plus the back arrow seems like a lot.

But at the same time, I'm not one for UI design, so if there's a way to fit them all in without overwhelming things, I can switch it up. Maybe in a future revision.

[samdutton]

• Miguel On 24 Mar 2016 8:04 p.m., "Jeffrey Posnick" notifications@github.com wrote:

When YouTube rolled out multi-account support and G+ Pages tied to channels, we encouraged developers to be super-explicit about which YouTube channel you were uploading into. (Kind of like making sure which Tweetdeck account you're acting as when you're composing a tweet.) So I wanted to keep the profile picture visible, and that plus the back arrow seems like a lot.

But at the same time, I'm not one for UI design, so if there's a way to fit them all in without overwhelming things, I can switch it up. Maybe in a future revision.

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/GoogleWebComponents/google-youtube-upload/pull/10#issuecomment-200997811

[yellowdoge]

@jeffposnick smartly composing a MediaStream can be done by drawing the necessary bits and pieces on a <canvas>, then extracting a MediaStream out of it with <canvas>.captureStream(); this MediaStream can be recorded (like in this LayoutTest).

Canvas captureStream is working in Firefox and behind a flag in Chrome (ITS behind finalized). @uysalere knows more about the particularities that might arise, and, just to be complete, here's the link (again) with the canvas capture demos.

[jeffposnick]

@miguelao, could you explain what the benefit would be of using the <canvas> approach vs. what the code is doing now? Is it a question of memory efficiency? Something else?

(Sorry, I'm new to most of the Media APIs!)

[jeffposnick]

I followed up with @miguelao off-thread, and while some of the composition options (like WebGL filters!) might be cool for a future release, the current basic implementation should work. I'm going to merge and tag a new release.