I have a button and once clicked, video on webpage will be shown in full screen mode. It work perfectly fine.
I have a requirement when the video should be rotated by 270deg in full screen mode. In non full screen mode, the using style transform with rotate(270deg) is working fine. The same doesn't work in full screen mode.
Any way to achieve this? I am using chrome browser.
Related
Naturally, when you open a website in iPhone Mobile Safari in portrait and rotate it to landscape, it is going to turn "full-screen" (hide bottom-top browser bar). Then you rotate it back to portrait, it keeps the full-screen view (the bottom-top browser bar still not visible). To test, simple open Wikipedia in your iPhone (or on an iPhone Simulator) in portrait, turn it to landscape (going to be fullscreen right away), and turn it back to portrait (keeps its fullscreen view).
I need to change this behavior. I want to make sure, in portrait, the top-bottom status bars are always visible, but in landscape, my website is full-screen. (Because my HTML game is not scrollable, only this back and forth rotation is the issue.)
This game works on this way:
https://lobby.sgplayfun.com/touch/spadenew/20190115P/games/triplepanda/index.jsp?game=S-TP02&language=en_US
Open this game in portrait Safari on an iPhone (or on an iPhone Simulator), turn it to landscape (going to be full-screen) then turn it back to portrait, and the top browser bar is going to appear ???
How can I achieve the same, how does this Panda game do this?
Things I tried
Copy the < meta viewport > tag from Panda, did not work.
look for what does the "ioshack" and "iPhoneX" HTML class do - not helped
google all around, even check Chinese forums and pixiJS forums (that Panda game is a pixiJS app), did not found any useful.
After more investigation, I found the following truth at least on iOS 9-12:
Safari does not keep the full-screen view in portrait mode if the body is not scrollable, meaning the content fits the default view where the top and bottom bar is visible (they will automatically appear in this case when you rotates your phone)
Safari does keep the full-screen view in portrait mode if you use height:100vh on your or tag (instead of e.g 100%)
So, changing the body style to "height: 100%" AND making sure there is no div longer than the body was enough to force Safari avoiding full-screen mode in portrait.
I'm trying to create a button that allows me to set the mobile screen orientation from portrait to landscape when the button is clicked.
How can I do that, without actually rotate the device?
You should use Screen.orientation API for this purpose.
An important point to note is, before using screen.orientation.lock('landscape') you first need to enable fullscreen mode on your device with document.documentElement.requestFullscreen().
Regarding Uncaught (in promise) DOMException: screen.orientation.lock() is not available on this device. This is not supported by your browser. Try running on your phone's browser it should work. It worked for me.
Please look into this example it perfectly matches your need. With this you can change orientation from portrait to landscape and back without actually rotating your phone.
I've been working on a little page that will work just for doing photos from your webcam and making them downloadable. Everything was okey, I connected the webcam with a video element, and took "screenshot" of a frame and put it with the size I wanted in a canvas element.
The problem is that I wanted to make the photo and the video to look like if they were a mirror. For the video and the canvas element there was no problem, since this CSS code inverts the image perfectly:
-moz-transform: scaleX(-1); /* Firefox */
-o-transform: scaleX(-1); /* Opera */
-webkit-transform: scaleX(-1); /* Chrome y Safari */
transform: scaleX(-1); /* w3org */
filter: FlipH; /* Internet Explorer */
The problem is that when I convert the canvas to a .png file so the user can download it, the CSS rules set are not respected, so it looks weird that the image is the opposite that it was on video preview.
I can invert it with the same code on browser, but of course that won't change the file that user would download...
So, there's any way to make them to respect the CSS rules? Or at least to invert the image before I create it...?
Update:
The video I'm playing is took from webcam, you must hit that button that says "START VIDEO". Anyway, on fiddle the html stuff doesn't fit. And yes, the default camera icon on right will be replaced once the user takes the first picture. Once the video starts, there will be three rectangles, from the left the first will be the video preview, the second one is the canvas element and the last one is the image file generated. Everything was tested and working well under a LAMP local setup on Ubuntu 13 and Chromium browser.
Here is my Fiddle
P.D: This is my index.html
Initially it's showing fine when watching the page in portrait mode and it's fine when changing orientation from portrait to landscape but while changing from landscape to portrait, the web page goes in zoom-in mode and doesn't show the complete page anymore. For this I am using:
width=device-width, minimum-width=768px, maximum-width=1024, initial-scale=0.75, minimum-scale=0.25, maximum-scale=2.0
Any solution regarding same?
You'll need to use maximum-scale=1.0.
If you want to be able to zoom the page manually there's a workaround with JS: How do I reset the scale/zoom of a web app on an orientation change on the iPhone?
galleria javascript crops top and base of images when viewing in Firefox Chrome and IE
However in Safari this issue does not exist.
Please see the issue here
http://galleria.aino.se/media/galleria/src/themes/fullscreen/fullscreen-demo.html
no compare the squirrel image with its original
right click on any image and you will see how the script is not displaying the the full image.
We are using galleria. js full screen for a wordpress theme and all our images are the same size so there is no height issue the images we will use are 1600x900
If any one can help please advise. We need to display the entire image.
Thanks all.
I believe that's how galleria is supposed to behave. In full screen mode it fills the screen, so it will crop the top or sides, whichever extends beyond the aspect ratio of the browser window.
In full-screen mode, if you have a wide browser window, it'll crop the top/bottom. If you resize the browser window to portrait orientation, it'll crop the left/right.
You can control this behavior using the image_crop option.
F.ex if you want the image to always fit, set this to false.
Try to set in your css:
.galleria-image img {max-width:6000px !important;}
this works for me, I think there is some trouble in Safari with the attribute max-width of the image. You could use this simple trick or improve this technique adding some conditional css, so for example setting max-width to a specific value only when option "imageCrop" of galleria is set to true. Let me know if this works also for you!