Restrict Download of Images & Videos on Streamlit App

Custom Components
2

Hello @Aishwarya_Verma!

If you’re trying with relative paths like <video src="Wildlife.mp4" ...>, you need to know the Streamlit server loads static assets from the static folder of where it is is installed. You can find this folder by running python -c "import streamlit as st; print(st.__path__) in your environment.

For example on my laptop:

python -c "import streamlit as st; print(st.__path__)
> \\Continuum\\anaconda3\\envs\\streamlit-custom\\lib\\site-packages\\streamlit

The Wildlife.mp4 would need to be in \\Continuum\\anaconda3\\envs\\streamlit-custom\\lib\\site-packages\\streamlit\\static for Streamlit to load <video src="Wildlife.mp4" correctly. I don’t think it’s possible to serve from absolute paths outside the static folder with the way Streamlit/Tornado is configured, but I did not dig into the source code to prove this (yet).

So if you are trying to deploy a local video, you’ll need to copy the video to this static folder first. Careful if you are testing locally, we are messing up with the Streamlit installation folder. Any Streamlit reinstall will delete any files there.

import pathlib 
import shutil
import streamlit as st
import streamlit.components.v1 as components

# HACK This works when we've installed streamlit with pip/pipenv, so the
# permissions during install are the same as the running process
STREAMLIT_STATIC_PATH = pathlib.Path(st.__path__[0]) / 'static'
# We create a videos directory within the streamlit static asset directory
# and we write output files to it
VIDEOS_PATH = (STREAMLIT_STATIC_PATH / "videos")
if not VIDEOS_PATH.is_dir():
    VIDEOS_PATH.mkdir()

wildlife_video = VIDEOS_PATH / "Wildlife.mp4"
if not wildlife_video.exists():
    shutil.copy("Wildlife.mp4", wildlife_video)  # For newer Python.


def main():
    components.html("""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.main-div h1
{
 font-size: 21px;
}
</style>
  </head>
  <body>
   <div class="main-div">
    <video src = "videos/Wildlife.mp4" width="480" height="360" controls controlsList="nodownload"></video>
<script type="text/javascript">
//Script for disabling right click on mouse
var message="Function Disabled!";
function clickdsb(){
if (event.button==2){
alert(message);
return false;
}
}
function clickbsb(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickbsb;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickdsb;
}
document.oncontextmenu=new Function("alert(message);return false")
</script>
</div>
</body>
</html>""", width=500, height=500)


if __name__ == "__main__":
    main()

Cheers,
Fanilo

3 Likes