[SOLVED] Video Textures on iOS

Help & Support
1

Hello fellow PlayCanvas Developers!

I’ve seen this thread: Problems with VideoTexture

and I was wondering if it works now? I have a Project which uses PlayCanvas AR and Video-Textures and it works perfectly fine on Chrome, Edge and Firefox aswell as Android devices. But on iOS devices, the Texture just loads the inital picture of the video and doesn’t play it. I also noticed, that the iOS Camera zooms in once the Video texture is applied and doesn’t zoom out again. And also also, it seems that if a model takes a little to load, the site crashes on iOS and reloads the page, which is also unfortunate…

Anyone know how to fix these problems? It is actually crucial that it works on iOS, since our company wants to give out differnt AR cards which can be scanned (with one Programm alone handling multiple markers) to people and there are IPhone users out there.

Since it’s a company project I can’t really share a project sample. But will set-up one if asked.

2

Do you get any errors/information from the browser console on Safari tools? Does the AR work without the scene using video textures? OR does the video textures work without the AR?

3

When I debug on a mac I initially get an

Unhandled Promise Rejection: AbortError: The operation was aborted.

and when I try to use the play() function on the element at a later time I get:

Unhandled Promise Rejection: Not Allowed Error: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

So did I forget to grant a special permission ? can I do it via the PlayCanvas ediot over a script ?

Thanks in advance!

EDIT: I researched the error and I firstly need to have audio so the “muted” property does not come into question and secondly I have no autoplay, the user needs to press start at the beginning of the application in order to start the AR tracking so there was a user intraction already. (Needed this for it to work in chrome)

4

Okay I found out how to do it.

I now take the promise of video.play() and if it fails I display a PlayButton and by clicking that, it will call the playVideo() function again and try to play the video which then works… Really weird work-around but I guess that’s one way it works.

Videotexture.prototype.playVideo = function(){
    var video = document.getElementById(this.elementID);
  
    var promise = video.play();
    
    var videoPlayButton = this.entity.findByName("VideoPlayButton");
    var videoReplayButton = this.entity.findByName("ReplayButton");
    
    //Handle video.play() promise. On iOS we can't start the video automatically with sound, so we need to display a play Button which then plays the video
    if (promise !== undefined) {
        promise.then(function() {
            if(videoReplayButton != null && videoReplayButton != undefined){
                //Display Replay button 
                videoReplayButton.enabled = true;
            }
        }).catch(function(error) {
            //If there was an error autoplaying the video, then display a button to play the video
            if(videoPlayButton != null && videoPlayButton != undefined){
                videoPlayButton.enabled = true;
            }
        });
    }
};

Maybe this will help some people in the future!

I also tried to apply the muted attribute and then remove it afterwards, the video was automatically playing but had no sound, so that unfortunately didn’t work (worked on chrome and firefox tough)

NOTE: The problem that IPhones zoom in still occures and I don’t know what could cause that ://

1 Like
5

I have added two buttons and tried firing the video.play() twice but it is not working in iOS.

this.app.on(‘start-demo’, function () {
video.play();
});

We have tried autoplay like with out any external event /click and still it is not working in iOS

Can you please suggest us