Force unsupported browsers to ignore VIBRATION API methods - javascript

I am using Vibration API to vibrate user device to improve UX.
navigator.vibrate(200);
The problem is it breaks my website on unsupported browsers/devices. I know I can check for vibration support before calling the vibrate method like this:
if("vibrate" in navigator) {
// vibration API supported
}
But I have already published my website, its live. I require some kind of a hack which will force unsupported browsers/devices to ignore navigator.vibrate() method where ever used.

METHOD 1
if(window.navigator && typeof window.navigator.vibrate !=='undefined')
{
//Execute your code
console.log("Vibrate API is supported by browser",window.navigator.vibrate);
}
else
{
console.log("Browser issues: Vibrate API not supported");
}
MEHTOD 2
try
{
console.log("Vibrate API is supported by browser",window.navigator.vibrate);
//Execute your code
}
catch(Err)
{
console.log("Browser issues:",Err);
}

As suggested by Keith
These 4 lines (kept in global scope) will stop unsupported browsers/devices from breaking your site.
let mainNavigator = window.navigator;
let navigator = {};
let vibrationSupport = "vibrate" in mainNavigator;
vibrationSupport ? navigator.vibrate = function(value) { mainNavigator.vibrate(value); } : navigator.vibrate = function(value) {};

Related

Implement vibration in ReactJS

I want to make the device vibrate with some part of my code (not relevant), I have seen some methods for js but I can't get it to work in react. Here is what I have tried so far inside of a function:
window.navigator.vibrate(200);
navigator.vibrate([1000, 500, 1000]);
navigator.vibrate(Infinity); // Infinity is a number
Check to make sure vibrate is supported in your current browser
if ("vibrate" in navigator) {
// vibration API supported
navigator.vibrate(1000);
}
or
// enable vibration support
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
if (navigator.vibrate) {
// vibration API supported
navigator.vibrate(1000);
}

Chrome Latest version (Version 47.0.2526.80 m) : navigator.webkitGetUserMedia returns a stream which doesnot have stop function

I had implemented a piece of code to access camera on chrome browser and release it after use.
Code:
Start Camera:
navigator.webkitGetUserMedia($scope.options.videoObj, function (stream) {
$scope.options.video.src = window.URL.createObjectURL(stream);
$scope.options.video.play();
$scope.options.localMediaStream = stream;
}, $scope.options.errBack);
Stop Camera:
$scope.options.video.pause();
$scope.options.localMediaStream.stop();
But, after latest upgrade of chrome browser, i.e. Version 47.0.2526.80 m,
$scope.options.localMediaStream doesnot have "stop" function.
So, everything is breaking.
I need to release camera access so that another browser can access camera.
(Previously stop function was doing this work)
Please help me if someone has any solution.
As #Jai said in his answer, Chrome finally implemented the new navigator.mediaDevices.getUserMedia() method.
According to the specs, to stop the stream, you will now have to call the stop() method of every mediaStreamTrack Objects, not the one of the MediaStream one.
full code :
var video = document.querySelector('video');
var start = function(){
navigator.mediaDevices.getUserMedia({video:true}).then(function(mediaStream){
window.stream = mediaStream;
video.src = URL.createObjectURL(mediaStream);
video.play();
});
}
var stop = function(){
if(stream.stop) {
stream.stop(); // FF and other not yet updated browsers
} else {
// updated browsers
var tracks = stream.getTracks();
for(var i=0; i<tracks.length; i++) {
tracks[i].stop();
}
}
URL.revokeObjectURL(video.src);
}
or alternatively, to only release the camera, you can call
stream.getVideoTracks()[0].stop()
Seems chrome has removed it as this feature is deprecated.
Later versions of Chrome support unprefixed MediaDevices.getUserMedia(), that replaced this deprecated method.
and the compatibility table for .stop() method:
Instead you would use MediaDevices.getUserMedia():
navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) { ... })
$scope.options.localMediaStream=null;

How to check if device is Windows Surface Tablet and browser is chrome or IE

How to check if device is Windows Surface Tablet and browser is chrome or IE using Javascript.
i have tried following code
function is_touch_device()
{
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
if(is_touch_device() )
{
if(navigator.userAgent.toLowerCase().indexOf('chrome')>-1)
{
//some stuff
}
}
i have searched for useragent
but i an not getting exact for surface.
how to check if device is surface and browser is chrome or IE
Using the navigator object you can access these data fields
navigator.appName <- gets app name may be misleading so also get the appCodeName
navigator.appCodeName; <-- alternate name
navigator.platform; <-- platform the user is on
http://www.w3schools.com/js/js_window_navigator.asp
window.navigator.pointerEnabled
This method returned true Surface devices.....
Though you can use navigator object to serve your purpose, I would suggest you to use modernizer for the same.

Substitute for ALLOW_KEYBOARD_INPUT javascript full screen

I have been searching on the internet for a reason why my fullscreen javascript doesn't work in Safari, but yet works in webkit browser Chrome. It seems to that safari doesn't support the element.ALLOW_KEYBOARD_INPUT add-on for webkitRequestFullScreen.
function cancelFullScreen(el) {
var requestMethod = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullscreen;
if (requestMethod) { // cancel full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
function requestFullScreen(el) {
// Supports most browsers and their versions.
var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen(el.ALLOW_KEYBOARD_INPUT) || el.mozRequestFullScreen || el.msRequestFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
return false
}
function toggleFull() {
var elem = document.body; // Make the body go full screen.
var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) || (document.mozFullScreen || document.webkitIsFullScreen);
if (isInFullScreen) {
cancelFullScreen(document);
} else {
requestFullScreen(elem);
}
return false;
}
Does anybody know a way to make safari accept fullscreen yet still be able to handle keyboard inputs?
According to Apple's documentation, this is supposed to work in Safari 5.1 and later, but obviously it doesn't. I filed a bug report with Apple (which they don't make public), and the reply was as follows:
Engineering has determined that this issue behaves as intended based on the following:
We intentionally disable keyboard access in full screen for security reasons.
I have replied asking that they at least update the documentation and make the lack of feature support detectable somehow. I will update here if I get a reply.
Unfortunately, there isn't a good way to even do feature detection, since element.ALLOW_KEYBOARD_INPUT is defined in Safari, and the function call with that flag doesn't throw an error. The only remaining option is to parse the user agent string (try this library).
Obviously, Apple doesn't yet document which version supports this, but according to this, it stopped working as of v5.1.2. That would leave a very small number of people using 5.1 un-patched, if it ever even worked at all. So it's probably not even worth detecting the version.
As a fallback, I would expand the desired DOM element to fill the browser window by setting CSS height and width to 100% and position to "fixed" or "absolute".
Update: It looks like the documentation has been corrected and no longer mentions the ALLOW_KEYBOARD_INPUT flag.
This has been fixed in Safari 10.1!
Under the "Safari Browser Behavior" section.

JS/jQuery/mootools detect broswer supports HTML5

How do I detect if a browser supports HTML5 by
JS
(or)
jquery AND mootools.
Use modernizr to detect HTML5 and CSS features.
As the other suggested the best option is to use Modernizr, because it was created especially to do this work.
I don't know any plugin in jQuery that covers this functionality (jQuery.supports doesn't check much) but if you want you could try mooModernizr witch extends MooTools Browser.Features object
Another completely valid option is to check Modernizrs source code, and implment that with the features you want to detect.
To detect the video tag support is quite easy:
if (typeof HTMLVideoElement == 'function') {
alert('<video> tag supported');
}
That's in my opinion a simplistic version. Here is how the many times mentioned modernizr does it, which is a bit more bullet proof probably:
function supportsVideo() {
var elem = document.createElement('video'),
bool = false;
// IE9 Running on Windows Server SKU can cause an exception to be thrown, bug #224
try {
if ( bool = !!elem.canPlayType ) {
bool = new Boolean(bool);
bool.ogg = elem.canPlayType('video/ogg; codecs="theora"');
// Workaround required for IE9, which doesn't report video support without audio codec specified.
// bug 599718 # msft connect
var h264 = 'video/mp4; codecs="avc1.42E01E';
bool.h264 = elem.canPlayType(h264 + '"') || elem.canPlayType(h264 + ', mp4a.40.2"');
bool.webm = elem.canPlayType('video/webm; codecs="vp8, vorbis"');
}
} catch(e) { }
return bool;
}
Check out modernizr. It is an open source javascript library that specializes in detection of html5 / css3 features:
http://www.modernizr.com/

Categories