I have some simple webRTC code which uses getUserMedia to gain access to user's mic. Now when I load that html file (saved at my localhost) in my browser, the browser doesn't ask for mic access permission and thus get failed to get access.
But when I run the same html inside the w3schools.com editor, it asks for mic access permission and upon allowing it to access my mic, it works fine...
Why is this strange behaviour?
When you open an html file right off the filesystem (file:// prefix), Chrome will auto-block getUserMedia permissions. You have to run a server locally.
I started up a sinatra server like this:
# server.rb
require 'sinatra'
get '/' do
File.read('index.html')
end
Then give it ago.
$ gem install sinatra
$ ruby server.rb
http://localhost:4567
Because of security Chrome won't open user media, e.g. WebCam when executing a file:/* document.
You could override however the security policy by starting chrome with the --disable-web-security command line option.
For testing check also the --use-fake-device-for-media-stream option.
N.B. When specifying command line options make sure there is no chrome/chromium process running.
P.S Give it a try by creating a file test.html containing
<!DOCTYPE HTML>
<video autoplay/>
<script>
navigator.webkitGetUserMedia({audio:true,video:true},
function(stream){
document.querySelector('video').src =
URL.createObjectURL(stream);
});
</script>
and than kill all chrome instances and start chrome like this:
chrome.exe --use-fake-device-for-media-stream --disable-web-security test.html
This behavior is caused by Chrome security settings.
If you have PHP installed and you don't wanna setup Apache or other more advanced web server, probably the easiest way would be to run internal PHP web server this way (assuming you have your web files in /home/user/web/):
php -S 127.0.0.1:3000 -t /home/user/web/
Here is a description of the parameters:
-S <addr>:<port> Run with built-in web server.
-t <docroot> Specify document root <docroot> for built-in web server.
After you run the server start your browser and open this URL (assuming your test file is called webrtc.html):
http://127.0.0.1:3000/webrtc.html
Just some troubleshooting suggestions:
Check chrome://settings/content (scroll down to "Media"), to see if you've accidentally selected that site to always allow or always deny. (I'm on Chrome 26[dev]; this may be located somewhere else on Chrome 24.)
Also try restarting your browser - this bit of Chrome is still pretty buggy in my experience, and sometimes a restart fixes it.
And make sure you've got an error handler in your getUserMedia() call - there may be some additional info there.
Are you loading the file via something like file://? It seems chromium does not give access to those files at all and completely ignores the request. Just tried myself and after uploading the file to a dev server it worked fine.
Even setting it to allow always it still does not work with file://.
You can't run HTML5 that uses getUsermedia API locally without using a local server. Use WampServer and place your HTML5 file inside the www folder.
This answer is for chrome
In Chrome you can use the --allow-file-access-from-files flag to allow webcam access from a local file.
Mac
On a mac you can open the terminal and type:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files /path/to/file.html
change /path/to/file.html with your path
Windows
In Windows you can create a shortcut. Right click Google Chrome And in the menu select: Copy To -> Desktop (shortcut), then right click the shortcut and click properties add the flag:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files C:\path\to\file.html
Hope this answer helps!
Related
I wrote an application using the HTML5 Cache Manifest and I'm having a problem using it in IE 10.
I used Fiddler to witness the manifest file being downloaded and all resources fetched on the initial load of the application. If I disable my network adapter to force the machine offline, the application continues to work as expected as long as I don't close the browser window.
However, when I close the browser window, then attempt to re-open the page from a favorite, IE 10 tells me "You're not connected to a network". Obviously I know that, I'm trying to use the app offline. These exact steps work in Chrome.
Is this behavior by design? Is there a workaround? I can't test with IE 11 right now...is this different in IE 11?
Hearing of some issues of the appcache clearing if your company utilizes gpo settings and has "empty temporary internet files folder when browser is closed" enabled.
Did you find the answer to this? I have the same problem. I did get a bit further though. I found that if you go to the IE10 File menu option and tick Work Offline then try and access your cached app it loads the page but I still have an issue as it does not appear to be using the javascript file that should also be cached. All works ok on Google Chrome but our clients are restricted to IE so Chrome is not an option.
I've seen a ton of games and what not opening their applications using links like "game://15.64.15.64:25876" or something.
I want to be able to launch my game's .exe from my website for users who installed it, and for it to work on any browser; At the same time I want to be able to pass a parameter (just 1).
What registry values would need to be added/modified for this to work for all browsers? If there's extra steps to setting it up in all browsers, can you explain these steps? Other questions I've found didn't quite help or worked only in IE. I require Firefox, Chrome, and IE at the least.
A similar question was asked here:
How do I make the website execute links?
You would end up with a structure like this in your registry:
HKEY_CLASSES_ROOT
game
(Default) = "URL:Game Protocol"
URL Protocol = ""
DefaultIcon
(Default) = "game.exe,1"
shell
open
command
(Default) = "C:\Games\YourGame\game.exe" "%1"
See this article on MSDN for details:
Registering an Application to a URI Scheme
As mentioned by OP, the above approach only works in IE. Here are some thoughts on how to make it work in other browsers:
Chrome: Is it possible to open custom URL scheme with Google Chrome?
Firefox: Writing a Firefox Protocol Handler
One way I can think is download a file from browser ( gamesession.gme or your extension)
and set your game as the default application for that extension.
I've done a lot of research and haven't found a definitive answer to this. Is there anyway to test the open graph on localhost? I don't haven any issues using the graph api on locahost.
I've changed my website url in the app settings and have even tried setting up a domain in my hosts file but the debugger linter for open graph tries to use the actual domain instead of my localhost and when using locahost directly the linter completely fails connecting.
Does anybody have any workarounds for this?
Using a local proxy is the right solution. ngrok didn't work for me neither.
A similar tool that did work with facebook debugger is localtunnel ✅
npm install -g localtunnel
lt --port 8000
# or using npx without installing localtunnel
npx lt --port 8000
Generates a url that looks something like https://<random_hash>.localtunnel.me/. Using this url in facebook open graph debugger worked for me as of October 18th 2017. I only had to hit Fetch new scrape information button. 🍻
Cool thing about localtunnel is that you can easily host your own localtunnel server with github.com/localtunnel/server so if it ever stops working with localtunnel.me, you can run your own somewhere in the cloud ⛅
You can use ngrok to create a random public subdomain that routes to your local webserver very easily, even through NAT or firewalls.
Just download ngrok and run ./ngrok http 8080 (assuming 8080 is your local webserver http port).
This will create a random subdomain like http://38a84a97.ngrok.io/ that routes to your local webserver and that you can use with Facebook to test your open graph tags.
Its very simple to test Open Graph in any local environment using Chrome or Firefox using plugins. I have used one to quickly show in chrome how the Open Graph looks to the viewer to test results. Here is a quote of what it does.
This extension shows how people will see your site in the most popular
social networks This extension is for professionals who creates a
media content.
To check meta-information of your site or article just open it in a
Chrome and click extension's icon. Also you could add an URL manually.
Here is a direct link to the plugin (Chrome)
Firefox add-on
As a bit simpler approach you can use a browser extension like https://socialsharepreview.com/browser-extensions - which will show your Social Cards directly in the Browser (which of course might fail, if you wrongly didn't set them serverside :))
To test open graph (and Twitter cards) I also had to expose localhost (Docker) to Facebook and Twitter. I used Serveo
It works very well for this, no need to install anything as it works with ssh port forwarding.
$ ssh -R 80:localhost:3000 serveo.net
Then navigate to the url given, and there you go.
You have to setup a public domain which points to your public ip address.
Use dynes.org or a similar service and setup your router to forward your port 80.
There are several tools you can use for serving something up over your localhost, each with varying degrees of functionality.
I prefer (obviously) http://forwardhq.com
Other great options here: http://devblog.avdi.org/2012/04/27/http-forwarding-services-for-local-facebook-development/
If anyone is looking to preview the :og tags on while developing on subdomains (using lvh.me) in localhost. You can use https://serveo.net.
Simply use following command to forward your local server requests. No installation required.
ssh -R yoursubdomain.serveo.net:80:yoursubdomain.lvh.me:3000 serveo.net
you can put your desired port in place of 3000.
Reference: https://blog.aarvy.me/2019/09/20/expose-local-apps-having-subdomains-to-web/
How would I let a running process know that a context menu has been clicked in Safari?
I've read that this is not possible due to security, but that seems wrong because 1Password somehow pulls all of the information from the desktop app's database into the Safari extension. I wrote the extension to display the context menu and was trying to send an XMLRPC request to localhost, but couldn't get it to work.
I'm not certain of this, but I think 1Password does what it does by having a background process (1PasswordAgent) constantly polling for certain changes in the extension's local database and/or config files. For example, to initially get your passwords into the extension, the extension could set a certain flag in its localStorage db, which would get written (by Safari, not by the extension) to a file. The agent would then notice the flag in the file and copy your passwords from the main 1Password database into the extension's local database. Similarly, when the extension creates a new password entry, the agent would notice the change in the extension's database and mirror it to the 1Password database.
Perhaps you could do something similar?
Although I have no idea about the implementation of 1Password, LiveReload achieves the same by using WebSocket to connect to a localhost URL (handled by the application). If you do it from the global page, cross-domain limitations do not apply, so you are free to connect to any URL:
var ws = new WebSocket("ws://localhost:98765");
...
(Be careful with that localhost thing, though, Chrome on Linux wants 0.0.0.0 instead of 127.0.0.1 or localhost. At least it used to want it.)
I want to make the browser open a local url with a name of the live url. Meaning that when I do:
sel.open('http://live-url/)
selenium will actually open the local url.
One would test this by changing it's hosts file but this is impossible when running on many machines.
ideas?
No
Selenium cannot change the hosts file as it can only interact with pages rendered inside a broswer.
You could probably set your CI server up to do something like this, but again I have to ask why. Hacking around with a site and then testing it will surely invalidate your tests?