Video As A Texture
If you want to display a video in your scene, the Babylon engine has a special texture for that. This special texture works similar to other textures, with the exception of a few parameters. These parameters include video urls (an url array), the size of the video texture (here is 256), the scene, and a final optional boolean that indicates if you want to use mipmap or not.
Here is an example from our Flat2009 Demo: Video Texture Example
This plays a video on the demo's ZTV screen (ecran = screen).
ecran.material.diffuseTexture = new BABYLON.VideoTexture("video", "textures/babylonjs.mp4", scene, true);
The VideoTexture object accepts an array of videos (to take into account various codecs). The first video in the array that can be loaded... is the one used as content source. Currently, HTML5 supports .mp4, .webm, and .ogv video formats.
The internal video DOM object is accessible via the VideoTexture.video property, which allows you to control some characteristics and monitor the status of the video. e.g. play, pause, loop, autoplay. See the link above for the full story.
Even though we are working with advanced texturing techniques, VideoTexture works in conjunction with a StandardMaterial. Simply put, it needs to have some light. As a handy alternative or video illumination assistant, you may want to set an emissiveColor on the base material of the mesh.
ecran.material.emissiveColor = new BABYLON.Color3(1, 1, 1);
Auto Play
Modern browsers have strict policies for autoplaying video. Without user interaction, most browsers will autoplay only if the audio is muted. When VideoTexture setting autoPlay
is true (the default), Babylon.js will automatically mute the audio if the first attempt to autoplay fails. To play video with audio, a user interaction (such as a tap) is often required. To manually start a video texture playback, code like this can be used:
scene.onPointerDown = function () { videoTexture.video.play(); scene.onPointerDown = null;};
This will start the video on the first tap in the scene. A demo can be found here: Tap To Play Video Texture
An event is also available to detect if you are in browser preventing autoplay by policy:
texture.onUserActionRequestedObservable.add(() => { scene.onPointerDown = function () { videoTexture.video.play(); };});
In case you wish to display a texture during the load time, you can provide in the poster
property of the settings the URL of an image displayed during loading or until the user interacts with the video.
Web RTC
Starting with v2.6, we introduced the support for WebRTC. So now you can create a specific VideoTexture which will be connected to your default WebCam:
BABYLON.VideoTexture.CreateFromWebCam(scene, function (videoTexture) {}, { maxWidth: 256, maxHeight: 256 });
The third parameter is optional and can be used to define minWidth, maxWidth, minHeight and maxHeight. These values will be used to constraint the camera resolution.
Disposal
VideoTexture creates and uses an HTML video element internally. When VideoTexture.dispose is called, texture resources are disposed as expected. However, the underlying video element is not removed. Causing complete release of all underlying video resources is not standardized across browsers, but code like this can be used:
// Store reference to the underlying HTML5 video elementconst videoEl = videoDome.videoTexture.video
// Dispose texturevideoTexture.dispose();
// Remove any <source> elements, etc.while (videoEl.firstChild) { videoEl.removeChild(videoEl.lastChild);}
// Set a blank srcvideoEl.src = ''
// Prevent non-important errors in some browsersvideoEl.removeAttribute('src')
// Get certain browsers to let govideoEl.load()
videoEl.remove()
This is only important to users that need to load/dispose multiple VideoTextures over time.