Video Crash on Safari

Help & Support
1

Hi, it seems streamed video doesn’t play on Safari likely due to a CORS error. I get the error:

SecurityError: The operation is insecure. (seems to be textImage2D)

Currently my app crashes at the start in Safari because of this, but it works fine in all other browsers.

This old post seems to have a potential fix but I really cant understand the solution and there is too much in the example it seems that it will be almost impossible to adapt to my current code.

Does anyone have a barebones example or simple function that will do the necessary parsing to get a streamed video to run in Safari ??? Is there even a API call in Playcanvas to return the current Browser?

Cheers

2

To detect the current browser use this:

Main.prototype.initialize = function() {
    this.currentBrowser = this.fnBrowserDetect();
    console.log("You are using "+ this.currentBrowser); 
};


Main.prototype.fnBrowserDetect=function(){
                 
         let userAgent = navigator.userAgent;
         let browserName;
         
         if(userAgent.match(/chrome|chromium|crios/i)){
             browserName = "chrome";
           }else if(userAgent.match(/firefox|fxios/i)){
             browserName = "firefox";
           }  else if(userAgent.match(/safari/i)){
             browserName = "safari";
           }else if(userAgent.match(/opr//i)){
             browserName = "opera";
           } else if(userAgent.match(/edg/i)){
             browserName = "edge";
           }else{
             browserName="No browser detection";
           }
         
          return browserName;      
  }
3

Hi @Grimmy,

I saw your message on the other thread. startsWith() is a function specifically on strings in JS:

Was your url being provided in string format? Also, that script was specifically for links to videos that resulted in a redirect response. Would you be able to provide the link to the video you’re trying to use for debugging?

4

Cheers. Yeah, I figured out the startsWith problem in the end; yes, my url was indeed not a string but it was easily fixed.

I’m trying to link any video from Vimeo; this one specifically at the moment: https://player.vimeo.com/progressive_redirect/playback/819557203/rendition/540p/file.mp4?loc=external&signature=d0c523d1b79704cd4a83a1bcb96d3eff76cc62683e83f6e6610ea322bf850b2d

5

Hi @Grimmy,

The mediaPlayer script from back then is pretty dirty, but I was ultimately able to get the redirect for the video from Vimeo and get it to work on Windows. I don’t have a Mac handy to make sure that it works, but it should as it functions the same way. The script I rote borrowed from this example which relies on file extensions, so mine does as well:

https://developer.playcanvas.com/en/tutorials/webxr-360-video/

Because Vimeo’s redirects don’t actually have a file extension I had to take that check out of my code. Ultimately, the biggest change to ensure you have the right URL to pull from is listed below. That should get you the final URL of the video. The one I posted is actually going through a backend that I had built and supplied the redirect link in a JSON response along with subtitles and timestamps, so I apologize for the confusion.

MediaPlayer.prototype.getRedirect = async function(url) {
    console.log(`Getting redirect for: ${url}`);
    const response = await fetch(url, {
        method: 'GET'
    })
    .then(response => response.url);
    return response;
};

I hope this is helpful.