Jump to content

"Operation is insecure" error in Firefox - Texture.fromVideo(videoElement)


Recommended Posts


The project is old so PIXI v.3.0.11 is used.
For streaming - Flashphoner via WebRTC

Steps to reproduce

1. Start video stream in html video element - stream.start(myDiv) which creates streamVideoElement in myDiv

2. When stream fires STREAM_PLAYING event the method PIXI.Texture.fromVideo(streamHtmlVideoElement) is called and the returned texture is set to the specific PIXI.Sprite instance.

3. Somewhere after this the Firefox browser receives error thrown by WebGl:

Additional information

  • The problem is happened very rerely
  • Only Firefox
  • Stream(video element) is not failed after the error


SecurityError: The operation is insecure. pixi.js:14771

    updateTexture pixi.js:14771
    renderBatch pixi.js:18735
    flush pixi.js:18661
    renderWebGL pixi.js:7724
    renderWebGL pixi.js:7769
    renderWebGL pixi.js:7769
    renderWebGL pixi.js:7769
    renderWebGL pixi.js:7769
    renderDisplayObject pixi.js:14682
    render pixi.js:14655
    animate Stage.ts:385
    animate Stage.ts:388



In the PIXI source code that means:

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);

What we tried

  • tried to set  video.crossOrigin = "anonymos" to the video element but no success.
  • tried to dispose video like video.src = "" and etc according some advices related to the localStorage caching

I know it's not directly linked by PIXI but still I need help.

And the image of the current block when exception was thrown.



Link to comment
Share on other sites

52 minutes ago, Exca said:

That looks like a CORS problem. Can you check what network headers the video (and possibly related preflight request) have in relation to access control?

The only headers I can access is the updgrading protocol request/response (from http to ws) wich does not contains any valuable information. After this the connection is opened between my client and the server. The client receives only socket messages like stream events - PLAY, FAIL and etc.

I cannot inspect the WebRTC headers and messages at whole. Also cannot find any tool that can do this.

The problem is happening very rarely and it is in Firefox only. So in one moment I decided to stop believing it is CORS problem for that reason.

And only WebGl has problem. The stream(video element) is not failed or something.

Link to comment
Share on other sites

Do you draw something else than the video to canvas? If something taints a canvas then it stays tainted no matter what is rendered in the future. Or it might be due to stream becoming unavailable at some point for short duration and that could cause tainting (though the bug report I found on this should be already resolved, it was 5 years ago).

Pretty sure it's some kind of edge case in security constraints which causes canvas to become tainted (by something), which causes security error when pixels are read from it.

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...