I am currently building an application with ReactJs and MongoDB displaying videos. My problem is that I want to prevent the end user from saving those videos either by accessing the console and inspect it and therefore get the url of the video or by simply downloading it on their computer.
At the moment, I have a script that disconnects the user if he opens the devTools :
useEffect(() => {
console.log(Object.defineProperties(new Error, {
message: {get() {
setOpened(true)
}
},
toString: {value() {(new Error).stack.includes('toString@')&&alert('Safari')}}
}));
if (opened) {
logoutHandler()
}
}, []);
And other one to prevent right clicking :
useEffect(() => {
document.onkeydown = function (e) {
return false;
};
document.addEventListener('contextmenu', (e) => {
e.preventDefault();
setOpened(true)
});
}, []);
The problem is that with a simple add-on, https://addons.mozilla.org/fr/firefox/addon/absolute-enable-right-click/, the user can right click again and save the video by clicking on "Save video as...".
I have also thought of splitting the videos when I upload them and then kind of "stream" them, but I haven't found any proper documentation on the subject... Currently the videos are stored into a Firebase bucket.
Would you have any advice on the matter please ?