Fix webcam in Safari on Mac and iOS, add facingMode: user

using stream directly on srcObject video attribute, instead of createObjectURL
transloadit · Feb 7, 2018 · 8c087d1 · 8c087d1
1 parent 992a9ac
commit 8c087d1
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/src/plugins/Webcam/CameraScreen.js b/src/plugins/Webcam/CameraScreen.js
@@ -27,7 +27,7 @@ class CameraScreen extends Component {
     return (
       <div class="uppy uppy-Webcam-container">
         <div class="uppy-Webcam-videoContainer">
-          <video class={`uppy-Webcam-video  ${this.props.mirror ? 'uppy-Webcam-video--mirrored' : ''}`} autoplay muted src={this.props.src || ''} />
+          <video class={`uppy-Webcam-video  ${this.props.mirror ? 'uppy-Webcam-video--mirrored' : ''}`} autoplay muted playsinline srcObject={this.props.src || ''} />
         </div>
         <div class="uppy-Webcam-buttonContainer" ref={(el) => { this.btnContainer = el }}>
           {shouldShowSnapshotButton ? SnapshotButton(this.props) : null}

diff --git a/src/plugins/Webcam/index.js b/src/plugins/Webcam/index.js
@@ -57,6 +57,7 @@ module.exports = class Webcam extends Plugin {
       countdown: false,
       locale: defaultLocale,
       mirror: true,
+      facingMode: 'user',
       modes: [
         'video-audio',
         'video-only',
@@ -109,7 +110,7 @@ module.exports = class Webcam extends Plugin {
 
     return {
       audio: acceptsAudio,
-      video: acceptsVideo
+      video: acceptsVideo ? { facingMode: this.opts.facingMode } : false
     }
   }
 
@@ -126,8 +127,7 @@ module.exports = class Webcam extends Plugin {
     return this.mediaDevices.getUserMedia(constraints)
       .then((stream) => {
         this.stream = stream
-        console.log(stream)
-        this.streamSrc = URL.createObjectURL(this.stream)
+        // this.streamSrc = URL.createObjectURL(this.stream)
         this.setPluginState({
           cameraReady: true
         })
@@ -192,7 +192,6 @@ module.exports = class Webcam extends Plugin {
     })
     this.webcamActive = false
     this.stream = null
-    this.streamSrc = null
   }
 
   getVideoElement () {
@@ -327,7 +326,7 @@ module.exports = class Webcam extends Plugin {
       supportsRecording: supportsMediaRecorder(),
       recording: webcamState.isRecording,
       mirror: this.opts.mirror,
-      src: this.streamSrc
+      src: this.stream
     }))
   }