Merge pull request #3829 from sebavan/master

Fixed WebCam Texture on Firefox and Edge: #3825

dist/preview release/what's new.md

@@ -97,6 +97,7 @@
 - AMD "define" declaration is no longer anonymous ([RaananW](https://github.com/RaananW))
 - Collision worker didn't initialize instanced meshes correctly - [#3819](https://github.com/BabylonJS/Babylon.js/issues/3819) ([RaananW](https://github.com/RaananW))
 - postMessage calls in webworkers were fixed ([RaananW](https://github.com/RaananW))
+- fixed WebCam Texture on Firefox and Edge - [#3825](https://github.com/BabylonJS/Babylon.js/issues/3825) ([sebavan](https://github.com/sebavan))
 
 ## Breaking changes
 

src/Materials/Textures/babylon.videoTexture.ts

@@ -232,46 +232,73 @@
                 };
             }
 
-            navigator.getUserMedia =
-                navigator.getUserMedia ||
-                navigator.webkitGetUserMedia ||
-                navigator.mozGetUserMedia ||
-                navigator.msGetUserMedia;
             window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
 
-            if (navigator.getUserMedia) {
-                navigator.getUserMedia(
-                    {
-                        video: {
-                            deviceId: constraintsDeviceId,
-                            width: {
-                                min: (constraints && constraints.minWidth) || 256,
-                                max: (constraints && constraints.maxWidth) || 640,
-                            },
-                            height: {
-                                min: (constraints && constraints.minHeight) || 256,
-                                max: (constraints && constraints.maxHeight) || 480,
-                            },
-                        },
-                    },
-                    (stream: any) => {
+            if (navigator.mediaDevices) {
+                navigator.mediaDevices.getUserMedia({ video: constraints })
+                    .then(function(stream) {
                         if (video.mozSrcObject !== undefined) {
                             // hack for Firefox < 19
                             video.mozSrcObject = stream;
                         } else {
-                            video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
+                            video.srcObject = stream;
                         }
 
+                        let onPlaying = () => {
+                            if (onReady) {
+                                onReady(new VideoTexture("video", video, scene, true, true));
+                            }
+                            video.removeEventListener("playing", onPlaying);
+                        };
+
+                        video.addEventListener("playing", onPlaying);
                         video.play();
+                    })
+                    .catch(function(err) {
+                        Tools.Error(err.name);
+                    });
+            }
+            else {
+                navigator.getUserMedia =
+                    navigator.getUserMedia ||
+                    navigator.webkitGetUserMedia ||
+                    navigator.mozGetUserMedia ||
+                    navigator.msGetUserMedia;
 
-                        if (onReady) {
-                            onReady(new VideoTexture("video", video, scene, true, true));
+                if (navigator.getUserMedia) {
+                    navigator.getUserMedia(
+                        {
+                            video: {
+                                deviceId: constraintsDeviceId,
+                                width: {
+                                    min: (constraints && constraints.minWidth) || 256,
+                                    max: (constraints && constraints.maxWidth) || 640,
+                                },
+                                height: {
+                                    min: (constraints && constraints.minHeight) || 256,
+                                    max: (constraints && constraints.maxHeight) || 480,
+                                },
+                            },
+                        },
+                        (stream: any) => {
+                            if (video.mozSrcObject !== undefined) {
+                                // hack for Firefox < 19
+                                video.mozSrcObject = stream;
+                            } else {
+                                video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
+                            }
+
+                            video.play();
+
+                            if (onReady) {
+                                onReady(new VideoTexture("video", video, scene, true, true));
+                            }
+                        },
+                        function(e: MediaStreamError) {
+                            Tools.Error(e.name);
                         }
-                    },
-                    function(e: MediaStreamError) {
-                        Tools.Error(e.name);
-                    }
-                );
+                    );
+                }
             }
         }
     }