VR View Web and iOS - google-vr

In the VRView web documentation there is the following statement in the known issues section;
360° images will have incorrect orientation in iOS Safari if you explicitly declare your iframe (instead of using the JavaScript API) and the code and images are hosted on different servers.
However as far as I am aware I am not using the iFrame mode of operation, but instead using the .JS method in the examples, however the video is still at 90 degrees when the phone is put into VR Mode.... I can sort of live with the image not quite in full screen mode, but not with the orientation.
Alternatively is there a way to 'self-host' the VR View package, on a Hosting platform, so that the iFrame method of calling the video works?
<iframe src="/vrview/src/embed?video=injected1.mp4&is_stereo=false"></iframe>
Doesnt work as it says Forbidden - You don't have permission to access /vrview/src/embed/ on this server.
Any help gretefully received

Related

Properly handling embedded images in Xamarin.Forms while using Live Player

Building and deploying on the real device takes ages. Xamarin Live Player is great and handy, but has some harsh limitations. I want to use the embedded images approach, that is working when the solution is built and deployed but falls into those limitations of the Live Player, and I am getting such exceptions:
[LogEntry: Time=2018. 05. 04. 9:42:31 +02:00, Level=Error, Title=Visualization Error, Message=Object of type 'NInterpret.InterpretedObject' doesn't match target type 'Xamarin.Forms.Xaml.IMarkupExtension' (TargetException)]
Is there any simple workaround to make the application show in Player? I could happily live with not showing the image at all (or at best showing a placeholder instead) when using Player and have the image shown as expected when using the regular flow.

Locating the url of every CSS-background image called by a web page

I have WordPress page whose theme seems to be loading an undesirable CSS background-image. I want to try to locate the code that is responsible for loading this image but first I have to find its name. I was wondering if there is some tool that allows coders to list and identify the urls of all css-background images that a page calls.
Obviously finding background-images is trivial if all of the page's CSS is controlled only by inline code and directly linked CSS-stylesheets: a text search "find" operation for "background-image" will allow you to find all bg images. But the task becomes complicated if styling is js dependent, and in this case, it was at times.
For those of you who immediately wonder why I need would want to go this route instead of simply using development tools in Chrome or Firefox, below is a list of reasons why.
Why I want a way to automatically extract the background-image urls:
The unwanted ghost images only loads on my mobile phone, so I can't inspect the element to find the image in using my desktop development environment. This is true even if I set the developer tools to "mobile".
I don't have a development environment for my phone that will let me inspect the relevant element.
I tried downloading the exact html loaded by the mobile phone in my browser, but the css ghost image will not appear on my desktop even when use the code my phone had loaded.
The ghost image is not from a virus in my mobile phone browser, because the ghost image loads on my phone even when I used a different browser.
Any help will be greatly appreciated!
Thanks
UPDATE: I figured out the cause of the ghost image using the free trial provided by Browserstack, a mobile emulator. At allows you to view interactive content and inspect it with dev tools. I learned about it from this question: test mobile website in desktop browser.
My problem turned out to be that the css-image in the theme was pointing to my local address, which different from what it should have been on my remote server. The issue turned out not to be a desktop vs. mobile problem, but rather local vs. remote. The emulator reproduced my issue, and it allowed me to inspect and find the problematic code. Still I would love to know if there is a such a css-crawling tool, so I will leave this question open.

Mobile devices displaying different widths from same domain

So, as you can see from the screenshot I am loading the same website from the same domain on my Galaxy S2.
The website on the top is the static html file that was created during initial development and has a url of the following domain.testdomain.com/template/index.html. It works correctly on all devices when viewed on the device itself and in the Google Chrome Dev Tools Emulator.
I then moved the site from the static HTML to our CMS framework with a url of the following: domain.testdoamin.com, and it works fine on the desktop and the tablet, but the phone (any device) does not work properly.
The phone widths are being reported differently from the two sites. The static html displays a width of 320 pixels, which causes the correct media query to kick in. The CMS framework site reports a device with of 980 pixels which causes the media query to not kick in.
I am using this simple JS to find the widths:
$(document).ready(function(e) {
$(window).resize(function(e) {
$('#width').text("innerWdth: " + $(window).innerWidth() );
});
});
I do not understand why the same device reports different widths from different urls. I am loading the style sheets in the same order on both sites. Unfortunately I am not able to grant anyone direct access to the domains as they are restricted behind a firewall.
If there is more information that is needed please let me know and I will be happy to furnish as much information as I can.
I am using Foundation 5 as a framework.

YouTube iframe for Windows 8 app

So I'm using YouTube's iframes in order to show some videos in my app. The thing is I cannot make the videos fullscreen.
I'm using this code:
<iframe width="560" height="315" src="http://www.youtube.com/embed/RnYcPJTtV1A" frameborder="0" allowfullscreen></iframe>
If you write that on a single html file the browser (all of them) will show you the fullscreen button on the far right. But, that same code on a Win8 app (html of course) will display the video but will not show the fullscreen button.
Do you thing that's what YouTube (google) wants? I mean, should I be doing anything different?
Regards
Sebastian,
Something to keep in mind is that iframe within a Windows Store app is designed for limited use only. The certification requirement 2.4 states:
The primary experiences your app provides must take place within the
app
One needs to be very careful about including content from sites you do not control via iframe in a Windows Store app, because this content can change without warning in ways that may break your app or introduce unexpected behavior.
Because YouTube videos may use either Flash or HTML5 for playback, you may find that some videos simply will not play in the context of a Windows Store app, because ActiveX controls are not available in that context.
Given all that, I would not expect to be able to play full-screen video embedding YouTube videos via iframe in a Windows Store app.

Adobe Air Browser

Im trying to implement a mini browser in adobe air. The browser should work in the same ways as a mobile phone browser, i.e. fit the width of the website to a certain width(specified within the html component) and leave the height to be scrollable.
I have managed to do a mini browser by using the scaleX,scaleY properties of the mx:HTML component however these make the websites look unreadable.
I have also tried setting the css3 zoom property, and that works fine, but it only zooms out certain elements, therefore messing up the site layout.
My question is: Is there a way to make a mini web browser which shows the full content of the website?
Thanks for your help
Air browser cannot be scaled without have an horrible look (no anti-aliasing).
A few years later but here is what I ended up doing:
The requirement was to show the full website that person B was looking at so that person A could guide them through the site. Due to all the limitations of the Adobe AIR Browser we ended up using IECapt (http://iecapt.sourceforge.net/) within an external process to capture the screenshot and send it back to AIR.
This is all well and good, but IECapt is quite out of date as well so recently we have started to look at the using Chromium (http://www.magpcss.net/cef_downloads/) as an ANE within our application and with that we can alter the zoom and dimensions of the page while still being able to keep it up-to-date.

Resources