Pinata cloud Video extraction: The operation is insecure

Question

I am trying to get thumbnails from a video inside a IPFS cloud (pinata.cloud) but I receive the error "The operation is insecure".

The link for the video: https://gateway.pinata.cloud/ipfs/QmWWeXfCNrgThTzAxbS7AZywnsgp2sdB9rbi5kxuUyUwpZ

So far I have this:

<video id="videoHolder" controls>
  <source src="https://gateway.pinata.cloud/ipfs/QmWWeXfCNrgThTzAxbS7AZywnsgp2sdB9rbi5kxuUyUwpZ" type="video/mp4" />
</video>

<canvas id="canvas-element"></canvas>

<a id="test-link"></a>

<script>
      function thumbnails() {
        var _VIDEO = document.querySelector("#videoHolder"),
            _CANVAS = document.querySelector("#canvas-element"),
            _CANVAS_CTX = _CANVAS.getContext("2d");

        _CANVAS_CTX.drawImage(_VIDEO, 0, 0, _VIDEO.videoWidth, _VIDEO.videoHeight);

        // Video metadata is loaded
        _VIDEO.addEventListener('loadedmetadata', function() {
            // Set canvas dimensions same as video dimensions
            _CANVAS.width = _VIDEO_PICTURE.videoWidth;
            _CANVAS.height = _VIDEO_PICTURE.videoHeight;
        });

        download()
    }

    var download = function(){
        var link = document.getElementById('test-link');
        link.download = 'filename.png';
        link.href = document.getElementById('canvas-element').toDataURL()
    }
</script>

I have also read somewhere that it is part due to the crossOrigin but since it is on a IPFS I cannot edit that (as far as I know).

So how can I still achieve my goal of getting a thumbnail out of this video on IFPS with JavaScript?

Answer 1

This isn't related to ipfs:// protocol since Pinata's cloud service is serving that content over https://.

Here's a question related to the operation is insecure error: canvas.toDataURL() Security Error The operation is insecure

And the top answer to this question explains why you can't bypass this security feature: Why can't I force download of tainted canvas and why is it a security issue?

Serving IPFS content using a reverse proxy as a trusted source instead would risk high bandwidth, so you may want to look down the route of using a server to extract a frame of the video hosted on Pinata's cloud.