2

I'm new to React. I'm trying to create a <canvas> that will render a video in React so that I can provide a restriction on video-downloading as mentioned here(the paint on canvas part). (I know I can't prevent users from downloading it, just a preventive measure from my side for newbie users).

I was using this for HTML-JS :

var canvas = document.getElementById("canV");
var ctx = canvas.getContext("2d");

var video = document.createElement("video");
video.src = "http://techslides.com/demos/sample-videos/small.mp4";
video.addEventListener('loadeddata', function() {
  video.play();  // start playing
  update(); //Start rendering
});

function update(){
  ctx.drawImage(video,0,0,256,256);   
  requestAnimationFrame(update); // wait for the browser to be ready to present another animation fram.       
}

and

<canvas id="canV" width='256' height='256'></canvas>

Now, How can I do this in React? Also, any other simple preventive measures to prevent the videos from getting downloaded?

Also, there is this answer, Can I do something like this in react/gatsby? If yes, then please guide.

Thanks.

JustCurious
  • 344
  • 5
  • 15
  • The mp4 video is being fetched as a network request.. it's pretty much impossible to prevent people downloading the video as to view the video they are already downloading it. You'd have to change the format of the mp4 and obfuscate it somehow. – Ari Seyhun Oct 05 '20 at 07:20
  • Okay... I'm all ears.@Acidic9. Can you please provide an article/doc or any help on how to `change the format of the mp4 and obfuscate it`? I will be obliged. Thanks. – JustCurious Oct 05 '20 at 07:26
  • Sorry I don't know of any from the top of my head, my google would be as good as yours. – Ari Seyhun Oct 05 '20 at 07:29
  • I believe https://stackoverflow.com/a/41186161/11795828 is what you were talking about @Acidic9. Can you please guide me in implementing this in React? Like where can I start? What are the prerequisites that I should know about? – JustCurious Oct 05 '20 at 07:51

0 Answers0