Allow definition of MediaRecorder mimeType (#1708)

* Allow definition of MediaRecorder mimeType

This PR introduces a new option for the `@uppy/webcam` plugin called `preferredMimeType` which defaults as `null`.

If a value is passed, the browser's `MediaRecorder` implementation checks if the `preferredMimeType` is supported, and if it thinks it is, will attempt to record using the `preferredMimeType` rather than the browser default.

If the `preferredMimeType` is unsupported, the browser will fall back to using its default recording mime type.

This allows, for example, a user to pass `preferredMimeType: "video/webm"` during the `@uppy/webcam` plugin construction which will instruct the browser to record to a `.webm` container.

Specific codecs may also be passed here. For example, `video/webm;codecs=vp8` may still parse as valid by the browser.

## Limitations
This does not currently change the mime type for captured images on line 282 (`image/jpeg`) and will only pass the `preferredMimeType` to the browser `MediaRecorder` API.

### Reference
https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder
https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/isTypeSupported
https://cs.chromium.org/chromium/src/third_party/blink/web_tests/fast/mediarecorder/MediaRecorder-isTypeSupported.html?q=MediaRecorder-isTypeSupported&dr
https://www.webmproject.org/about/faq/

* Constantize preferredMimeType

* Lint fix

* Change option name to preferredVideoMimeType

* One more preferredVideoMimeType

* Update comment

* docs: add preferredVideoMimeType

packages/@uppy/webcam/src/index.js

@@ -69,7 +69,8 @@ module.exports = class Webcam extends Plugin {
         'picture'
       ],
       mirror: true,
-      facingMode: 'user'
+      facingMode: 'user',
+      preferredVideoMimeType: null
     }
 
     // merge default options with the ones set by user
@@ -144,11 +145,16 @@ module.exports = class Webcam extends Plugin {
   }
 
   startRecording () {
-    // TODO We can check here if any of the mime types listed in the
-    // mimeToExtensions map in Utils.js are supported, and prefer to use one of
-    // those.
-    // Right now we let the browser pick a type that it deems appropriate.
-    this.recorder = new MediaRecorder(this.stream)
+    let options = {}
+    const preferredVideoMimeType = this.opts.preferredVideoMimeType
+
+    // Attempt to use the passed preferredVideoMimeType (if any) during recording.
+    // If the browser doesn't support it, we'll fall back to the browser default instead
+    if (preferredVideoMimeType && MediaRecorder.isTypeSupported(preferredVideoMimeType) && getFileTypeExtension(preferredVideoMimeType)) {
+      options.mimeType = preferredVideoMimeType
+    }
+
+    this.recorder = new MediaRecorder(this.stream, options)
     this.recordingChunks = []
     this.recorder.addEventListener('dataavailable', (event) => {
       this.recordingChunks.push(event.data)

website/src/docs/webcam.md

@@ -113,6 +113,9 @@ Devices sometimes have multiple cameras, front and back, for example. There is a
 - `left`: The video source is facing toward the user but to their left, such as a camera aimed toward the user but over their left shoulder.
 - `right`: The video source is facing toward the user but to their right, such as a camera aimed toward the user but over their right shoulder.
 
+### `preferredVideoMimeType: null`
+
+Set the preferred mime type for video recordings, for example `'video/webm'`. If the browser supports the given mime type, the video will be recorded in this format. If the browser does not support it, it will use the browser default.
 
 ### `locale: {}`