Babylon AR mobile support

Questions
1

Hi All ,

I am working with AR sample using ObjectTrackerCamera class , but i changed the method to get the enviroment cam. The code working ok on my desktop when use CreateFromWebCamAsync , but on the mobile not working and just show black screen.

I replace the method using CreateFromStreamAsync to support stream directly using this constraint

{ audio: false, video: {facingMode: “environment” } }

        if (navigator.mediaDevices && 
            navigator.mediaDevices.getUserMedia) {
        this._stream = await  navigator.mediaDevices.getUserMedia({ audio: false, video: {facingMode: "environment" } });
        }

the behaviour was just a black screen from mobile.

Any advice is welcome.

This is my first week using Babylon :-).

Regards,
Falex

2

Welcome to the forum @falex !!!

Adding @syntheticmagus for the AR part.

Could you try to reproduce your issue in the playground ? It might help all of us figuring out the issue.

3

I hope that this exemple can help u :

AR exemple : https://www.babylonjs-playground.com/#BCU1XR#802

5

Thanks for reply , let me check, because include this code in vue typescript project. I think will be simple to use github page for me.

Regards,
Falex

6

thanks issam_abdelhedi, let me review the complete code.

Regards,
Falex

7

issam_abdelhedi,

I am using this code to create videoTexture and using Layer to create backgroundLayer, but about your code i not clear how to include this object.

the code

In line 36 using this api
camera.videoTexture = await BABYLON.VideoTexture.CreateFromStreamAsync(scene,stream);

I am using this code to get MediaStream :

private async startDevice () {
try {

        if (navigator.mediaDevices && 
            navigator.mediaDevices.getUserMedia) {
        this._stream = await  navigator.mediaDevices.getUserMedia({ audio: false, video: {facingMode: "environment" } });
        }

   } catch (e) {
        this.handleError(e)
   } // end try

}

Any advice is welcome.

Falex

8

So definitely a mission for @syntheticmagus :slight_smile: who is currently enjoying thanksgiving but no worries He ll be back on Monday.

9

Great !! thanks @sebavan

10

(Thanks for pinging me on this, Seb!)

Hi falex,

Does your browser’s console log show any errors? There are some nuances to creating video textures sometimes, and it’s very possible that there are issues (syntax support, etc.) where we simply haven’t handled the appropriate special cases yet. Specifically, in one of my browsers (the new Edge beta) I’m seeing an error message I haven’t seen before or tracked down yet.

image
image807×47 5.21 KB

I’ll take a look at that later to see if I can track down where that’s coming from. In the meantime, though, can you check and see if you’re getting a similar error message in the circumstance that’s not working? Thanks!

11

Thanks for your reply @syntheticmagus , let me re-test again, I used code from Texture.js and handler video and strem in my code.

    camera.videoTexture = await new Promise<BABYLON.VideoTexture>((resolve) => {
        let onPlaying = () => {
            resolve(new BABYLON.VideoTexture("video", video, scene, true, true));
            video.removeEventListener("playing", onPlaying);
        };
           //video.addEventListener("playing", onPlaying);
           //video.play();
    });

Thanks for your reply
Falex