Raghavender Mylagary Posted March 16, 2017 Share Posted March 16, 2017 Hi, Is it possible to draw video onto the canvas element of the dynamic texture? Thanks - Raghavender Mylagary Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted March 16, 2017 Share Posted March 16, 2017 hi! yep. You can call context.drawImage and provide the video element as source Quote Link to comment Share on other sites More sharing options...
Raghavender Mylagary Posted March 16, 2017 Author Share Posted March 16, 2017 <!DOCTYPE html> <html> <head> <title></title> <script src="scripts/babylon.js"></script> <script src="http://www.babylonjs.com/cannon.js"></script> <script src="http://www.babylonjs.com/oimo.js"></script> <style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } </style> </head> <body> <canvas id="renderCanvas"></canvas> <canvas id="c"></canvas> <video id="v" controls> <source src=video.mp4 type=video/mp4> </video> <script type="text/javascript"> window.addEventListener('DOMContentLoaded', function () { var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var scene = new BABYLON.Scene(engine); var v = document.getElementById('v'); // Setup environment var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(10, 10, 50), scene); var light2 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(10, 10, -20), scene); var camera = new BABYLON.ArcRotateCamera("Camera", -1, 0.8, 100, new BABYLON.Vector3.Zero(), scene); camera.attachControl(canvas); // Video plane var videoPlane = BABYLON.Mesh.CreatePlane("Screen", 50, scene); videoPlane.position.y = 10; videoPlane.position.z = 30; // Video material var videoMat = new BABYLON.StandardMaterial("textVid", scene); videoMat.diffuseTexture = new BABYLON.DynamicTexture("dynamic texture", 512, scene, true); videoMat.backFaceCulling = false; var context = videoMat.diffuseTexture.getContext(); //Applying materials videoPlane.material = videoMat; context.drawImage(v, 0, 0); videoMat.diffuseTexture.update(); engine.runRenderLoop(function () { scene.render(); }); window.addEventListener('resize', function () { engine.resize(); }); }); </script> </body> </html> @Deltakosh I tried to implement it but it's not working. Can you please look into the above code? playground link http://www.babylonjs-playground.com/#1JQNK1#1 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted March 17, 2017 Share Posted March 17, 2017 Hello if you just want to display a video, we provide the video texture object: http://www.babylonjs-playground.com/#140LZL#8 If you want to update your dynamictexture with a video: http://www.babylonjs-playground.com/#1JQNK1#3 bviale 1 Quote Link to comment Share on other sites More sharing options...
Raghavender Mylagary Posted March 17, 2017 Author Share Posted March 17, 2017 @Deltakosh I want to display the video with HTML5 Video controls. I tried with video texture but isn't working so I tried to draw video element with controls onto the dynamic texture canvas. It is also not working, is there any way we can display the video with controls?? Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted March 20, 2017 Share Posted March 20, 2017 What about asking the good question directly when starting the thread? You cannot render HTML element inside a texture. But you can use picking to simulate click on buttons. In this case you will have to draw your own buttons. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.