AVFoundation CoreMedaIO virtual camera not being detected in browser - macos

I have been testing the Apple CoreMediaIO sample camera on Mac OS X 10.9 Mavericks.
Locally the applications i have tried could detect and recognize the sample camera automatically (like Skype, AVRecorder - Apple's AVFoundation capture API sample)
In Mozilla Firefox and Opera browsers the camera has been detected automatically on the Flash Player based sites that i have checked (for example Adobe's Cirrus sample), although in Safari and Chrome the sample camera was missing from the video input devices list.
How could i make these browsers recognize the CoreMediaIO sample camera on such a website?

Safari:
The problem causing this to happen is that on Mavericks the current Safari uses a sandboxed Flash Player which refuses to detect the sample camera.
You can solve this by allowing sites to run Flash Player in unsafe mode: (make sure you have allowed the website to use your cameras on the Flash Player pop-up window)
Go to Safari/Preferences.
Go to the Security page.
Click Manage Website Settings.
On the left pane select Adobe Flash Player.
Select the website you have allowed to use the camera and want to use the camera with.
Click on the combobox.
Select Run in Unsafe Mode.
On the pop-up window choose Trust.
Refresh the website.
From now on, Safari can detect the sample camera on the specific website.
I could not find a better/all-around solution yet.
Chrome:
This problem is mainly based on the Mac OS X AVFoundation API being disabled by default in the current Chrome (the CoreMediaIO sample uses it).
There are various methods to make Chrome detect the sample camera.
So far my best solution is the following:
Open a new tab in chrome.
Go to chrome://flags.
Search for "Enable use of Mac OS X AVFoundation APIs, instead of QTKit, Mac" entry.
Set the above-mentioned entry to Enabled.
Relaunch Chrome.
As far as i could get, the key AVFoundation flag's internal ID is IDS_FLAGS_DISABLE_AVFOUNDATION_NAME.
As long as you try to use AVFoundation based things in Chrome (OS X Mavericks) you will probably need this. (I don't really know why the default value is disabled, but i hope they will change it as Apple tends to deprecate QTKit.)
Other solutions that i prefer less:
Disabling Pepper Flash (PPAPI) and using NPAPI Flash Player instead.
Open a new tab in chrome.
Go to chrome://plugins.
Hit the plus (+) sign in the upper right corner next to Details.
Search for the Adobe Flash Player plugin section.
Locate the Pepper Flash version (PPAPI type).
Click Disable.
Refresh the website.
Google intends to deprecate NPAPI Flash Player soon, which leaves the Pepper Flash (PPAPI) as the only alternative, that was the reason to try and find a better solution than this. I don't recommend to rely on this solution considering the future of NPAPI Flash Player.
There is another temporary solution involving Mozilla Firefox. I don't know why exactly this works and i think this might easily change in the future, but i tried and verified that it works at the moment:
Close Chrome entirely (Chrome/Quit Google Chrome or Command+Q).
Start Firefox.
Go to the website you would like to use the camera with (any Flash Player based site works that calls for camera list).
Open Chrome.
Close Firefox.
Go to the website in Chrome.
If you close Chrome you will have to redo the process from Step #2. It seems like Firefox initializes something that makes the Chrome startup different and causes it to detect the sample camera. I don't recommend to rely on this though.

Related

How to detect if Safari power saver mode is enabled?

I'm experiencing issues with the YouTube player failing to load when the power save mode is enabled in Safari 6.1 and 7 on OSX. The issue doesn't happen if the youtube user is using the experimental HTML5 player, but it's still in beta and most people are still using the Flash player. The "disable plugins to save power" option is on by default in most new versions of Safari and this causes the YouTube iFrame API to enter an endless loop as it tries to initialize the player.
Is there any attribute on the window or navigator objects that would possibly indicate that the power save mode is enabled so that I can warn users?
This issue is semi-intentional. The Power Saver mode in Safari deliberately stops flash content. You can read more about it in this article.
If the flash content is 'front and centre' (within a 3000 x 3000 pixel boundary starting at the top left corner of the document) it should still play. So it may help, if the youtube video is off to the side of the page, to try and centre it. Apple says content will not play if it is in the margins (see this page under the Safari Power Saver heading).
Well i do not think there is any readable JS property to know that,
if so Apple would have a flawed design, and the Safari Users would get nagged to disable that mode, in order to have the web site working "properly" ...
What you could do of course is to try to make a server call on your web site via flash, and then try to read the changed session variable via JavaScript, then you would know ...

browser add-on to test mobile design

Are there any add-ons to test an HTML page to see what it will look like on a mobile device? I'm developing with PhoneGap but Eclipse emulator is too slow to refresh it all the time so I want to have a browser extension that make screen resolution like on mobile.
If you care only about the screen size, Firefox 15 (currently Beta, release coming up in two weeks) has Responsive Design View in the Web Developer menu that allows you to adjust "screen size". For example, you can select 360x640 (nHD resolution) and have a look at your page.
However, mobile browsers do custom adjustments to web pages and these adjustments depend on the browser used. For example, Firefox Mobile does something called Font Inflation. You cannot reproduce it in a desktop browser, you have to actually run Firefox Mobile for that. The problem: mobile browsers will only run on mobiles, even Mozilla stopped supplying Firefox Mobile for the desktop after they switched to the native Android UI.
Edit: Starting with Firefox 33, there is a Firefox OS simulator built into Firefox (thanks to Tomek for pointing me into this direction). To start it, open WebIDE, then click "Select Runtime" and choose "Firefox OS 1.3." This will start the simulator, all you need to do then is clicking the Firefox icon (for me it's a blue one, not the usual orange). There you are, you can test any website in a real mobile browser, right on your desktop.
Firefox OS simulator can do the trick: Just install it. Run it - and run the browser inside. :)

Possible to turn on logging / debugging, or otherwise solve a streaming issue in Flash?

I know virtually nothing about Flash so I'm kind of casting about in the dark.
I have the misfortune of being a BT customer, and whilst I have reasonable bandwidth (can view streaming high res video fine) I always have problems listening to radio programmes from the BBC. I think it could be buffering due to traffic shaping, or it could be the Flash applet used to play the content, or something else.
Is it possible to bring up some kind of debugging console, or view some kind of error log to see if there is some diagnostic information that could be useful in finding the problem?
Chrome/Firefox/Safari using Adobe Flash player 10.2.159 on Mac OS X 10.6
EDIT: In the debug Flash player the 'debug' option is greyed out, suggesting that the swf was compiled without debug symbols. This was created by a third party (BBC) not me.
You could install the debug Flash Player, so you should see if an error occurs (a popup will appear on the screen) during the streaming.flash player debugger download
You should also disable flash player plugin and turn on debugger. If you're using Chrome type chrome://plugins the disable flash player and enable Adobe Shockwave for Director Netscape plug-in.

Set Minimum width to 320px on Mac OSX

Is it possible to set a min width for an OSX window to 320px?
The default min width in Safari is greater than this which makes it difficult to program with media queries and replicate on OSX. Please see my screenshot, which will make things clearer.
Incidentally if you are going to post techy answers (I assume someone will) please bear in mind I have no experience with backend code, the most I know is CSS / PHP / JS.
I don't mind getting my hands dirty, but the instructions need to be verbose :-)
Taken from This Link - worked for me in both chrome and safari on OS X
var location = 'http://www.my-app-address.com'
javascript:open(location,'iPhone:portrait','innerWidth='+(320+15)+',innerHeight='+(480+15)+',scrollbars=yes');
and for landscape:
javascript:open(location,'iPhone:landscape','innerWidth='+(480+15)+',innerHeight='+(320+15)+',scrollbars=yes');
In Safari, you can install an extension called 'Resizer' and you have the option of putting in custom sizes.
The funny thing is, once you use Resizer to change the window size, it can then be resized by hand to any size you want. It is almost like using Resizer unlocks the window.
I've created a chrome extension,OSX Resizer, that makes a 320px pop-up of the current window.
Basically the same as Rubinsh's solution, but code free.
The Resizer extension that drummin mentions does not provide this behavior for me.
This can be emulated through Chrome Dev Tools now.
Open Inspector, click the gear on the bottom right, and goto the 'Overrides' tab.
You can even spoof your user agent :)
If your goal is to see how sites will look on an iPhone, you can always download Xcode for free from the Mac App Store, which includes the iOS Simulator.
Alternatively, if you have an iPhone (I assume you do if you're developing sites for it), iOS 6 includes a remote debugging feature that lets you use the Web Inspector on your Mac to inspect and edit a site loaded on your iPhone.

iPad - Test an HTML5 site on a Win7 PC

I'm looking to target a website specifically for an iPad but we don't have any Macs in house for testing. What's the most accurate way to test the site on a PC? I image I could use the Safari browser and shrink the window down to approximate the iPad screen size but I wonder if there's a better method out there.
If you target a website specifically for a particular device, buy that particular device. This doesn't only apply to iPad.
Two caveats I noticed a lot of websites have for a touch-oriented device like an iPad, iPhone:
The mouse-hover event isn't generated. So, the HTML/CSS/Javascript menu structure which works without clicking on a WebKit browser (like Safari) on a mouse-oriented device might stop working completely.
The scrolling event (coming from a flick of a finger) is not passed to elements inside a page; instead it just scrolls the entire page. A subelement shown with a scroll bar on a non-touch-oriented device might be shown without the scroll bar at all. So, sometimes you lose the ability to scroll inside a subelement.
There might be other caveats. It's really difficult to imagine all the way a device might behave differently from a mouse-oriented device; so, buy an iPad.
By the way, it's of no use to buy a Mac in this situation: Safari on a Mac still behaves (as far as the mouse/touch events are concerned) rather differently from Safari on an iPad/iPhone. An iPad can be paired with a Windows PC.
See this Apple document for a few advices for preparing a web page for the iPad.
I'd just use Safari, as the mobile version uses the same rendering engine (though possibly modified to fit the iPads resources).
It should display the same, if not close.
You can try to use online imitation services.
For example http://app.crossbrowsertesting.com/, or https://saucelabs.com/. They provide lots of imitations environments, for different devices and OS. You can test the site, that is already in the web, or your local files.
I myself am working currently with app.crossbrowsertesting.com for the first time. It really shows the problem, that the client encountered on his iPad. Also have good notices about these services from experienced developer, a friend of mine.

Resources