Unable to play video from cross origin GWT Libgdx

[vaaneeunbnd]

Hello,

I have been trying to play cross-origin videos in my Libgdx GWT project; however, I always get the below error:

**GwtApplication: exception: (SecurityError) : Failed to execute 'texImage2D' on 'WebGLRenderingContext': The video element contains cross-origin data, and may not be loaded.
(SecurityError) : Failed to execute 'texImage2D' on 'WebGLRenderingContext': The video element contains cross-origin data, and may not be loaded.**

I have tried adding the

dependency{
  implementation 'com.thetransactioncompany:cors-filter:2.9.1'
}

and then updating my web.xml file

<?xml version="1.0" ?>
<web-app >
    <filter>
        <filter-name>CORS</filter-name>
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
        <init-param>
            <param-name>cors.supportedMethods</param-name>
            <param-value>GET, POST, DELETE, HEAD, OPTIONS</param-value>
        </init-param>
        <init-param>
            <param-name>cors.maxAge</param-name>
            <param-value>86400</param-value>
        </init-param>
        <init-param>
            <param-name>cors.supportsCredentials</param-name>
            <param-value>false</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CORS</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

Moreover, I added the build/dist files to the MAMP server and updated the apache.conf file to allow cross-origin content as well as have tried adding the Header set Access-Control-Allow-Origin: "*" to the .htaccessfile for the project in MAMP

I have also tried using the RequestBuilder to set the headers however, that doesn't work as well.

public static void doPost(String url, String postData) {
        RequestBuilder builder = new RequestBuilder(RequestBuilder.POST, url);

        try {
            builder.setHeader("Content-Type", "application/x-www-form-urlencoded");
            builder.setHeader("abcd", "yellow");
            Request response = builder.sendRequest(postData, new RequestCallback() {

                public void onError(Request request, Throwable exception) {
                    // code omitted for clarity
                }

                public void onResponseReceived(Request request, Response response) {
                    // code omitted for clarity
                }
            });
        } catch (RequestException e) {
            Window.alert("Failed to send the request: " + e.getMessage());
        }
    }

I am referring to the latest version of the gdx-video codebase for GWT as the current codebase doesn't allow us play external URLs. Below is the code that I have updated in gdx-video-gwt

@Override
    public boolean play(String URI) {
        if(!URI.contains("https") || !URI.contains("http")) {
            FileHandle file = Gdx.files.internal(URI);
            if (!file.exists()) try {
                throw new FileNotFoundException();
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            }

            if (v != null) {
                v.setSrc(((GwtFileHandle) file).getAssetUrl());
                //  v.setSrc(currentFile);
                v.setMuted(true);
                v.load();
                v.setAutoplay(true);
                v.play();
            }
        }else {
            currentFile = URI;
            if (v != null) {
                //  v.setSrc(((GwtFileHandle) file).getAssetUrl());
                v.setSrc(currentFile);
                v.setMuted(true);
                v.load();
                v.setAutoplay(true);
                v.play();
            }
        }
        return true;
    }

Version of LibGDX and/or relevant dependencies

gdxVersion = '1.9.12' gwtVersion='2.8.2'

Stacktrace

(SecurityError) : Failed to execute 'texImage2D' on 'WebGLRenderingContext': The video element contains cross-origin data, and may not be loaded.

#### Affected Platform
- [ ] HTML/GWT
- [ ] Windows

FYI, the local mp4 video files work fine, its just the issue with the external files.

I would be grateful if someone could please help me with this

Thanks

[SimonIT]

You have to add this to play cors videos: v.getVideoElement().setAttribute("crossorigin", "anonymous");