Develop Reference

Phaser3 - Sound entries missing on Safari

I’m using in my project phaser#3.24.0 and I have a problem with games on Safari 13.1.
In my preload method I have my loadConfig object with sound data:
var data = {
mediaURL: "../../../static/sound/",
dataObjects: [
{ type: "sound", name: "ok", file: "ok.ogg" },
{ type: "sound", name: "wrong", file: "wrong.ogg" },
{ type: "sound", name: "missing", file: "missing.png" },
],
};
loadData(data, this);
Helper function:
function loadData(data, game) {
data.loadObjects.forEach((element) => {
game.load.audio(element.name, config.mediaURL + element.file);
}
}
In my create method:
this.sound.add("ok")
When I load the scene I get:
Error: There is no audio asset with key “ok” in the audio cache
initialize — phaser.min.js
add — phaser.min.js
create — culture.js
create — phaser.min.js
On other browsers everything works fine, I don’t have problems with this.
**: this.sound.add("ok")
This is not working, I have all my paths to the file etc in the game scene entries/data. But it seems no to be added in a create method - only in safari.

Safari doesn't support Ogg Vorbis.

Solution: there need to be an alternative in .mp3 format for Safari. Safari cannot proceed .oog files.

As other said here, Safari doesn't support .ogg format - https://caniuse.com/ogg-vorbis
So you should create a substitute sound with the extension mp3, m4a or something else depend on your research(I personally use m4a).
In order to load 2 sounds, one as back up, in Phaser do something like this:
scene.load.audio("ok", ["ok.ogg", "ok.m4a"]);
You can load an array of sounds with the same key, and the successful sound will play.
https://rexrainbow.github.io/phaser3-rex-notes/docs/site/audio/#load-audio-file
Although you would need to change a bit your loadData() function to match an array of files.

Cannot stack multiple push notifications

I am working on a code to push notifications to the browser. My code to display notifications look like below
const imageWithTextNotification = (reg) => {
// more options at https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification#Syntax
const options = {
icon: "imgs/notification.png",
// 07 - Notification with a body
body: "Alert!! This is image notification",
// 09 - Actions on notification click (see sw.js for log)
actions: [
{ action: "search", title: "Try Searching!" },
// 10 - More Actions
{ action: "close", title: "Forget it!" },
],
data: {
notificationTime: Date.now(),
githubUser: "hhimanshu"
}
}
reg.showNotification("Counter=" + counter++, options)
}
After reading the documentation from MDN, the code should stack multiple notifications since I am not using the tag property in the options object.
However, in my observation, multiple notifications do not stack. The same notification is replaced (see counter value increased in the demo below). Please see below
The reproducible codebase is available at https://codesandbox.io/s/charming-hellman-8q4t3 and the demo is available at https://8q4t3.sse.codesandbox.io/
I have tested this on
Google Chrome => Version 80.0.3987.163 (Official Build) (64-bit)
Firefox => 75.0 (64-bit)
Could someone please help me understand how can I get the multiple stacked notifications?
Thank you

I was also in touch with #gauntface on twitter and with his help, I was able to fix this issue.
Here is the Twitter thread
And here is the solution

Javascript: how to catch errors loading videos in video.play()?

The MDN docs on video.play detail how it returns a Promise in modern browsers and that it will be rejected if the video cannot be played.
In my tests, I have found that this works well for when a video is not played, because of autoplay policies issues, such as not being muted, however, I am also seeing that it does not get rejected if the URL for the video 404s or is of the wrong content type.
Is there any way to catch loading errors like this? Or would this be a feature request for Chrome, Firefox, Safari, and others?
I have a sample codepen here: https://codepen.io/mrcoles/pen/abzJPaQ
In it I generate videos based on the following configs:
const ROWS = [
{
title: 'Video URL is good',
src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
muted: true
},
{
title: 'Video URL is a 404',
src: '/DOES-NOT-EXIST.mp4',
muted: true
},
{
title: 'Video URL is a bad source type (HTML page instead of video)',
src: 'https://www.example.com/',
muted: true
},
{
title: 'Video URL is good, but not muted',
src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
muted: false
}
];
Here’s a screenshot of the results:

Failure to load files needs to be watched separately by attaching an "error" event to the source elements inside the video (or maybe the video if the src is specified directly on it without source elements).
sourceElt.addEventListener('error', evt => {
console.log('Error');
});
I updated my codepen to add an example with multiple source elements inside a video. Since videos elements are built to try multiple, you should only listen for errors on the last source element (or maybe sum errors until you match the # of sources—I haven’t verified if things can expect to run top down).
Helpful info was provided in comments by #AdamH pointing to this other post: https://stackoverflow.com/a/33471125/376489

Chrome WebRTC breaks on browser update with adapter.js

I suddenly get the following error on my webapp when using chrome:
Failed to construct 'RTCPeerConnection': Failed to initialize native PeerConnection.
I believe it was because of a chrome update
I'm using adapter.js v1.0.2(latest)
This doesn't occur in firefox. I think it's because of my constraints object. Here it is
options = {
iceServers:[
{
url:'stun:12.345.678.910:3478'
},
{
url: "turn:#12.345.678.910:3479",
username:"ninefingers",
credential:"youhavetoberealistic"
}
]
};
I made sure the turn server was running. I think the options object format has changed. Using chrome 48.0.2564.116 on ubuntu and mac os x.

I doubt that this is an adapter.js issue, in your ice server config for turn url, there is an unnecessary #, that must be the issue. Probably firefox just ignores it, but chrome is more strict, change code to:
...
urls: "turn:12.345.678.910:3479",
...
Edit: based on jib's comment that url is deprecated and must be replaced with urls, the new code would be:
options = {
iceServers:[
{
urls:'stun:12.345.678.910:3478'
},
{
urls: "turn:12.345.678.910:3479",
username:"ninefingers",
credential:"youhavetoberealistic"
}
]
};

storage of about 1MB for a chrome extension

I'm working on a chrome extension which needs to auto-save the text of a hmtl5 content editable section. My estimation is that the space need would be about 1MB. How do I approach this? Does the localStorage.setItem work in a chrome extension?
Thanks,
Arun

In a Chrome Extension, you can use the storage API. It can handle a couple MBs, make sure to add the permission to the manifest file (this one won't prompt users to accept it)
...
"permissions": [
"storage"
],
To save the user's input:
chrome.storage.local.set({
auto_saved_text: 'text entered by the user'
}, function() { ... })
Then to retrieve it later:
chrome.storage.local.get('auto_saved_text', function(values) {
if('auto_saved_text' in values) {
// values.auto_saved_text contains the value
}
else {
// The value has never been saved before
}
});
https://developer.chrome.com/extensions/storage