Jump to content

VideoTexture not working on ios


Recommended Posts

I have a code:

var myVideo;            // Our Webcam stream (a DOM <video>)
                var isAssigned = false; // Is the Webcam stream assigned to material?

                var videoMaterial = new BABYLON.StandardMaterial("texture1", Game.scene);
                    videoMaterial.emissiveColor = new BABYLON.Color3(1,1,1);

                    // Create our video texture
                    BABYLON.VideoTexture.CreateFromWebCam(Game.scene, function (videoTexture) {
                        myVideo = videoTexture;
                        videoMaterial.diffuseTexture = myVideo;
                    }, { maxWidth: 256, maxHeight: 256 });

                    // When there is a video stream (!=undefined),
                    // check if it's ready          (readyState == 4),
                    // before applying videoMaterial to avoid the Chrome console warning.
                    // [.Offscreen-For-WebGL-0xa957edd000]RENDER WARNING: there is no texture bound to the unit 0
                    Game.scene.onBeforeRenderObservable.add(function () {
                        if (myVideo !== undefined && isAssigned == false) {
                            if (myVideo.video.readyState == 4) {
                                Game.videoLayer.material = videoMaterial;
                                isAssigned = true;


But video not playing in ios browser (safari). Access to the camera was authorized. What i do wrong? Thanks.

Link to comment
Share on other sites


Unfortunately, Apple in their infinite wisdom has locked all external apps from utilizing any apple webcam. The only work around in real time is to hack an external webcam which for me is useless. Apple has allowed Skype as the only 3rd party I'm aware of to use their webcams in real time. Otherwise, the best solution I've found is to use one of the camera apps owned and maintained wholly by Apple such as iCam, and once the media is saved to disk, dynamically load it into an HTML video. There are other APIs you can use, however, I've personally had the best luck with HTML.

I like WebRTC, but it's resolution is limited to 640X480 as many apps are. Best of luck, as I've exhausted every idea I could come up with to capture dynamically on IOS. Only a saved and reloaded video will display on IOS.




Link to comment
Share on other sites

If it is technically possible (even using a different framework), it should be possible with babylonjs.

I won't express my opinion about the iOS browser, I will say that it is rather restrictive and that you need to understand what's wrong with the code in order to debug this.

Eventually, those are web APIs that we are calling, and they should be standard. Could it be that the example is using some sort of a fallback on iOS?

Link to comment
Share on other sites


I have to use a safari. For tests, I took chrome, mozilla, safari. Chrome and Mozilla do not give errors, but they do not work either. In BabylonJS safari requests access to the camera and that's it. As for access to the camera in the threeJS then everything there is working in a safari. Chrome and Mozilla also do not work with demos on threeJS where you need access to the camera. In babylonjs Chrome and Mozilla do not even request access to the camera. The problem is not only on one of my devices. I tested on different iPhones. 


Now tested on Android and everything works. I think my question is closed, I'll have to use another device.

Thanks to all!
Link to comment
Share on other sites

If you hack the Iphone and can list a browser in the privacy>security setting, then you can provide permissions. Otherwise, for three.js demo, they used AR.js to capture each frame individually. Been there, and tried this, but too daunting for me.


I tested in Safari on both Iphone and MAC IOS and nothing. However it did ask for permission. 5 different IOS devices and no result for me.

Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...