@evroom said in [MMM-RTSPStream] - Video Streaming from Live Feeds & Security Cameras:
I guess the MMM-RTSPStream.css is a place to start
@evroom – First of all welcome to the community.
You should be able to do what you’re asking by manipulating the CSS (or another way I’ll mention below).
For CSS:
First, you should put all customizations in the ~/MagicMirror/css/custom.css file so they don’t get overwritten by any module or MagicMirror updates.
Try adding this to custom.css:
.MMM-RTSPStream .innerWrapper {
float: left;
}
Without float (original):
With float (and reducing the size of the other two streams by half and the moduleWidth settings in my config):
Background if needed for further changes: the MMM-RSTPStream draws all of the streams inside of a single, outerdiv with the "MMM-RTSPStream wrapper" classes. Each stream consists of an "MMM-RTSPStream innerWrapper"-classed div block which contains all the controls, canvas, and screenshot for each stream. This is the tag you’ll need to manipulate to get it to do what you want. If you need to override one particular stream’s size/container, you can reference it in CSS by using it’s ID, which ends in the stream number. For example, something like this:
#iw_stream1 {
width: 123px;
}
Additional option If you’re using Raspberry Pi directly attached to the monitor and using OMXPlayer to play the streams, you can also turn off the borders and send exact sizes and locations for each stream on the monitor using the absPosition parameter. See the README on GitHub for more details. This will break any thumbnail or remote playback, though.
