We Keep Coding

Camera control on phone not working for babylonjs vr

I can't manage to get the camera control to work on a phone using babylon defaultVRExperience
I can't understand what's missing. i've tried everything i can think of and i can't find any examples that work outside of the babylonjs playground.
Example of it working perfectly in babylon playground with just a few lines of code: https://www.babylonjs-playground.com/#VIGXA3#38
Example of same code not working outside of babylon: http://jsfiddle.net/dr3k5oqb/
Here's an example with some stuff i found in an article about making vr stuff for phones with babylon.. not working either: https://jsfiddle.net/2cdLw0tk/2/
Phone: A one+ 5 with oxygenOS 9.0.9
Browser: Chrome Version 79.0.3945.93
Literally any help would be greatly appreciated...

I assume that you are using iphone safari.
The story is that Apple is preparing to introduce a new
security/privacy setting to prevent sites from being able to access a
device’s accelerometer and gyroscope, which means some of those VR/AR
items you come across online probably won’t work quite as well until
you give express permission to do so. full article
In order to use vr we should ask users to allow access to motion and orientation by using this code:
function onClick()
{
if (typeof DeviceMotionEvent.requestPermission === 'function')
{
DeviceMotionEvent.requestPermission()
.then(permissionState => {
if (permissionState === 'granted')
{
// DeviceMotionEvent.requestPermission() has been granted
}
})
.catch(console.error);
}
}
Here is jsfiddle the babylon iphone working vr example outside the playground.
Open this demo link in your phone

Chrome v76 and forward has removed usage of DeviceMotionEvent for http, meaning that vr accelerometer control for chrome only works when using https
Source: https://www.chromestatus.com/feature/5688035094036480
This can be confirmed by just switching my example links to https and they start working on chrome on my phone.
Mudin's answer could be good to look at if you want to support safari.

NotReadableError: Failed to allocate videosource

I get this error in Firefox 51 when I try to execute the following code and when I select my laptop's camera:
navigator.getMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mediaDevices.getUserMedia ||
navigator.msGetUserMedia);
navigator.getMedia({
video: true,
audio: false
},
function(stream) {
if (navigator.mozGetUserMedia) {
video.mozSrcObject = stream;
} else {
var vendorURL = window.URL || window.webkitURL;
video.src = vendorURL.createObjectURL(stream);
}
video.play();
},
function(err) {
console.log("An error occured! " + err);
}
);
Error:
NotReadableError: Failed to allocate videosource
Can someone elaborate what this means? Is my webcam broken? I used it from the script just yesterday without problems. It's not allocated to other application.

NotReadableError is the spec compliant error thrown by Firefox when webcam access is allowed but not possible.
Most commonly this happens on Windows because the webcam is already in use by another app. Firefox will throw this error on both Windows and Mac even though only on Windows processes get exclusive access to the webcam.
The error can happen for other reasons:
Although the user granted permission to use the matching devices, a hardware error occurred at the operating system, browser, or Web page level which prevented access to the device.
Chrome throws TrackStartError instead. It also throws it for other reasons. Chrome tabs can share the same device.
Source: common getUserMedia() errors .

Please make sure your camera is not been used by some other application (chrome, ie or any other browser).
I wasted half my day searching for a solution, and in the end, found out my camera was used by other application.

I've encountered same issue on Windows 10, no other apps using my video device. The problem was that in Windows 10 in Settings->App permissions (in left column) there is a setting for microphone and camera (Allow apps to access your mic/camera) which needs to be turned on. It does not matter that you don't find your browser in app list below this setting, just enable it here and voila.

The message getUserMedia() error: NotReadableError was displayed for Chromium but not Firefox web browser. I also noticed that WebRTC examples using getUserMedia function without microphone access worked correctly in Chromium.
In fact, I had to make sure my microphone is enabled and select the correct microphone in Chromium / Chrome settings. Then WebRTC with audio and video access worked correctly.
If it is not a microphone problem, it may also be a webcam problem so you have to make sure your webcam is enabled and selected correctly in Chromium / Chrome settings.
Note that only one app at a time can use the webcam / microphone.

If you are here after or in December 2019 i would like to tell you few things
This feature navigator.getUserMedia() is deprecated.
Successor of this feature in the browsers will be window.navigator.mediaDevices.getUserMedia.
The new feature may not support in many browsers, since its still in the experiment mode few days ago chrome released its chrome 79 and its still not supporting in chrome 79 for me, and other than chrome and IE its working in all the browsers for me
Here is a quick code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Jello</title>
<style>
video{
width: 30%;
height: auto;
}
</style>
</head>
<body>
<video autoplay controls></video>
<button>Open Cam</button>
<script>
function getCam(){
window.navigator.mediaDevices.getUserMedia({video:true}).then((stream)=>{
// let videoTrack = stream.getVideoTracks()[0];
// console.log(videoTrack);
document.querySelector("video").srcObject = stream;
}).catch(err=> console.log(err.name))
}
// getCam();
document.querySelector("button").addEventListener("click", getCam);
</script>
</body>
</html>
Edit => if you are using in windows 10 make sure give chrome access your microphone and camera, otherwise it won't work

There is another solution to this problem. I had it with camera not working in Firefox and Skype, but working with the Camera app.
The solution was to give access to camera for "classical apps" (I do not know how it's called in English). It is in the same place access can be given or taken for all other apps, just bellow them make sure the classical apps are allowed as well. And not just giving for the app in question, like Firefox, all classical apps need to have that enabled

Tl;dr; - Check device drivers for any "funny" camera drivers
I just spent an hour on a call with a user who kept hitting this error, no matter what we tried and that includes go down every answer to this question. And we found another cause which I will now add here for the next poor soul to stumble on this.
In his case, he had installed an app called ChromaCam (which I exited almost as a first diag step) and this app installs a device driver called "Personify Virtual Camera Universal" Web search for that driver name will show a whole bunch of people having camera problems and the solution seems to be somewhat universal: uninstall the device driver. He didn't even know what ChromaCam was or why it was on his laptop, so we removed it, uninstalled the driver and everything started working perfectly!
There was another person in a different thread who had similar problem and for him it was some custom HP (?? - I think that's what he said) camera driver instead of normal generic one that Windows would have chosen.

Can someone elaborate what this means? Is my webcam broken? I used it
from the script just yesterday without problems. It's not allocated to
other application.
I've encountered exactly the same issue!
Shame on me! Because, in the meantime I'd added a beforeunload event, including the event.preventDefault as reported in the example.
After removing this event.preventDefault, everything worked fine - as expected.

I have searched everywhere for the solution at last found this. Basically in my case camera permission was turned on and Mozilla firefox can access web cam but chrome can't. Infact older versions of chrome like 74.x can use webcam but latest 84.x cannot. I thought the problem is with chrome but at last, I tried turning on my microphone access from windows 10 settings. Now chrome can access webcam too.
Solution: Please check you camera and microphone access both are turned on from windows settings.

The NonReadableError: Could not start video source is also thrown during a session (not local only!) if the camera change happens too quickly.
I don't know the solution yet, but I will edit my post accordingly once I got it.

Cocos2d-js hangs on bootscreen when trying to go fullscreen

my cocos2d-js game hangs with "Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture" on the loader-screen" on mobile.
since it seems that cocos requests fullscreen withou me coding that explicitly: how can i prevent this from happening?
thanks a lot!

I have found the solution hidden in the docs:
cc.view.enableAutoFullScreen(false);
edit:
that seems not to work on Chrome...
still getting:
Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture.

For fullscreen functionality in browser you can use https://github.com/bdougherty/BigScreen instead of cocos built in api (I've used this lib with my HTML5 games). It's only 1.4kb and works as it should
Because of security constraints going to full screen should be triggered by a user gesture, so you'll need a button for it (You may call it Start Game for example) which will trigger this click handler
function fullscreenButtonClick() {
if (BigScreen.enabled) {
BigScreen.request(element, onEnter, onExit, onError);
// You could also use .toggle(element, onEnter, onExit, onError)
}
else {
// fallback for browsers that don't support full screen
}
}

IOS Cordova Push Plugin - Coldstart Crashes App

I am using the the Cordova Push Plugin: http://ngcordova.com/docs/plugins/pushNotifications/
This works fine in Android Platform. But, for IOS, I face the following issue:
I register listener for '$cordovaPush:notificationReceived' event as per the documentation and provide the same implementation as given in the documentation in the link above (given below for ease):
$rootScope.$on('$cordovaPush:notificationReceived', function(event, notification) {
if (notification.alert) {
navigator.notification.alert(notification.alert);
}
if (notification.sound) {
var snd = new Media(event.sound);
snd.play();
}
if (notification.badge) {
$cordovaPush.setBadgeNumber(notification.badge).then(function(result) {
// Success!
}, function(err) {
// An error occurred. Show a message to the user
});
}
});
There are 3 scenarios:
1. App is running in foreground. In such case, even though the notification arrives (confirmed by log statements), no visible action happens on the device.
I expected the below two statements to execute but they dont.
navigator.notification.alert(notification.alert);
snd.play();
App is running in background. In such case, the statements seem to execute as per expected behaviour.
App is NOT running at all (coldstart). In this case, the notification and sound are played but when user click on notification, the app opens and hangs / crashes.
Has anyone encountered these problems before? What is the best way to solve these? This is only for IOS.

The plugin you are using is deprecated.
i also used it before and there are many issues.
i would reccomend to use the plugin: phonegap-plugin-push
easy to install and will solve your issue

As mentioned by #Nechemya Kanelsky, use the newer version of the push plugin and scenario 1 and 2 will be handled. But with that plugin as well, the 3rd issue still remains, as mentioned here
You can use the fix for 3rd issue, mentioned here

Why is getUserMedia throwing a [object NavigatorUserMediaError] when I click "Allow" in Chrome?

Recently, I started getting errors when trying to access the client's mic through my website. When Chrome asks whether to allow the site to access the user's microphone, [object NavigatorUserMediaError] is produced whether they click "allow" or "deny." This has been happening regardless of whether or not a microphone is actually plugged into the computer (which is running Ubuntu 12.04).
Further testing through Firefox showed that this is not specific to Chrome. The problem only started after I had done a live-input demo and then logged out of the computer. I tried making a bare bones demo of accessing the microphone, and it ran into the same problem.
var getVideo = false, getAudio = true;
navigator.getUserMedia || (navigator.getUserMedia = navigator.mozGetUserMedia ||
navigator.webkitGetUserMedia || navigator.msGetUserMedia);
function init() {
if(navigator.getUserMedia) {
navigator.getUserMedia({video:getVideo, audio:getAudio}, onSuccess, onError);
} else {
alert('getUserMedia failed.');
}
}
function onSuccess() {
console.log("Yay");
}
function onError(err) {
console.log("Noo " + err);
}
This is rather puzzling as it had worked perfectly up until the point where I logged out and then logged back in and tried to test it again.
I am hosting the web code locally, through Jetty and Eclipse. I am accessing it by typing localhost:8080/my-program into the web browser.
Edit:
After the error occurs, the icon of a camera shows up in the chrome address bar, saying that Chrome is accessing my microphone and listing two possible microphones, "Default" and "Built-in Audio Analog Stereo."
Edit 2:
This error is also occurring on other websites that try to access my microphone through webrtc. Traditional Flash implementation still works.
Chrome seems to be throwing out an error message at regular intervals while open.
[361:362:0725/095320:ERROR:audio_output_device.cc(186)]
Not implemented reached in virtual void
media::AudioOutputDevice::OnStateChanged(media::AudioOutputIPCDelegate::State)
Edit 3:
I was able to clarify the error message a bit more
NavigatorUserMediaError {code: 1, PERMISSION_DENIED: 1}

** One Browser at a Time **
I've encountered this situation when I am testing with multiple browsers open. It would appear that only one browser can access the media at a time.
ie When I've got my page open in Chrome, and the video/audio is working, then Firefox won't work, and when I've got it working in Firefox, then Chrome doesn't work.

This can happen in two situations and I've experienced both in Ubuntu 12.04:
You have clicked Deny once and then the browser saves that setting, always returning error when asked for media access in that page. (This does not seem to be your case as you get the question from browser, but you just have to go to the address bar, click in the camera icon and change the option to ask again).
Your browser is not having access to the media devices and as in any computer without cameras nor microphones, even if you press Allow, you will get an error event as it cannot give you any streams. Try to check the browser settings to see if you can choose the selected camera. I've experienced this and the list was empty. To solve this I had to reboot the machine and Chrome started showing the list of devices again.

NavigatorUserMediaError {code: 1, PERMISSION_DENIED: 1}
This means your browser settings are not allowing you to access the camera. Go into your browser settings -> under website settings you'll find a list of webpages that you have blocked from accessing your device.

getUserMedia only works on https; no exception for localhost (i.e http://localhost). Safari also does not ever seem to allow getUserMedia from within an iFrame. I always get a “Trying to call getUserMedia from a document with a different security origin than its top-level frame” error. This makes using sites like codepen and jsfiddle impossible.
More detials https://webrtchacks.com/safari-webrtc/