canvas.toDataURL() Security Error The operation is insecure

Question

When I am trying to get a screenshot and save it as PNG before uploading video to server, I am having the following problem

Answer 1

In my case, the problem was related to the presence of icons that weren't coming from my site as well as the presence of a Select input. Your video container may contain the same items. To solve, I had to hide the select inputs and icons before the screenshot was taken, then show them again after the screenshot was taken. Then, the canvas.toDataURL worked perfectly and didn't throw that security error.

Before Screenshot:

$("select[name='example']").add(".external-icon").hide();

After Screenshot:

$("select[name='example']").add(".external-icon").show();