Hello Home Assistant Community,
I have been a long time lurker but just created this account recently to help support any questions around my new StreamShuttle home CCTV/NVR software. I wanted to showcase how easy it is to get your live camera feeds added to any home assistant dashboard, without the need for adding any custom integrations or cards. You can simply use the built “Webpage” card.
First off you need to have StreamShuttle installed an up and running. Once thats done it’s just a matter of grabbing and API key and the device IDs you want to make visibile in Home Assistant.
Next lets generate an API key, head over to the Settings section then click “Manage API Keys”.
Create API Key - In reference Image
You can then generate an API key to use with home assistant. You can choose how long this API key will be valid for. You can use the same API key for all of the devices you want to add to Home assistant.
Keep in mind currently the api keys give access to a decent chunk of StreamShuttles abilities. In the future the permissions system will allow you to limit keys to just a certain portion of the system.
Then head over to the Devices section in StreamShuttle, find the camera you want to add and note it’s ID.
Grab Device ID - In reference Image
The URL to use in the Webpage card will should match the following format
https://{streamshuttle_host}:{streamshuttle_port}/stream/monitor/image/{device_id}?apiKey={api_key}
Assuming StreamShuttle and Home Assistant are on the same home network. You should be able to just utilze the “Local Access URL” found in the StreamShuttle control panel. This will provide the {streamshuttle_host} and {streamshuttle_port} variables in the url.
Lastly you just need to replace the {api_key} and {device_id} variables with the API Key we created and the device id we made note of.
The following url will look something LIKE the following
https://192.168.1.100:8080/stream/monitor/image/5?apiKey=eyJhbGciOiJIUzI1NiIsInR5cCI6ImFjY2V.......
Simply copy your newly formatted URL into the Webpage card and you should be good to go!
depending on the camera dimension you may need to tweak the Aspect Ratio field in the Webpage card so it’s fully visible
Home Assistant - Dashboard after adding devices - in reference image
Reference Image
There are few variations of the url that can be used. Regardless of which URL you use Home Assistance’s performance will not be impacted as these feeds are handled directly by StreamShuttle. However there are limits from the actual clients viewing. If you have 1 or 2 cameras you may opt to use the Full Quality Live streams but having too many videos running at a time may tax your web browser. You should be able to run MANY small jpeg feeds without any noticeable performance difference.
- Small jpeg feed - https://{streamshuttle_host}:{streamshuttle_port}/stream/monitor/image/{device_id}?apiKey={api_key}
- Large jpeg feed - https://{streamshuttle_host}:{streamshuttle_port}/stream/monitor/image/{device_id}?size=large&apiKey={api_key}
- Full Quality live video (usually a few seconds behind) - https://{streamshuttle_host}:{streamshuttle_port}/stream/monitor/video/{device_id}?apiKey={api_key}
This is just the first “integration” I wanted to make sure existed for Home Assistant. Despite not being fully documented yet StreamShuttle already has both rest and websocket clients that will make additional features just as easy to add.
- realtime alerts
- ability to use ptz and two-way audio from directly within home assistant
If there is anyone interested in adding any additional features before we get around to it feel free to let me know and I can help letting you know where / how would be best to tie-in to StreamShuttle.
If you have any questions just ask, thanks for reading!
Josh
As a new user I could only add a single image that’s what “reference image” refers to.