Merge pull request #5862 from sebavan/master

Nightly

Playground/babylon.d.txt

@@ -25550,10 +25550,32 @@ declare module BABYLON {
          */
         dispose(): void;
         /**
+         * Creates a video texture straight from a stream.
+         * @param scene Define the scene the texture should be created in
+         * @param stream Define the stream the texture should be created from
+         * @returns The created video texture as a promise
+         */
+        static CreateFromStreamAsync(scene: Scene, stream: MediaStream): Promise<VideoTexture>;
+        /**
+         * Creates a video texture straight from your WebCam video feed.
+         * @param scene Define the scene the texture should be created in
+         * @param constraints Define the constraints to use to create the web cam feed from WebRTC
+         * @param audioConstaints Define the audio constraints to use to create the web cam feed from WebRTC
+         * @returns The created video texture as a promise
+         */
+        static CreateFromWebCamAsync(scene: Scene, constraints: {
+            minWidth: number;
+            maxWidth: number;
+            minHeight: number;
+            maxHeight: number;
+            deviceId: string;
+        } & MediaTrackConstraints, audioConstaints?: boolean | MediaTrackConstraints): Promise<VideoTexture>;
+        /**
          * Creates a video texture straight from your WebCam video feed.
          * @param scene Define the scene the texture should be created in
          * @param onReady Define a callback to triggered once the texture will be ready
          * @param constraints Define the constraints to use to create the web cam feed from WebRTC
+         * @param audioConstaints Define the audio constraints to use to create the web cam feed from WebRTC
          */
         static CreateFromWebCam(scene: Scene, onReady: (videoTexture: VideoTexture) => void, constraints: {
             minWidth: number;
@@ -25561,7 +25583,7 @@ declare module BABYLON {
             minHeight: number;
             maxHeight: number;
             deviceId: string;
-        }): void;
+        } & MediaTrackConstraints, audioConstaints?: boolean | MediaTrackConstraints): void;
     }
 }
 declare module BABYLON {
@@ -52863,6 +52885,8 @@ declare module BABYLON {
         fps: number;
         /** Defines the chunk size for the recording data */
         recordChunckSize: number;
+        /** The audio tracks to attach to the record */
+        audioTracks?: MediaStreamTrack[];
     }
     /**
      * This can helps recording videos from BabylonJS.

dist/preview release/babylon.d.ts

@@ -25975,10 +25975,32 @@ declare module BABYLON {
          */
         dispose(): void;
         /**
+         * Creates a video texture straight from a stream.
+         * @param scene Define the scene the texture should be created in
+         * @param stream Define the stream the texture should be created from
+         * @returns The created video texture as a promise
+         */
+        static CreateFromStreamAsync(scene: Scene, stream: MediaStream): Promise<VideoTexture>;
+        /**
+         * Creates a video texture straight from your WebCam video feed.
+         * @param scene Define the scene the texture should be created in
+         * @param constraints Define the constraints to use to create the web cam feed from WebRTC
+         * @param audioConstaints Define the audio constraints to use to create the web cam feed from WebRTC
+         * @returns The created video texture as a promise
+         */
+        static CreateFromWebCamAsync(scene: Scene, constraints: {
+            minWidth: number;
+            maxWidth: number;
+            minHeight: number;
+            maxHeight: number;
+            deviceId: string;
+        } & MediaTrackConstraints, audioConstaints?: boolean | MediaTrackConstraints): Promise<VideoTexture>;
+        /**
          * Creates a video texture straight from your WebCam video feed.
          * @param scene Define the scene the texture should be created in
          * @param onReady Define a callback to triggered once the texture will be ready
          * @param constraints Define the constraints to use to create the web cam feed from WebRTC
+         * @param audioConstaints Define the audio constraints to use to create the web cam feed from WebRTC
          */
         static CreateFromWebCam(scene: Scene, onReady: (videoTexture: VideoTexture) => void, constraints: {
             minWidth: number;
@@ -25986,7 +26008,7 @@ declare module BABYLON {
             minHeight: number;
             maxHeight: number;
             deviceId: string;
-        }): void;
+        } & MediaTrackConstraints, audioConstaints?: boolean | MediaTrackConstraints): void;
     }
 }
 declare module BABYLON {
@@ -53575,6 +53597,8 @@ declare module BABYLON {
         fps: number;
         /** Defines the chunk size for the recording data */
         recordChunckSize: number;
+        /** The audio tracks to attach to the record */
+        audioTracks?: MediaStreamTrack[];
     }
     /**
      * This can helps recording videos from BabylonJS.

dist/preview release/babylon.max.js

@@ -63286,44 +63286,62 @@ var VideoTexture = /** @class */ (function (_super) {
         this.video.pause();
     };
     /**
-     * Creates a video texture straight from your WebCam video feed.
+     * Creates a video texture straight from a stream.
      * @param scene Define the scene the texture should be created in
-     * @param onReady Define a callback to triggered once the texture will be ready
-     * @param constraints Define the constraints to use to create the web cam feed from WebRTC
+     * @param stream Define the stream the texture should be created from
+     * @returns The created video texture as a promise
      */
-    VideoTexture.CreateFromWebCam = function (scene, onReady, constraints) {
+    VideoTexture.CreateFromStreamAsync = function (scene, stream) {
         var video = document.createElement("video");
         video.setAttribute('autoplay', '');
-        video.setAttribute('muted', '');
+        video.setAttribute('muted', 'true');
         video.setAttribute('playsinline', '');
+        video.muted = true;
+        if (video.mozSrcObject !== undefined) {
+            // hack for Firefox < 19
+            video.mozSrcObject = stream;
+        }
+        else {
+            if (typeof video.srcObject == "object") {
+                video.srcObject = stream;
+            }
+            else {
+                window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
+                video.src = (window.URL && window.URL.createObjectURL(stream));
+            }
+        }
+        return new Promise(function (resolve) {
+            var onPlaying = function () {
+                resolve(new VideoTexture("video", video, scene, true, true));
+                video.removeEventListener("playing", onPlaying);
+            };
+            video.addEventListener("playing", onPlaying);
+            video.play();
+        });
+    };
+    /**
+     * Creates a video texture straight from your WebCam video feed.
+     * @param scene Define the scene the texture should be created in
+     * @param constraints Define the constraints to use to create the web cam feed from WebRTC
+     * @param audioConstaints Define the audio constraints to use to create the web cam feed from WebRTC
+     * @returns The created video texture as a promise
+     */
+    VideoTexture.CreateFromWebCamAsync = function (scene, constraints, audioConstaints) {
+        var _this = this;
+        if (audioConstaints === void 0) { audioConstaints = false; }
         var constraintsDeviceId;
         if (constraints && constraints.deviceId) {
             constraintsDeviceId = {
                 exact: constraints.deviceId,
             };
         }
-        window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
         if (navigator.mediaDevices) {
-            navigator.mediaDevices.getUserMedia({ video: constraints })
-                .then(function (stream) {
-                if (video.mozSrcObject !== undefined) {
-                    // hack for Firefox < 19
-                    video.mozSrcObject = stream;
-                }
-                else {
-                    video.srcObject = stream;
-                }
-                var onPlaying = function () {
-                    if (onReady) {
-                        onReady(new VideoTexture("video", video, scene, true, true));
-                    }
-                    video.removeEventListener("playing", onPlaying);
-                };
-                video.addEventListener("playing", onPlaying);
-                video.play();
+            return navigator.mediaDevices.getUserMedia({
+                video: constraints,
+                audio: audioConstaints
             })
-                .catch(function (err) {
-                _Misc_logger__WEBPACK_IMPORTED_MODULE_3__["Logger"].Error(err.name);
+                .then(function (stream) {
+                return _this.CreateFromStreamAsync(scene, stream);
             });
         }
         else {
@@ -63345,23 +63363,34 @@ var VideoTexture = /** @class */ (function (_super) {
                             max: (constraints && constraints.maxHeight) || 480,
                         },
                     },
+                    audio: audioConstaints
                 }, function (stream) {
-                    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));
-                    }
+                    return _this.CreateFromStreamAsync(scene, stream);
                 }, function (e) {
                     _Misc_logger__WEBPACK_IMPORTED_MODULE_3__["Logger"].Error(e.name);
                 });
             }
         }
+        return Promise.reject("No support for userMedia on this device");
+    };
+    /**
+     * Creates a video texture straight from your WebCam video feed.
+     * @param scene Define the scene the texture should be created in
+     * @param onReady Define a callback to triggered once the texture will be ready
+     * @param constraints Define the constraints to use to create the web cam feed from WebRTC
+     * @param audioConstaints Define the audio constraints to use to create the web cam feed from WebRTC
+     */
+    VideoTexture.CreateFromWebCam = function (scene, onReady, constraints, audioConstaints) {
+        if (audioConstaints === void 0) { audioConstaints = false; }
+        this.CreateFromWebCamAsync(scene, constraints, audioConstaints)
+            .then(function (videoTexture) {
+            if (onReady) {
+                onReady(videoTexture);
+            }
+        })
+            .catch(function (err) {
+            _Misc_logger__WEBPACK_IMPORTED_MODULE_3__["Logger"].Error(err.name);
+        });
     };
     return VideoTexture;
 }(_Materials_Textures_texture__WEBPACK_IMPORTED_MODULE_4__["Texture"]));
@@ -105364,6 +105393,12 @@ var VideoRecorder = /** @class */ (function () {
         this._canvas.isRecording = false;
         this._options = tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"]({}, VideoRecorder._defaultOptions, options);
         var stream = this._canvas.captureStream(this._options.fps);
+        if (this._options.audioTracks) {
+            for (var _i = 0, _a = this._options.audioTracks; _i < _a.length; _i++) {
+                var track = _a[_i];
+                stream.addTrack(track);
+            }
+        }
         this._mediaRecorder = new MediaRecorder(stream, { mimeType: this._options.mimeType });
         this._mediaRecorder.ondataavailable = this._handleDataAvailable.bind(this);
         this._mediaRecorder.onerror = this._handleError.bind(this);

dist/preview release/babylon.module.d.ts

@@ -26633,10 +26633,32 @@ declare module "babylonjs/Materials/Textures/videoTexture" {
          */
         dispose(): void;
         /**
+         * Creates a video texture straight from a stream.
+         * @param scene Define the scene the texture should be created in
+         * @param stream Define the stream the texture should be created from
+         * @returns The created video texture as a promise
+         */
+        static CreateFromStreamAsync(scene: Scene, stream: MediaStream): Promise<VideoTexture>;
+        /**
+         * Creates a video texture straight from your WebCam video feed.
+         * @param scene Define the scene the texture should be created in
+         * @param constraints Define the constraints to use to create the web cam feed from WebRTC
+         * @param audioConstaints Define the audio constraints to use to create the web cam feed from WebRTC
+         * @returns The created video texture as a promise
+         */
+        static CreateFromWebCamAsync(scene: Scene, constraints: {
+            minWidth: number;
+            maxWidth: number;
+            minHeight: number;
+            maxHeight: number;
+            deviceId: string;
+        } & MediaTrackConstraints, audioConstaints?: boolean | MediaTrackConstraints): Promise<VideoTexture>;
+        /**
          * Creates a video texture straight from your WebCam video feed.
          * @param scene Define the scene the texture should be created in
          * @param onReady Define a callback to triggered once the texture will be ready
          * @param constraints Define the constraints to use to create the web cam feed from WebRTC
+         * @param audioConstaints Define the audio constraints to use to create the web cam feed from WebRTC
          */
         static CreateFromWebCam(scene: Scene, onReady: (videoTexture: VideoTexture) => void, constraints: {
             minWidth: number;
@@ -26644,7 +26666,7 @@ declare module "babylonjs/Materials/Textures/videoTexture" {
             minHeight: number;
             maxHeight: number;
             deviceId: string;
-        }): void;
+        } & MediaTrackConstraints, audioConstaints?: boolean | MediaTrackConstraints): void;
     }
 }
 declare module "babylonjs/Engines/engine" {
@@ -56137,6 +56159,8 @@ declare module "babylonjs/Misc/videoRecorder" {
         fps: number;
         /** Defines the chunk size for the recording data */
         recordChunckSize: number;
+        /** The audio tracks to attach to the record */
+        audioTracks?: MediaStreamTrack[];
     }
     /**
      * This can helps recording videos from BabylonJS.
@@ -82978,10 +83002,32 @@ declare module BABYLON {
          */
         dispose(): void;
         /**
+         * Creates a video texture straight from a stream.
+         * @param scene Define the scene the texture should be created in
+         * @param stream Define the stream the texture should be created from
+         * @returns The created video texture as a promise
+         */
+        static CreateFromStreamAsync(scene: Scene, stream: MediaStream): Promise<VideoTexture>;
+        /**
+         * Creates a video texture straight from your WebCam video feed.
+         * @param scene Define the scene the texture should be created in
+         * @param constraints Define the constraints to use to create the web cam feed from WebRTC
+         * @param audioConstaints Define the audio constraints to use to create the web cam feed from WebRTC
+         * @returns The created video texture as a promise
+         */
+        static CreateFromWebCamAsync(scene: Scene, constraints: {
+            minWidth: number;
+            maxWidth: number;
+            minHeight: number;
+            maxHeight: number;
+            deviceId: string;
+        } & MediaTrackConstraints, audioConstaints?: boolean | MediaTrackConstraints): Promise<VideoTexture>;
+        /**
          * Creates a video texture straight from your WebCam video feed.
          * @param scene Define the scene the texture should be created in
          * @param onReady Define a callback to triggered once the texture will be ready
          * @param constraints Define the constraints to use to create the web cam feed from WebRTC
+         * @param audioConstaints Define the audio constraints to use to create the web cam feed from WebRTC
          */
         static CreateFromWebCam(scene: Scene, onReady: (videoTexture: VideoTexture) => void, constraints: {
             minWidth: number;
@@ -82989,7 +83035,7 @@ declare module BABYLON {
             minHeight: number;
             maxHeight: number;
             deviceId: string;
-        }): void;
+        } & MediaTrackConstraints, audioConstaints?: boolean | MediaTrackConstraints): void;
     }
 }
 declare module BABYLON {
@@ -110578,6 +110624,8 @@ declare module BABYLON {
         fps: number;
         /** Defines the chunk size for the recording data */
         recordChunckSize: number;
+        /** The audio tracks to attach to the record */
+        audioTracks?: MediaStreamTrack[];
     }
     /**
      * This can helps recording videos from BabylonJS.