I am using navigator.mediaDevices.enumerateDevices() to list the available devices for a call (implemented using webRTC).
I need to be able to detect when headphones are unpluged/pluged.
Any ideas how can I fix this?
Using MediaDevices.ondevicechange and enable "Experimental Web Platform features" as seen on similar answered questions.
If the currently used devices gets unplugged, the MediaStreamTrack's onended callback should fire. If that happens call enumerateDevices again.
I'm building a webapp with Dart and I've used Rikulo's Bootjack library to get some Bootstrap elements. I have two modal windows in my app.
One of them is lanunched by triggering a button so I just had to follow the examples:
https://github.com/rikulo/bootjack/tree/master/example
I want the other one to be launched only on certain situations, so I've coded the following:
Modal myWindow;
DivElement readComplete = querySelector('#readComplete');
myWindow = new Modal(readComplete);
myWindows.show();
I've notice that both windows works fine in Desktop environments, but I've not been able to run the second way on Android Devices. I've tested with Chrome, Chrome Beta and Firefox. Does anyone has an idea of what may be going on? Is this a library or device restriction or I am doing something wrong?
Thanks!
Problem solved. Sorry for the trouble guys, but finally it wasn't related with bootjack. There was a different behavior between mobile and desktop solution when calling the 'route' library to use a Websocket. That was causing the show method not to be called due to an exception, but only on the mobile version. That is why I didn't see it when debugging from dart editor.
I am about to develop an application that is to run on Windows 8.1 tablets. An important feature is to be able to click on a button to access the camera to take some pictures. Ideally I would like to create it as a Web application rather than a native application due to a number of reasons (licences, cross-platform, development time: have no experience in native apps, etc.).
I have looked at the options for capturing images from HTML 5 and have found HTML Media Capture which allows me to write:
<input type="file" accept="image/*" capture="camera" />
To get access to the camera. This works great on iPads and on Android tablets, but I can't get it to work on Windows 8 tablets. I have tried using Chrome on the Windows 8 tablet, but still no effect. All it does is that it opens a file dialog in which I can choose a file to upload. What I want to do is to be able to capture a new image. This standard is not supported by IE (an apparently the other browsers cannot access the device's camera either).
I have also stumbled across Media Capture and Streams which seems to be mostly related to showing streams from e.g. the web cam, but probably could be used to capture images and is supported by Chrome and Firefox among other browsers, but still not by Internet Explorer (even IE11). None of the three browsers' implementations seem to work on my Windows 8.1 test machine though. If someone has gotten getUserMedia to work on Windows 8 tablets in any browser I'm interested in hearing about it.
Anyway, my main question is: Is there any way to access the camera on a Windows 8 tablet using HTML5 from a web application? The only working examples I have seen have relied on a prototype implementation for IE using Active X or solutions that use flash.
EDIT: I would very much prefer to keep it in HTML5/javascript as it has to work offline (using HTML5 Application Cache)
I struggled very much for this solution, at the end I find good a solution. But only can use in windows store apps like chrome windows 8 mode (chrome settings -> relaunch chrome in windows 8 mode) then you can use the normal file input tag in html. when you hit "choose file" u see the image below. Then u can choose camera to add take image from camera.
if you can not see camera in the list, u can install app below.
https://www.microsoft.com/en-US/store/apps/Camera-File-Open-Picker/9WZDNCRFJQVN
So I was running into the exactly same issue. My web app is similar, except I have to do some bar code scanning with the tablet's camera.
I'm using the HTML 5 media api as you commented. In order to make it work in chrome in a Windows 8 Surface Pro, I had to do this:
To enable getUserMedia in Chrome type ‘chrome://flags/’ in URL bar and enable “Enable screen capture support in getUserMedia(). Mac, Windows, Linux, Chrome OS” option.
It was working in my laptop but not in the tablet, after making that change and restarting chrome it worked. Good luck.
Here is the code I ended up using to get around this situation... It appears to work in chrome very well however still no support for Internet Explorer which is known not support getUserMedia. Again I wish this wasn't necessary and windows just supported the take picture feature like iOS and android but it works for now.
Credit:
http://davidwalsh.name/browser-camera
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if(navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
getUserMedia interface works in Chrome on my Surface 2, prove:
I've implemented solution described here:
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
Btw, there is a working example on their site as well:
getUserMedia doesn't work in IE
getUserMedia probably works in FF, but I didn't test
access to the camera from [Browse] button doesn't work in any browser on my Surface 2
EDIT: Just realized, my approach doesn't work on Surface any more. Same story for the html5rocks page, the example given doesn't work on Surface. I guess, new Chrome version stopped to support something. BUT I've found the example which works on Surface for Chrome and Firefox, here you are:
http://www.ceng.metu.edu.tr/~e1559848/demos/qrdecode/index.html
I'm now using Nexus 7 for my project which is using Server-Sent Events to get alert message.
On Nexus 7 Chrome browser, it works well.
But when I load the same page using webview, it does not work (saying "your browser does not support server-sent events...").
The source codes are exactly the same as [http://www.w3schools.com/html/html5_serversentevents.asp].
I think there maybe some difference between Chrome browser and Android Webview.
Could some one tell me how to make it work using Android Webview?
I think WebChromeClient is the one you need anyway. I am using both WebViewClient AND WebChromeClient because the latter one is full HTML5 enabled.
So in your Android WebView you can use BOTH Clients at the same time.
For instance
// clients
webView.setWebViewClient(new CustomWebViewClient(this));
webView.setWebChromeClient(new CustomWebChromeClient(this));
I use WebChromeClient for all the fancy stuff, like Javascript popups and yes, SSE using PHP scripts.
I have a task to create a client application which can show notifications to a user with a high probability of notifications being noticed.
The application should work on Android (2.0+)/iOS/WP.
Here is the use case:
The user starts the Application and performs some Action. Then he switches to the home screen/another application.
The response to the Action makes the Application to issue a notification. The notification is noticed by the user disregarding of what another application (or home screen) he uses on his mobile device at the moment.
There is no requirement for the application to be a native app or to be a web browser-based mobile app. The notification could be a sound or a vibration on the device, but I know that accessing the vibrations from within a browser is still tricky.
Here are my research results of making universal sound/vibro notification mechanism so far:
it seems that making a mobile device vibrate from a browser works only in mobile Firefox (no iOS, no WP);
the support of the audio html5 tag is still experimental, it doesn't work on each and every browser/device;
the sound alert from this example works only in mobile Firefox (asks for a plugin to play an mp3 sound), the Android browser just remains silent.
So, the question is:
Is there any way to force a user of a mobile device (Android 2.0+/iOS/WP) to view a notification from a mobile application? Is the only way to do this is to write a native app for each mobile platform?
I would propose PhoneGap for that particular problem.
Among other things it features cross-platform alert, sound and vibrator notifications.
Only quirk for Windows Phone 7 is that the Cordova lib includes a generic beep file that is used. You should consult the Notification reference page to make sure if it can help you.