Convert an IP camera stream into a live and embeddable web code, so it can be used in your IoT dashboards.
This plugin costs $18 per month, and works for a single IP camera. If you're looking to manage several cameras, create one plugin for each.
Requirements
An active Ubidots paid license.
An online camera streaming live video in RTSP, RTMP or MJPEG protocol, accesible from the Internet through a public link.
Check supported cameras.
1. Why converting IP camera streams to HTML?
IP camera streams are served directly by the camera's hardware, in local networks, making it hard to embed the video in external websites.
IP cameras can serve a limited number of concurrent viewers.
IP cameras come with different protocols (RTSP, RTMP, MJPEG, etc.), making it hard to decode using pure HTML/JavaScript directly from a widget.
Plugin features
This plugin creates an HTML5 video player component that can display live video image on major browsers.
Supports the following IP camera protocols: RTSP, RTMP, HTTP, ONVIF.
Supports MJPEG / MPEG4 / H.264 / H.265 video streams.
Up to 4K UHD resolution video streams.
Serve thousands of viewers simultaneously.
2. How to connect my camera?
Any camera that supports creating a public RTSP, RTMP or MJPEG stream URL will work. Here are some tutorials on how to obtain your camera URL stream for specific brands:
3. Creating an IP Camera Stream plugin
3.1. Inputs
IP camera URL: RTSP/RTSPS/RTMP/RTMPS/HTTP video stream URL. For example:
rtsp://user:pass@mydomain.com:554/h264Token: Assign an Ubidots token to your plugin.
PLEASE CHECK YOUR CAMERA URL STREAM BEFOREHAND!!
This can be done with VLC player or a similar tool. If you can't see the live video using your IP camera's public URL, then this plugin won't be able to see it either.
3.2. Outputs
A URL for your camera stream will be created and written into the description of the plugin:
Now you can use this URL, along with an HTML Canvas widget and an HTML iframe. Just use your camera alias in the following HTML iframe in your HTML Canvas widget:
<iframe src= "https://g3.ipcamlive.com/player/player.php?alias=<YOUR-CAMERA-ALIAS>" width="800px" height="600px" frameborder="0" allowfullscreen> </iframe>
NOTE: Don't forget to adjust the height of the iframe according to the **aspect ratio** of your camera!
Here's an example of the end result:
