Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Zoom/scale issue with the omxplayer #16

Closed
dominik-polic opened this issue Oct 16, 2017 · 7 comments
Closed

Zoom/scale issue with the omxplayer #16

dominik-polic opened this issue Oct 16, 2017 · 7 comments

Comments

@dominik-polic
Copy link

Hi,

I've noticed that if you set a certain zoom factor in MagicMirror config.js, the white square (of this module) where the video should be displayed shrinks (or expands), but the omxplayer video stays the samze size, making it impossible to overlay the video (omxplayer overlay) over the white square. Is there a way to multiply the size of the omx stream by this zoom factor before starting it so it will fit?

Thanks in advance.

@shbatm
Copy link
Owner

shbatm commented Oct 18, 2017

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 },

@dominik-polic
Copy link
Author

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

@shbatm
Copy link
Owner

shbatm commented Oct 19, 2017

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.

@dominik-polic
Copy link
Author

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.

@shbatm
Copy link
Owner

shbatm commented Oct 20, 2017

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;
    }

@shbatm
Copy link
Owner

shbatm commented Oct 20, 2017

  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;
}

@dominik-polic
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants