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
}
}
Related
I have an Angular 6 app that allows the user to record audio from within their browser and upload it to a server. For recording it uses the WebAudioTrack.js library, which is included via a <script> tag because I couldn't find any way to compile it into the Angular app.
About half of the time the recording works fine. The rest of the time it works fine (with VU meter and everything) up until the point when the user clicks the stop button. When that happens, the Chrome console reports the error as:
Uncaught (in promise) DOMException
When I'm running Angular in development mode, the Chrome error messages usually include a link to the line of code that caused the error. In this case, though, the link just points to line 1 of the HTML page, i.e. the DOCTYPE line.
By inserting a lot of console.log statements I was able to follow the program execution, and I believe I have partly narrowed down the source of the problem. It appears to be happening in the chunk of code below, at the line which calls this.audioTrack.stopRecording((e).
// "Stop" button was clicked
recordStop() {
/* Browser shows error when following line is called */
this.audioTrack.stopRecording((e) => {
/* When browser errs, this code is never reached */
this.blobWav = this.audioTrack.blob;
this.audioURL = this.audioTrack.getBlobSrc();
this.tearDownMediaStream();
this.recordState = 'playbackready';
window.clearInterval(this.timer);
});
}
Note that this does not appear to be related to the new Chrome autoplay policy which requires user interaction with a page before using an AudioContext to play audio, and throws similar error messages when a paused AudioContext is used. I have already taken that into account, and the state of the AudioContext is reported as "running". Also, this is recording, not playback.
I've tried checking the return value of this.audioTrack.stopRecording((e) and outputting that to the console. Code:
recordStop() {
var retval = this.audioTrack.stopRecording((e) => {
// ...
});
console.log(retval);
}
Output:
WebAudioTrack {context: AudioContext, sampleRate: 48000, bufferSize: 4096, numberOfAudioChannels: 1, volume: 1, …}
So, I guess that's not a return value but a copy of the object.
I also tried adding a .catch to it, but it doesn't support that method.
I am stuck on what to do next to continue narrowing down the source of this intermittent error. I also am a bit overwhelmed by the syntax for promises, especially in Angular. I can barely manage to write them, so I'm not yet at the point where I am comfortable debugging them.
What can I do to get the browser to give me more detail on this error message? Or is there some way I can catch the DOMException, handle it, and output more detail?
There's a lot of issues with audio play, pause and stop with chrome, they are async calls so I would recommend trying a .then(() => {}) when stopping audio and turning the stopRecording into an async function:
here is some documentation on the bug, hope it helps: https://developers.google.com/web/updates/2017/06/play-request-was-interrupted
I am using the vue-fullscreen plugin to trigger a fullscreen of an element in my code. I am calling the function using #click, yet despite that I am getting the following error:
Firefox:
Request for fullscreen was denied because Element.requestFullscreen()
was not called from inside a short running user-generated event
handler.
Chrome:
Failed to execute 'requestFullscreen' on 'Element': API can only be
initiated by a user gesture.
As per threads like the following, Javascript request fullscreen is unreliable, I have have found the following warnings:
Make sure it is generated directly by a user click.
I think I am.
Make sure there is not more than a 1 second delay between the user generated action and the function.
I find no delay, especially given the function is incredibly short and direct.
If you are using iframes, make sure you allow fullscreen parameters, including in any parent iframes.
I am not using an iframes.
Here is a snippet of my code:
HTML:
<div class="tool_circle_button" #click="toggleFullscreen"></div>
<fullscreen :fullscreen.sync="fullscreen">
Content
</fullscreen>
Javascript:
toggleFullscreen () {
console.log(this.fullscreen)
this.fullscreen = !this.fullscreen
},
Do these errors suggest that the #click command is not being recognized as a user-generated click? If not, what else could be causing this? Thanks so much for your help!
I'm using Sinch javascript SDK to build a browser to browser video calling app. When the video call is ended with a call to call.hangup(); in chrome (at least) the red camera icon is still visible with the message "This tab is using your camera or microphone".
How can I hide this warning after the call has ended? Is there a call in the Sinch SDK I should be making, or something in the underlying WebRTC framework?
You need to ensure that all MediaStreamTracks are stopped. If you have access to the stream from getUserMedia, doing this should help:
stream.getTracks().forEach(t => t.stop())
I found the following was required:
sinchClient.stopActiveConnection();
Currently i am developing application using phaser js.
Is this a browser compatibility issue or it is on the phaser js issue
where in the full screen api is not functioning
Here is code snippet that I use
if (phaser.scale.isFullScreen) {
phaser.scale.stopFullScreen();
} else {
phaser.scale.startFullScreen(false);
}
Similar Problem
So i tried what they suggest on the link
phaser.scale.compatibility.supportsFullScreen = true;
phaser.scale.startFullScreen(false, false);
Even the example of the phaser page it not functioning
Phaser Full Screen
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
startFullScreen # phaser.2.6.2.min.js:22
phaser.2.6.2.min.js:22
Phaser.ScaleManager: requestFullscreen failed or device does not
support the Fullscreen API fullScreenError # phaser.2.6.2.min.js:22
I test in on
Chrome 56.0.2924.87
Android 4.4.2
You can’t set the value of supportsFullScreen, that’s up to the user’s browser to decide.
Instead, query it and only start full screen if it is supported.
if (game.scale.compatibility.supportsFullScreen) {
game.scale.startFullscreen();
}
Tobe's answer is correct, but the error message also points out you need to trigger it from an event:
"API can only be initiated by a user gesture."
This may help others that stumble upon this error. Make sure you only call startFullScreen on a user tap.
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/