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?