using blobs properly

[davePawww]

I have a cdn that is being passed to Video component
and it works fine. However, I wanted to create a blob url so I can mask the actual cdn link I am using so users won't be able to go to dev tools -> get the cdn link -> download the video.

  useEffect(() => {
    const vidLink = async () => {
      let blobUrl: string;
      if (activeVideo) {
        const blob = await getVideoUrl(activeVideo.videoUrl);
        blobUrl = URL.createObjectURL(blob) + "#" + activeVideo?.id;
        setVideoUrl(blobUrl);
      }
    };

    vidLink();

    return () => {
      URL.revokeObjectURL(blobUrl);
    };
  }, [activeVideo]);

I tested the code above on small videos 5-10mins and it was working fine. However when I try to use the actual videos I need 2-3hrs, the video loads significantly longer and I could see that the json files aren't being created in videos/ directory, instead there was a folder blob:https// directory that is being created.