Git Product home page Git Product logo

Comments (7)

shbatm avatar shbatm commented on June 22, 2024

I'll have to come up with a fix for this in the future, but in the meantime an alternative is to watch the console log for the parameters used:

Starting stream stream1 with args: [
    "--avdict",
    "rtsp_transport:tcp",
    "--win",
    "731, 439, 1259, 799",  # --- this is the position it tries to draw the video
    ...

And then add the following inside the stream1: { section to specify the exact position you want the video to show using the numbers from the log and your desired adjustment/zoom:

absPosition: { top: XX, right: XX, bottom: XX, left: XX },

from mmm-rtspstream.

dominik-polic avatar dominik-polic commented on June 22, 2024

Ok, first of all, sorry for closing/opening this issue, I accidently pressed the button.

Anyway, I've actually tried this, but whatever values I use the video starts in fullscreen mode if I add absPosition to the config list. That said, I can't guarantee I haven't messed up the parameter order which might have confused the omxplayer making it fullscreen, so I will have to try a few more combinations. Also, does the absPosition affect the omx windows exclusively, or does it have influence on thw white square drawn on the display as well?
Best regards

from mmm-rtspstream.

shbatm avatar shbatm commented on June 22, 2024

Interesting. Can you share the config line you're trying to use? Make sure the numbers are not in quotes. The setting should affect the OMX window only -- I was suggesting to manually figure out the size of the box and send those parameters to OMX with the absPosition tag since for some reason the automatic function to do this is not working. If you run the magic mirror with npm start dev it will open the DevTools window and you can use the following command on the console: document.getElementById("canvas_stream1").getBoundingClientRect() to get the actual position of the box.

from mmm-rtspstream.

dominik-polic avatar dominik-polic commented on June 22, 2024

Ok, here is the latest config I'm trying to use:

{
	module: "MMM-RTSPStream",
	position: "bottom_right",
	config: {
		autoStart: true,
		rotateStreams: false,
		rotateStreamTimeout: 10,
		moduleWidth: 274,
		moduleHeight: 230,
		localPlayer: 'omxplayer',
		remotePlayer: 'none',
		showSnapWhenPaused: false,
		remoteSnaps: false,
		moduleOffset: {
			left:-280,
			top:-475,
		},
		stream1: {
			name: 'Front Camera',
			url: 'RTSP STREAM HERE',
			frameRate: 'undefined',
			width: 275,
			height: 225,
			absPosition:{
				top: 1366,
				right: 413.3333435058594,
				bottom: 1591,
				left: 138.33334350585938,
				
			},
		},
		
		
		},
		
},

Also, here is the output from the terminal when starting the mm:
Starting stream stream1 with args: [ "--avdict", "rtsp_transport:tcp", "--win", "-142, 1008, 133, 1233", "--live", "--video_queue", "4", "--fps", "30", "RTSP STREAM URL HERE" ]
and here is the output from the dev console:
ClientRect bottom: 1591 height: 225 left: 138.33334350585938 right: 413.3333435058594 top: 1366 width: 275

Also, I tried to use the parameters from the dev console to start the omxstream, but now the video is not shown on the screen at all. The pm2 process is running so maybe the video is being rendered outside of the screen? Also, my monitor resolution is 990*1440 (vertical orientation), if it helps in any way. I tried rounding the left/right parameters to integers, removing the width/height and other parameters that should be overridden by absPosition, but I just can't get the feed to display at all now, when using the absPosition. Also, is there a way to disable the white box altogether, since I can manipulate the size and the position of the stream with moduleoffset and size, and for my application where the stream is running 24/7 I don't need the box at all, so removing it/making it invisible would be a good option in my case.

P.S. Sorry for my bad English and thank you for helping me with this issue so quickly.

from mmm-rtspstream.

shbatm avatar shbatm commented on June 22, 2024

Here's what I've found:

  1. Your syntax appears to be correct.
  2. The position MUST be whole integers, OMX does not like decimals.
  3. The "zoomed" position reported by JavaScript is outside of your monitor's resolution (1591 > 1440). It looks like when zoomed, it is no longer a 1:1 ratio for Javascript "pixels" to your monitor's physical pixels.
    • You should try playing with the numbers yourself to come up with where you want the video relative to your monitor: for example to put the video in the bottom left corner (with 60 pixel margin):
       	absPosition:{
       		top: 1150,
       		right: 334,
       		bottom: 1380,
       		left: 60,
       	},
  4. To turn off the box completely, add the following in your ~/MagicMirror/css/custom.css file:
    .MMM-RTSPStream {
    	display:none !important;
    }

from mmm-rtspstream.

shbatm avatar shbatm commented on June 22, 2024
  1. cont'd -- if you want to just turn off the border but want to leave the "box" hidden in place (to help make sure other modules don't get behind the video) you can try adding the following in your css/custom.css file:
.MMM-RTSPStream .innerWrapper {
  border-style:none !important;
}

from mmm-rtspstream.

dominik-polic avatar dominik-polic commented on June 22, 2024

Ok, I've benn able to hide the box by adding .MMM-RTSPStream .innerWrapper { border-style:none !important; }
to the css/custom.css file. Also, I've actually tried with integers as well, and here I just pasted the numbers I copied from the dev console, it made no difference.

Anyway, since I can now hide the box and position the stream where I want it, I'm closing this issue.

from mmm-rtspstream.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.