Raghavender Mylagary

Drawing Video onto the DynamicTexture Canvas

Recommended Posts

 

<!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

 

 

Canvas.png

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.