Merge pull request #16 from FluorescentHallucinogen/screen-capture

Add more attributes

google-youtube-upload.html

@@ -11,15 +11,15 @@
 <link rel="import" href="./upload-import.html">
 
 <!--
-Element enabling you to upload videos to YouTube.
+Element enabling you to record and upload videos to YouTube.
 
 ##### Examples
 
 Manual upload with a `Video Upload` button once a video file is selected:
 
     <google-youtube-upload client-id="..."></google-youtube-upload>
 
-Automatic upload on video file select, with a custom title, and 'unlisted' privacy:
+Automatic upload on video file select, with a custom title, and `unlisted` privacy:
 
     <google-youtube-upload
       auto
@@ -28,6 +28,39 @@
       client-id="...">
     </google-youtube-upload>
 
+Record a device screen:
+
+Screen sharing in Chrome and Firefox has some differences.
+
+To capture the screen in Firefox use `{"mediaSource": "screen"}` video constraint:
+
+    <google-youtube-upload
+      video='{"mediaSource": "screen"}'
+      client-id="...">
+    </google-youtube-upload>
+
+You can also use `{"mediaSource": "window"}` to capture only application window
+and `{"mediaSource": "application"}` to capture all application windows,
+not the whole screen.
+
+NOTE: Firefox (before version 52) requires to set `media.getusermedia.screensharing.enabled`
+to `true` and add the web app domain to `media.getusermedia.screensharing.allowed_domains`
+in `about:config`.
+
+To capture the screen in Chrome use `{"mandatory": {"chromeMediaSource": "screen"}}`
+video constraint:
+
+    <google-youtube-upload
+      audio="false"
+      video='{"mandatory": {"chromeMediaSource": "screen"}}'
+      client-id="...">
+    </google-youtube-upload>
+
+NOTE: As of today (April 23th, 2017), screen capturing in Chrome is available only on
+Android and requires enabling `chrome://flags#enable-usermedia-screen-capturing` flag.
+
+NOTE: Chrome doesn't support combining screen capture video tracks with audio tracks.
+
 @demo
 -->
 
@@ -301,10 +334,6 @@
        * is enabled for your API project, and ensure that the JavaScript Origin
        * is set to the domain hosting the page on which
        * you'll be using this element.
-       *
-       * @attribute clientId
-       * @type string
-       * @default ''
        */
       clientId: {
         type: String,
@@ -363,7 +392,7 @@
        * The [privacy setting](https://support.google.com/youtube/answer/157177?hl=en)
        * for the new video.
        *
-       * Valid values are 'public', 'private', and 'unlisted'.
+       * Valid values are `public`, `private`, and `unlisted`.
        */
       privacyStatus: {
         type: String,
@@ -393,6 +422,30 @@
         value: Boolean('MediaRecorder' in window &&
                        'mediaDevices' in navigator &&
                        'getUserMedia' in navigator.mediaDevices)
+      },
+
+      /**
+       * The [MediaStream audio constraints](https://developer.mozilla.org/docs/Web/API/MediaStreamConstraints/audio).
+       */
+      audio: {
+        type: Object,
+        value: true
+      },
+
+      /**
+       * The [MediaStream video constraints](https://developer.mozilla.org/docs/Web/API/MediaStreamConstraints/video).
+       */
+      video: {
+        type: Object,
+        value: true
+      },
+
+      /**
+       * The media type.
+       */
+      mimeType: {
+        type: String,
+        value: 'video/webm;codecs=vp9,vp8'
       }
     },
 
@@ -496,12 +549,12 @@
       }
 
       return navigator.mediaDevices.getUserMedia({
-        audio: true, video: true
+        audio: this.audio, video: this.video
       }).then(function(stream) {
         this.$$('#get-user-media').src = URL.createObjectURL(stream);
         this._recordedBlobs = [];
         this._mediaRecorder = new MediaRecorder(stream, {
-          mimeType: 'video/webm;codecs=vp9,vp8'
+          mimeType: this.mimeType
         });
 
         this._mediaRecorder.addEventListener('dataavailable', function(event) {