I have a media element with a source from ip camera. I want the content to be rotated 90 degrees and fill the whole screen of a phone. I do not want to turn on auto rotation on the phone. Is there any way to force media element to rotate and fill the screen properly?
Yes. The default IPCameraDetails.xaml file already does this. I suggest you create a new test project or reset the app & add your IP camera to it. This way you can see it in action & verify it behaves as you wish. Then you can look at incorporating what’s being done with those pages into your very own design.
Thanks for the reply,
I’m on the latest app version (3.15.0.0) and on the latest version of the home remote designer, but rotation still doesn’t work as expected. By default IPCameraDetails.xaml opens picture full screen, but it is not rotated, so screen is not filled and has large empty space and the top and bottom. If I edit IPCameraDetails.xaml file and enter 90 rotation in the grid or mediaelement, it doesn’t rotate properly. No matter what I tried, I couldn’t get feed to rotate unless I turn on auto rotation in device settings and turn the screen 90 degrees.
There will be empty spaces when in portrait mode most likely because most video streams have aspect ratios like 16:9 or 4:3. They are larger in width than height.
Are you wanting it to crop the picture? Wouldn’t you rather see the whole picture?
If you want it to hide all black parts on the sides, set the Stretch property to UniformToFill or Fill.
I myself prefer to see the whole picture which is why I default that value to Uniform in the templates.
Basically I want to rotate the picture to get the landscape view in the app while phone in still locked in the portrait mode.
You have your phone locked to portrait mode?
The app can’t possibly adjust if you are locked in portrait mode. No app can do that.
Why don’t you want to turn on your phone’s “Auto Rotate” option?
Yes, I lock my phone to portrait mode. Auto/landscape mode only unlocks for specific apps. I do not like keeping phone in auto mode and I don’t like home remote in auto because it rotates elements that I don’t want rotated (for example when using app laying down). I was hoping to get the landscape view only when I want it. I was able to get what I wanted in emulator on PC by placing media element into canvas and 90 rotation (I guess ffmpeg stream was rotated), but when using the same setup on the phone it didn’t work.
OK, I see. So you want to lock screen orientation for only certain pages. Yeah, currently if you want to use Auto Rotate you’ll need to use that on every page.
If you do decide to enable auto rotation then you will have to make some changes. Canvas elements will not work well with rotation. Everything in Canvas layouts use Absolute positions.
I don’t really need Auto rotate for specific pages. All I really want is to turn the video 90 degrees while phone is locked in portrait mode. I was hoping that by putting 90 in rotation property of the media element (or grid/canvas) I would be able to get the video stream rotated by 90 degrees and scaled to fit max height/width, but it doesn’t work as expected. I thought maybe there is a solution to this.
When the phone is locked to portrait mode, this will not happen automatically. What you could do is add a button which resizes & adjust the control.
To do this, you’ll need to assign a Name to your MediaElement control. You can Name it MediaElement if you want. Then in your Button’s Actions, add Property Setter / PropertyAction to update the size of the control. For the TargetName on these Actions, select your MediaElement control from the drop-down. The the Property drop-downs will update to show all of the available Properties that can be changed during runtime. You should find Width & Height in that list.
…nevermind, I see it is going to be more than just a simple resizing. Yes, you will need to rotate the control 90 degrees too since your phone is its orientation locked.
You can use the Rotation property on the control, but unfortunately that can be a little unpredictable because it also tends to shift the location. It’s going to be a handful of properties you will be updating: Rotation, Canvas.Top, Canvas.Left, Width, & Height. You can get this to work but finding the magical set of values for all 5 of those properties will take a lot of trial & error. And with this, I don’t know if the simulator will be an adequate test either. You’ll need to be testing on your actual device.
The issue is that no matter what I do I can’t get video stream rotated on the phone at all.
In my video stream there is a time stamp that is displayed in the top right corner. By entering 90 in the rotation and playing with the top, left, width, height I can get picture rotated and looking exactly right. Time stamp ends up in the bottom right corner (rotation applied). When I save HRP and restore on the phone, the position of the video is off (not a big deal at all), but the issue is that video stream itself is not rotated. It is still in the original orientation with time stamp in the top right corner.
It looks like rotation properly applies in the simulator, but it doesn’t apply at all on the phone.
What type of a video stream is this? Is it HTTP or RTSP? RTSP is using native video rendering tools I suspect you may have this issue with those.
Yes, it is RTSP steam. So there is no way to rotate it on the phone?
I don’t know. I suspect not. We are using the system’s libraries to decode & render those frames. It may be ignoring the rotation request since your phone is locked into portrait mode.
Does your camera support MJPEG or JPEG snapshots? Can you try using those URLs instead?
Camera supports snapshots and http stream, but in that case I get a very slow framerame.