Roblox Video Player (Not Maintained)

well to be fair i wasnt updating on renderstepped but rather for every wait(). although in truth it runs at 30 fps on the users perspective all other client side stuff is responsive

1 Like

well mine can run on 30 fps too but only in low resolutions like 120x69
higher will just make it lag

1 Like

if you update it with wait() it should work for higher res’s than that and still be at 30 fps. In my rasterizer, I had put the pixel data in a huge 2d array (which some cs nerds yelled at me about saying to use a sparse matrix) either way if you still get lag with that it must be something else than the insertion phase

2 Likes

it updates everytime the client has received data
except here is the interesting part:

it lags when a lot of pixels change even though the pixel.Color property is still set on all pixels
my assumption here is that the Color property is pretty expensive for this type of stuff
it has already been said before that CFrame is the only “cheap” property to update

(i use parts for pixels)

1 Like

That’s what I was thinking, if you convert the video to Color3 Values and put them in a table, they’re already loaded in.

There’s an API for that but I can’t find it right now.

1 Like

i had made one of those for my rasterizer before, its actually really trivial if you want all rgb encodes

2 Likes

Pretty cool. Probably gonna use this in a cool way! Thanks for sharing.

1 Like

yes, this is terible. roblox need change about thats.

Can you send a link to this game? Seems pretty amazing

If you’ve read the comments, you’d have noticed theres no game sadly as this is against the ToS, though you could ask tyridge himself

Improvements

https://gyazo.com/fec8f59a8a2cb8951a6b92bfb04a36ce
https://gyazo.com/3ccc929ee45a28d4b4b57508c78cede2

2 Likes

New Method

Result:



Notes

  • This project isn’t finished, and I don’t have much time to finish it.
  • This shouldn’t be used in a real game, it’s just an experiment. I believe that it’s against Roblox’s TOS.
  • There are other scripts that are disabled in ServerScriptService, these are old versions.
  • The commands can only be used in studio, or if your user id is in the Admins array.
  • It is laggy, and unoptimised.
  • My intention is to learn from this, not to monetise it.

Here’s how I did it:

Language
Frame data = dictionary containing RGB values for each pixel of a frame
Pixel data = decoded data, ready to be used. Contains frame data
Packet data = encoded data, in JSON format. Contains groups of frame data

Encoding
I made a python code that accessed each frame of an mp4 file. I then accessed each pixel’s RGB value of each frame and stored it, so that it can be accessed using PixelData[FrameNumber][X][Y][RGB]. During the encoding process, I divided the frames into packets (of 10, it can be any number), encoded the frames into JSON format and stored it to a local folder. Dividing the data prevents roblox scripts from timing out when decoding.

Storing
After all the data has been encoded and stored, I used Git to upload the files (containing the packet data) to my GitHub repo.

Accessing Stored Data From Roblox
Using HTTP Service, I used GetAsync() with the URL of my raw data from the repo.
Then client the requests the packets from the game server, and displays it locally.

Resources:

Code:
Python code (Replit)
Roblox uncopylocked place

Software:
Git
Visual Studio Code

MP4 Files & SoundIds:
Google Drive
Virus Total

Commands
:film {HallName} {“load”,“play”,"stop} {FilmName}
HallName is the name of the folder highlighted in blue, you may duplicate or rename the folder to change the hall name.
image

Setup

Note
You will require some robux to upload the audio of your video.
However, if you do not have robux, I’ve provided some mp4 files along with the uploaded sound ids for you.

Replit & GitHub

  1. Create an account on replit.com, or use an existing account.

  2. Go to this repl and click on “Fork repl”


    Below is what you should see after forking.

  3. Drag your video file into the video folder as shown below.

  4. While your video is uploading. Create an account on GitHub, or use an existing account.

  5. Select version control on the left panel.
    image
    Then click on “Create a Git Repo”
    image
    Click on “Connect to GitHub”
    image
    This prompt will then popup, click on “Connect Replit to your GitHub Account”
    image
    You should see something similar to this. Click on “Install & Authorize”.


    After installing, you should be redirected back here. Click on “Connect to Github” again.
    image
    Fill in your repo name here, you can enter any name you like.
    image
    Make sure that the privacy is set to public. Then, click on "Create GitHub repository.

  6. Once you video has uploaded, you will have to change these parameters.


    They are (filmName,videoName,resolutionMulti,fpsMulti,packetSize)

filmName - Your film name. This will be used to identify your film.

videoName - Your video name that you just uploaded. Make sure the extension is correct (.mp4, .flv, .webm. etc.).

resolutionMulti - Scale of your resolution. This takes a number from 0 to 1. For example, 0.3 would be 3/10 of the original resolution. It’s not recommended to go above 0.3.

fpsMulti - Scale of your FPS (Frames Per Second). This takes a number from 0 to 1. For example, 0.3 would be 3/10 of the original FPS.

packetSize - Determines the number of frames in a packet. A higher packet size can result in faster loading. While a lower packet size can recede the roblox scripts from timing out.

  1. Click on Run.


    When running it for the first time, it might take some time for the packages to download. This is normal.
    Once all packages has been installed, the encoding progress begins. It should show you a progress counter as shown below.

    This should show up after it has completed.
    image

  2. Once the encoding process has been completed. Go back to version control
    image
    Check that the PacketData folder is apart of the changed folder. If not, try refreshing the page.
    image
    Type in your push message, it can be anything.
    image
    Then, click on “Commit & push”"
    image
    The side panel will then turn grey until it has completed pushing.


    If you go into github.com > My Repositories > (Your Repository name) > PacketData > (Your Film Name), you should be able to see your packet files.

Roblox
9) Open the open-sourced roblox place linked above (In resources). In ServerScriptService, find the ModuleScript named “CombinedData” and open it.
image
In the first few lines of the code, change RepositoryName to your repository name from step 5, and change GitHubAccountUsername to your github account username from step 4.
image

  1. Scroll down to a dictionary named FilmData
    image
    Copy and paste your film name from step 6 and the sound id of your video. Adjust the volume and playback speed if needed (optional). If you are uploading a new film, duplicate the dictionary as seen below.
    image

  2. (Optional step) Open the FilmClient script.
    image
    Change PreloadSeconds and PreloadInterval to your liking.


    Increasing PreloadInterval can decrease lag spike, but can cause data to be transmitted too slowly. Increasing PreloadSeconds can allow a lower PreloadInterval, but client memory will also increase.

  3. Play the game, a progress counter should show up in the output.
    image
    Once all data has been aquired, “Got Film Data” should show up in the output.
    image

  4. At this point, you can play the film, but not before loading it. Type in chat :film Test1 load (Your Film Name). Test1 refers to the hall folder name in workspace.
    image
    The preload will then begin. After waiting a few seconds, type in chat :film Test1 play, you video should begin playing. You can stop the video by typing in chat :film Test1 stop

Uploading new videos
Repeat step 3 (Uploading the video)
Repeat step 6 to step 8
Repeat step 10

You may use this however you like, but I will not be responsible if you use this maliciously.

If you have any questions, or if anything is missing from the explanation, please let me know c:

16 Likes

I didn’t want to make another post for this, because everything is already here, but should I? It seems a little crowded.

2 Likes

I would love to see a more in-depth post of this sort of thing.

More in-depth about setting up the project or about how it’s coded?

Set up and how to change possibly?

hey jon, that is interesting… but why is the backend code not showing in any of ur links. I really wanted to make a video project like this. I wanted to study the backend but the link keeps leading to a blank “This page is not found” page.

1 Like

I’ve removed it for now, I’m writing up a tutorial on it right now. Here’s the zip of the backend code.
OptimisedPixelVideoEncoder - Copy.zip (6.1 KB)

1 Like

thanks for the response, ill look at the zip.

1 Like

Btw, Jon what webserver do you use for your python code? Gltich or Python’s native server?

1 Like