Strona główna Odkrywaj Pomoc
Zarejestruj się Zaloguj się
zhangyupeng
/
Babylon.js
1
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

Added support for WebRTC texture (including constraints)

David Catuhe 8 lat temu
rodzic
4e9f2cc9f0
commit
d6299ab8a2
9 zmienionych plików z 1863 dodań i 1756 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 30 30
      Playground/debug.html
  2. 10 10
      dist/preview release/babylon.core.js
  3. 1711 1696
      dist/preview release/babylon.d.ts
  4. 10 10
      dist/preview release/babylon.js
  5. 35 0
      dist/preview release/babylon.max.js
  6. 10 10
      dist/preview release/babylon.noworker.js
  7. 1 0
      dist/preview release/what's new.md
  8. 46 0
      src/Materials/Textures/babylon.videoTexture.ts
  9. 10 0
      src/babylon.mixins.ts

+ 30 - 30
Playground/debug.html
Wyświetl plik 

@@ -2,7 +2,7 @@
 
 <html>

 <head>

     <title>Babylon.js Playground</title>

-    <script src="http://www.babylonjs.com/poly2tri.js"></script>    

+    <script src="https://babylonjs.azurewebsites.net/poly2tri.js"></script>    

     <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>

     <!--x-tag-->

     <script src="xtag.min.js"></script>

@@ -15,38 +15,38 @@
 
     <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

     <script src="node_modules/monaco-editor/min/vs/loader.js"></script>

     <!-- Babylon.js -->

-    <script src="http://www.babylonjs.com/cannon.js"></script>

-    <script src="http://www.babylonjs.com/Oimo.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/cannon.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/Oimo.js"></script>

     <!--<script src="../babylon.js"></script>-->

-    <script src="http://www.babylonjs.com/babylon.max.js"></script>

-    <script src="http://www.babylonjs.com/babylon.canvas2d.max.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/babylon.max.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/babylon.canvas2d.max.js"></script>

     

-    <script src="http://www.babylonjs.com/lib/babylon.fireMaterial.min.js"></script>

-    <script src="http://www.babylonjs.com/lib/babylon.waterMaterial.min.js"></script>

-    <script src="http://www.babylonjs.com/lib/babylon.lavaMaterial.min.js"></script>

-    <script src="http://www.babylonjs.com/lib/babylon.normalMaterial.min.js"></script>

-    <script src="http://www.babylonjs.com/lib/babylon.skyMaterial.min.js"></script>

-    <script src="http://www.babylonjs.com/lib/babylon.triPlanarMaterial.min.js"></script>

-    <script src="http://www.babylonjs.com/lib/babylon.terrainMaterial.min.js"></script>

-    <script src="http://www.babylonjs.com/lib/babylon.gradientMaterial.min.js"></script>

-    <script src="http://www.babylonjs.com/lib/babylon.furMaterial.min.js"></script>

-    <script src="http://www.babylonjs.com/lib/babylon.gridMaterial.min.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.fireMaterial.min.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.waterMaterial.min.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.lavaMaterial.min.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.normalMaterial.min.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.skyMaterial.min.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.triPlanarMaterial.min.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.terrainMaterial.min.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.gradientMaterial.min.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.furMaterial.min.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.gridMaterial.min.js"></script>

 

-    <script src="http://www.babylonjs.com/lib/babylon.brickProceduralTexture.min.js"></script>

-    <script src="http://www.babylonjs.com/lib/babylon.cloudProceduralTexture.min.js"></script>

-    <script src="http://www.babylonjs.com/lib/babylon.fireProceduralTexture.min.js"></script>

-    <script src="http://www.babylonjs.com/lib/babylon.grassProceduralTexture.min.js"></script>

-    <script src="http://www.babylonjs.com/lib/babylon.marbleProceduralTexture.min.js"></script>

-    <script src="http://www.babylonjs.com/lib/babylon.roadProceduralTexture.min.js"></script>

-    <script src="http://www.babylonjs.com/lib/babylon.starfieldProceduralTexture.min.js"></script>

-    <script src="http://www.babylonjs.com/lib/babylon.woodProceduralTexture.min.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.brickProceduralTexture.min.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.cloudProceduralTexture.min.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.fireProceduralTexture.min.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.grassProceduralTexture.min.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.marbleProceduralTexture.min.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.roadProceduralTexture.min.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.starfieldProceduralTexture.min.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.woodProceduralTexture.min.js"></script>

 

-    <script src="http://www.babylonjs.com/lib/babylon.asciiArtPostProcess.min.js"></script>

-    <script src="http://www.babylonjs.com/lib/babylon.digitalRainPostProcess.min.js"></script>    

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.asciiArtPostProcess.min.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.digitalRainPostProcess.min.js"></script>    

 

-    <script src="http://www.babylonjs.com/lib/babylon.glTFFileLoader.js"></script>

-    <script src="http://www.babylonjs.com/lib/babylon.objFileLoader.js"></script>

-    <script src="http://www.babylonjs.com/lib/babylon.stlFileLoader.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.glTFFileLoader.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.objFileLoader.js"></script>

+    <script src="https://babylonjs.azurewebsites.net/lib/babylon.stlFileLoader.js"></script>

 

     <link href="index.css" rel="stylesheet" />

 </head>

@@ -115,14 +115,14 @@
 
             </ul>

             <ul class="nav pull-right">

                 <li><a href="http://www.html5gamedevs.com/forum/16-babylonjs/">Forum</a></li>

-                <li><a href="http://www.babylonjs.com/sandbox">Sandbox</a></li>

+                <li><a href="https://babylonjs.azurewebsites.net/sandbox">Sandbox</a></li>

                 <li><a href="https://github.com/BabylonJS/Babylon.js/wiki">Wiki</a></li>

                 <li><a href="http://www.sokrate.fr/documentation/babylonjs/index.html">Documentation</a></li>

             </ul>

         </div>

     </div>

 

-    <script src="http://code.jquery.com/jquery.js"></script>

+    <script src="https://code.jquery.com/jquery.js"></script>

     <script src="bootstrap/js/bootstrap.min.js"></script>

     <script src="index.js"></script>

 </body>

Plik diff jest za duży
+ 10 - 10
dist/preview release/babylon.core.js


Plik diff jest za duży
+ 1711 - 1696
dist/preview release/babylon.d.ts


Plik diff jest za duży
+ 10 - 10
dist/preview release/babylon.js


+ 35 - 0
dist/preview release/babylon.max.js
Wyświetl plik 

@@ -25038,6 +25038,9 @@ var BABYLON;
 
             this._lastUpdate = BABYLON.Tools.Now;
 
         }
 
         VideoTexture.prototype._createTexture = function () {
 
+            if (this.video.videoWidth === 0 || this.video.videoHeight === 0) {
 
+                return;
 
+            }
 
             this._texture = this.getScene().getEngine().createDynamicTexture(this.video.videoWidth, this.video.videoHeight, this._generateMipMaps, this._samplingMode);
 
             this._texture.isReady = true;
 
         };
 
@@ -25054,6 +25057,38 @@ var BABYLON;
 
             this.getScene().getEngine().updateVideoTexture(this._texture, this.video, this._invertY);
 
             return true;
 
         };
 
+        VideoTexture.CreateFromWebCam = function (scene, onReady, constraints) {
 
+            var video = document.createElement("video");
 
+            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: {
 
+                        width: {
 
+                            min: (constraints && constraints.minWidth) || 256,
 
+                            max: (constraints && constraints.maxWidth) || 640
 
+                        },
 
+                        height: {
 
+                            min: (constraints && constraints.minHeight) || 256,
 
+                            max: (constraints && constraints.maxHeight) || 480
 
+                        }
 
+                    }
 
+                }, function (stream) {
 
+                    if (video.mozSrcObject !== undefined) {
 
+                        video.mozSrcObject = stream;
 
+                    }
 
+                    else {
 
+                        video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
 
+                    }
 
+                    video.play();
 
+                    if (onReady) {
 
+                        onReady(new BABYLON.VideoTexture("video", video, scene, true, true));
 
+                    }
 
+                }, function (e) {
 
+                    BABYLON.Tools.Error(e.name);
 
+                });
 
+            }
 
+        };
 
         return VideoTexture;
 
     }(BABYLON.Texture));
 
     BABYLON.VideoTexture = VideoTexture;

Plik diff jest za duży
+ 10 - 10
dist/preview release/babylon.noworker.js


+ 1 - 0
dist/preview release/what's new.md
Wyświetl plik 

@@ -2,6 +2,7 @@
 
 

 ### Major updates

  - New DebugLayer. [Doc](TODO) - ([temechon](https://github.com/temechon))

+ - New `VideoTexture.CreateFromWebCam` to generate video texture using WebRTC. [Demo](https://www.babylonjs-playground.com#1R77YT#2) - (Sebastien Vandenberghe)(https://github.com/sebavanmicrosoft) / ([deltakosh](https://github.com/deltakosh))

 

 ### Updates

  - `Effect.getVertexShaderSource()` and `Effect.getFragmentShaderSource()` now returns the effective shader code (including evaluation of #define) ([deltakosh](https://github.com/deltakosh))

+ 46 - 0
src/Materials/Textures/babylon.videoTexture.ts
Wyświetl plik 

@@ -60,6 +60,9 @@
 
         }

 

         private _createTexture(): void {

+            if (this.video.videoWidth === 0 || this.video.videoHeight === 0) {

+                return;

+            }

             this._texture = this.getScene().getEngine().createDynamicTexture(this.video.videoWidth, this.video.videoHeight, this._generateMipMaps, this._samplingMode);

             this._texture.isReady = true;

         }

@@ -80,5 +83,48 @@
 
             this.getScene().getEngine().updateVideoTexture(this._texture, this.video, this._invertY);

             return true;

         }

+

+        public static CreateFromWebCam(scene: Scene, onReady: (videoTexture: VideoTexture) => void, constraints: { 

+                minWidth: number, 

+                maxWidth: number, 

+                minHeight: number, 

+                maxHeight: number

+            }): void {

+            var video = document.createElement("video");

+

+		    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: {

+                        width: {

+                            min: (constraints && constraints.minWidth) || 256,

+                            max: (constraints && constraints.maxWidth) || 640

+                        },

+                        height: {

+                            min: (constraints && constraints.minHeight) || 256,

+                            max: (constraints && constraints.maxHeight) || 480

+                        }

+                    }

+                }, (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 BABYLON.VideoTexture("video", video, scene, true, true));

+                    }

+			    }, function (e) {

+                    Tools.Error(e.name); 

+                });

+            }

+        }

     }

 }

+ 10 - 0
src/babylon.mixins.ts
Wyświetl plik 

@@ -23,6 +23,8 @@ interface Window {
 
     Math: Math;

     Uint8Array: Uint8ArrayConstructor;

     Float32Array: Float32ArrayConstructor;

+    mozURL: any;

+    msURL: any;

 }

 

 interface AudioContext extends EventTarget {

@@ -109,6 +111,14 @@ interface Navigator {
 
     getVRDisplays: () => any;

     mozGetVRDevices: (any: any) => any;

     isCocoonJS: boolean;

+    getUserMedia: any;

+    webkitGetUserMedia: any;

+    mozGetUserMedia: any;

+    msGetUserMedia: any;

+}

+

+interface HTMLVideoElement {

+    mozSrcObject: any;

 }

 

 interface Screen {