I'm trying to detect a shake event on iPhone. shake.js library is not working, would appreciate any help or other solutions. I've also tried this but no luck.
function ClickRequestDeviceMotionEvent () {
window.DeviceMotionEvent.requestPermission()
.then(response => {
if (response === 'granted') {
window.addEventListener('devicemotion',
() => {
//alert('DeviceMotion permissions granted.');
var o = 0.6; // 0
var myShakeEvent = new Shake ({
threshold: 10, // 15. optional shake strength threshold
timeout: 1000 // optional, determines the frequency of event generation
});
myShakeEvent.start(); // mobile, no ipad
window.addEventListener('shake', shakeEventDidOccur, false);
function shakeEventDidOccur() { // function to call when shake occurs
alert('shake!');
}
},
(e) => { throw e }
)} else {
alert('DeviceMotion permissions not granted.')
}
})
.catch(e => {
alert(e)
})
}
By the looks of it, this isn't possible anymore.
Shake.js was discontinued so is not supported.
Also, Safari does not support the Accelerometer, Gyroscope or the DeviceMotionEvent web API's, so this data is just not available for your code to react to.
Related
I want to display a warning message to the user when the user’s connection is not optimal to process the current flow. But I can’t find a way to detect that information properly.
The solution I found is to calculate the loading time of each fragment to trigger or not the warning but this option impacts the performance of the application.
let localLowConnection = false;
localHlsInstance.on(Hls.Events.FRAG_LOADING, (event: any, data: any) => {
const id = setTimeout(() => {
if (!localLowConnection) {
isLowConnection(true);
localLowConnection = true;
}
}, 1000);
ids.push({ timerId: id, eventId: data.frag.sn });
});
localHlsInstance.on(Hls.Events.FRAG_LOADED, (event: any, data: any) => {
each(ids, (item, index) => {
if (item.eventId === data.frag.sn) {
clearTimeout(item.timerId);
}
});
if (localLowConnection) {
isLowConnection(false);
localLowConnection = false;
}
})
This code seems to work but it displays and removes the overlay almost instantly.
I find no post on this topic and nothing explicit in the hls.js documentation for this case. I also specify that the adapdative bitrate is not activated and I therefore have only one quality level.
Thank you for your help :)
I'm trying to use the navigation.share API, in Firefox if i try to share a tweet for example, this open de twitter page and all is ok. But if i try the same in chrome the behavior is different, the share open a default prompt. There are a way to have the same behavior in each browser?
const shareUrl = (e, socialNetwork) => {
e.preventDefault();
e.stopPropagation();
if (navigator.share) {
navigator
.share({
title: document.title,
url: path,
})
.catch(console.error);
} else {
if (socialNetwork == "Facebook") {
shareFacebook(path);
}
if (socialNetwork == "Twitter") {
shareTwitter(path);
}
}
};
after 30sec started, it make eventListener silence
const start = () => {
navigator.bluetooth
.requestLEScan({
acceptAllAdvertisements: true,
keepRepeatedDevices: true,
})
navigator.bluetooth.addEventListener('advertisementreceived', event => {
console.log(event.eveice.id, event)
})
}
Please file a Web Bluetooth issue in Chromium for this. It is likely a bug our team can take a look at.
I have a website that is used to take pictures, user has to take one picture with main camera and then second picture (selfie) with front camera. All those pictures are saved as blobs in db and can be viewed in a separate page.
Issue: sometimes one of the photos are plain black and it seems that mediaStreamTrack ends randomly which causes the image to arrive to DB as plain black. (this mostly happens with iPhones, but I have seen desktops with win10 have the same issue since I log userAgent and made a function that logs some events like 'camera permission requested', 'permission granted', 'stream ended').
Is there a way to obtain why onended event was fired?
function startVideo(facingMode = 'environment') {
if (this.mediaStream && facingMode === 'user') {
// stop previous stream to start a new one with different camera
this.mediaStream.getVideoTracks[0].stop();
}
const videoEl = video.current;
const canvasEl = canvas.current;
navigator.mediaDevices
.getUserMedia({
video: {
facingMode:
facingMode === "user" ? { exact: facingMode } : facingMode,
height: {
min: 720,
max: 720
},
width: {
min: 720,
max: 1280
},
advanced: [{ aspectRatio: 1 }]
},
audio: false
})
.then((stream) => {
if (this.mediaStream !== stream) this.mediaStream = stream;
videoEl.srcObject = this.mediaStream;
videoEl.play();
this.mediaStream.getVideoTracks()[0].onended = () => {
console.log('stream ended unexpectedly');
this.sendUserLog('stream ended');
};
})
.catch((error) => {
if (error.name === 'OverconstrainedError') {
this.sendUserLog('camera quality too low')
} else {
console.log("An error occurred: " + error));
this.sendUserLog('permission denied');
}
})
}
I also tried to log the onended event, but it only shows the source mediaStream properties and and type: 'ended', but I already know that since the event fired.
Also since most of these cases happen with mobiles, it seems implausible that camera was disconnected manually.
I would liked to detect whether or not microphone permissions have been granted on my site when it loads without actually running something like the following:
navigator.webkitGetUserMedia({audio: active},
function(){alert('worked')},
function(){alert('failed')});
Is there a simple API to detect whether the user has permanently granted microphone access to my application (which runs over https)?
Update
microphone has been added to the Permission API even if it's not yet available on Safari nor Internet Explorer.
You could hope that it would be accessible from the permission api, but it isn't :(
Perhaps in the feature this could work like the rest of this:
navigator.permissions.query(
// { name: 'camera' }
{ name: 'microphone' }
// { name: 'geolocation' }
// { name: 'notifications' }
// { name: 'midi', sysex: false }
// { name: 'midi', sysex: true }
// { name: 'push', userVisibleOnly: true }
// { name: 'push' } // without userVisibleOnly isn't supported in chrome M45, yet
).then(function(permissionStatus){
console.log(permissionStatus.state); // granted, denied, prompt
permissionStatus.onchange = function(){
console.log("Permission changed to " + this.state);
}
})
Old answer
The only way i see it possible is if you keep track of this yourself with a key/value item in localStorage when you ask for permission.
Unfortunately it doesn't notify you when it has been changed
// initialization
if( localStorage.getItem('voice_access') === null ){
// just assume it is prompt
localStorage.setItem('voice_access', 'prompt');
}
// Then somewhere
navigator.getUserMedia({ audio: true }, function (e) {
// http://stackoverflow.com/q/15993581/1008999
//
// In chrome, If your app is running from SSL (https://),
// this permission will be persistent.
// That is, users won't have to grant/deny access every time.
localStorage.setItem("voice_access", "granted");
}, function (err) {
if (err.name === 'PermissionDismissedError') {
localStorage.setItem('voice_access', 'prompt')
}
if (err.name === 'PermissionDeniedError') {
localStorage.setItem('voice_access', 'denied')
}
})
You could go the extra mile and build a nice little wrapper with this code above and extend/replace the permission api to handle more enum names and create a broadcast api to tell the other tabs when it changes. but why make it so complicated...? The localStorage can't be 100% trusted. it can be changed anywhere any time both with permission and storage cleared
you already got the polling method for checking permissions.
here is some information from MDN:
https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getUserMedia
and some more: https://developer.mozilla.org/en-US/docs/WebRTC
here is an example:
navigator.getMedia (
// constraints
{
video: true,
audio: true
},
// successCallback
function(localMediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
video.onloadedmetadata = function(e) {
// Do something with the video here.
};
},
// errorCallback
function(err) {
console.log("The following error occured: " + err);
}
);
navigator.getUserMedia is now obsolete, replaced by MediaDevices.getUserMedia, which returns a promise. If the promise gets rejected you get an DOMException with indication of the problem. Insufficient permissions is one of the options there.
Details here:
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
I guess this would be helpful:
function isMicrophoneAllowed(){
navigator.permissions.query({
name: 'microphone'
}).then(function(permissionStatus){
return permissionStatus.state !== 'denied';
});
}