Live Camera Feed script using ViewportFrame Handler

After careful consideration I figured this should be in #help-and-feedback:cool-creations and not #resources:community-resources as it’s not really a substantial resource, but rather one used for learning. Unfortunately, that means less people will probably see this, so if you see anyone asking about a static camera feed system on a surface gui don’t hesitate to point them here even though it’s not in #resources:community-resources.

This is a very simple live camera feed system, it’s more for teaching users how to make their own camera systems, but functions all the same. It doesn’t have a lot of configurability. My hope is that this shows one of the many ways to do this to developers so they can make their own systems (swipe/click to get a new camera feed anyone? This doesn’t support that, but it would be easy to make after analyzing this code). Every now and then I try to come on the devforum and help people. Recently, someone was asking about security cameras and live camera feeds. They said that there weren’t any just configure and go type of resources for a live feed camera that is on a screen. I decided, since I’ve done this before, that I can go ahead and tackle this.

I made this because some people may not understand how to use the ViewportFrame Handler module for this use case, so I wanted to make something simple. But I want to ensure you know, ViewportFrame Handler is made by boatbomber and sufficient credit for this should go to them for their amazing module.


Method

This is a very simple system. It uses the amazing module ViewportFrame Handler (ViewportFrame Handler). However, this version was modified to fix a memory leak regarding event connections (this means don't download your own version of ViewportFrame handler and expect it to work). I notified the developer of this and gave them my modified code, so in future versions, this may be not necessary.

Using the module, it’s easy make a viewport update parts and humanoids. For optimization purposes, it only renders what it can actually see, using config values for fov and camera range. However, it does render parts that are behind walls (raycasting every update to see if it can really see the part is worse for performance than just letting it sit there).


Resources

I've provided a editable place with 3 examples you can access it here. It has examples for a camera feed on a screen, a tablet tool, and a screen gui.

I’ve also provided the scripts in a model which you can get here.

Unless you’re making your own system, the only thing you should really edit is the config module script. The hierarchy looks like this:
s2kcw_88391

It’s really important that any camera feed you make with this resource has this hierarchy. You should have the LocalScript in a SurfaceGui that has a ViewportFrame in it.


Config

A basic config looks like this:
local Players = game:GetService("Players")
local Player = Players.LocalPlayer
-- The above is for example for tools, it is not required.

local config = {
	CameraEye = workspace.Camera1.Eye, -- The part the camera looks through, looks in the front face of the part
	FOV = 70, -- How wide the field of vision should be
	CameraRange = 100, -- The max distance to render parts
	FPS = 60, -- How many updates objects being rendered should undergo per second
	UpdateFrequency = 20, -- How many times to update rendered objects per second (removing/adding objects to the ViewportFrame)
	RenderCameraModel = false, -- Whether or not the model containing CameraEye should be rendered
	PlayerVisionRange = 100, -- How far away the player can see the screen (outside of this range, everything unrenders)
	
	AdornOnEnable=false, -- Whether or not to adorn the surfacegui on enable (useful for tools)
	Adornee=nil, -- The adornee if AdornOnEnable is true
	AttachToFace=Enum.NormalId.Top -- Which face to attach to
}

return config

There’s not a lot to it. If you want to attach it to a tool, I suggest you open up the example place and go into the config in the tool SurfaceGui. Essentially, you’re just adding a specific part and face to adorn to. Because tools are typically cloned into the player, it’s important to access it from their backpack and not just set the adornee in the surfacegui.

You can have a part not update if you want. This is done using attributes. The attribute we use is called CameraNoUpdate:
qs3hti_88401

This will not update or refresh on parts already in the frame, so if you want a part to not update that you’re creating from a script, make sure to add the attributes before parenting it to the workspace.


Caveats

  • This will not render camera screens inside of camera screens. This is why the tablet is blank in the camera feed.
  • This is not meant to be complicated. It's not supposed to have many options. Though it will work just fine if you just want a static screen.
  • This will not work well on very large games with many parts. The more parts, the more lag. This script recurses every model in the workspace to see if it needs to render. I'm trying to figure out a way to do this without iterating every part, but I haven't come up with a way yet.
  • Performance will dramatically increase if you use the CameraNoUpdate attribute on anchored parts that will never move. We still update regular anchored parts because it's possible they could be projectiles. Weapon scripts actively use anchored parts for their bullets, so not updating them could cause conflicts and odd behavior, so instead we opted for the attribute.
  • This is not fully optimized. I didn't go over a ton of things. I did a few optimizations, but not many.

GIFs

On a screen:

jfjjmc_88341


On a tool/tablet:
ezgif-3-4e9ce7cfb651

These gifs are lower resolution and lower fps than it actually is in game, make sure to check out the actual place for a good demonstration.


Remarks

As I said earlier this is more a resource for learning, while it does function on its own, I made this for people to reverse engineer. That's why I made a place for people to edit. If you want extra features like clicking an arrow to switch feeds, this is something you'll have to implement on your own using knowledge you already knew or gained by looking at how the scripts work. This script in particular is not modular. It could be modular to allow switching camera feeds and would ultimately work better if made into a class based system, but I can't stress this enough: this is a basic resource you can build off of/extract methods from and make your own system. There's not a lot of complicated logic, but not everyone is experienced with it, or maybe they didn't even know the ViewportFrame Handler existed which streamlines the entire process.

If it has enough interest, I may make a modular system for this (something you could just require in a localscript and create new handlers or specific surface guis), so let me know if that’s something you’d be interested in, but it would take longer because I’m doing a lot of stuff right now.

37 Likes

this is kinda cool it would really make cool if someone used this to make a gps system like google maps and also im thinking this might be in #resources:community-resources or #resources:community-tutorials

1 Like

Amazing system! Someone needs to try this out with multiple players!

1 Like

Amazing! I needed something exactly like this for my game and was worried I would have to mess with some poorly made pixelated whatevers but this works perfectly, Thanks so much, keep up the amazing work!

1 Like

I found a problem where sometimes the camera feed doesn’t show up randomly.

I updated the model to apply these changes:

  • Parts within parts should now be rendered properly if they’re within fov.
  • Cameras now look for multiple points on the part to be within range and fov rather than its center position which means that if you have one big wall or floor then it will be rendered properly.
1 Like

Are there any errors that you noticed? Also try it with the updated script

I don’t know if this is necroposting but, this is amazing! It’s so cool to see viewport being used for amazing stuff, keep up the good work!

1 Like

How would I get this to work with a ScreenGUI? I’m trying to include this into a Roblox Operating system. (Don’t question it, just stay with me here.)
image_2023-03-10_124017563
Here is what it looks like:


Yes, I have tried to experiment on my own, but I could not get it to work.

PS. I know this topic is kind of old, but it was worth a shot.

Thanks in advance,
Robyn

1 Like

Hey, I updated the place with the examples to include a screen gui sample, that can be found: here.

I also had to make small updates to the script for this which can be found: here.

Here’s it working as a gif (which is low res and low fps, to see what it looks like, copy the above place):

You shouldn’t need to do anything special, the previous version of the script just didn’t work with screen guis, and this one does.

3 Likes

Hey, does it work if camera is [constantly] or partially moving? I want to make a remote drone script with a camera attached to it.

The way that it currently works would not support a moving camera, though editing the script to support this shouldn’t be too difficult.

In the script change line 22 from cam.CFrame = Config.CameraEye.CFrame to

local eye: Part = Config.CameraEye
cam.CFrame = eye.CFrame
eye:GetPropertyChangedSignal("CFrame"):Connect(function()
	cam.CFrame = eye.CFrame
end)

This will update the camera’s CFrame as the part moves

2 Likes

I also want to do the exact same thing.

Requirements
I want a live camera feed from a camera which can show it on a display with a ViewportFrame, just like a real CCTV camera.

I want a seperate Display which contains the ViewportFrame on a SurfaceGUI which will stream live footage from the Camera Part. and the CameraPart is what i want to grab the footage from and show it on the display. I want the script on the display which will stream the footage from the Camera Part and put it on the display. I also want full code.

1 Like

You want them to just give you the code and make everything for you?

1 Like

No, but i just can’t seem to understand ViewportFrames yet and how they’re used in Roblox security cameras

1 Like

is your system expandable?
if it is, how do I change the screen to show a select camera?

for example if there is one camera system and I wanted to add another one, how do I get the 2nd screen to show what Camera 2 sees?

1 Like