I am making a couple updates to my socket.io chat and I am trying to get audio every time a message is passed through. When I send the message I get Uncaught (in promise) DOMException
Here is the code that gets run when a message is passed through:
socket.on('new message', (data) => {
var messageE = document.createElement('div')
messageE.classList.add("well");
messageE.classList.add("msg");
messageE.innerHTML = '<strong>'+ data.user +'</strong>: ' + data.msg;
console.log(messageE)
chat.appendChild(messageE)
audio.play()
})
I may wont be able to respond till late afternoon.
A few seconds ago i got the same error but i fixed it. It is not the coolest solution but it works.
What i did telling the browser itself to play the audio and not directly from a socket.
Make a outside Variable(example socketCheck) that is on false. That will become true when the socket is called. The if will continue when it is on true on false it wont. When the sound got played turn the soundCheck on false again
Here is a example;
var soundCheck = false;
socket.on('new message', function(){
soundCheck = true;
});
if (soundCheck) {
sound.play();
sound = false;
}
Related
I used presence update for my Discord bot so when me or my friends are getting live on Twitch, the bot would send a message in a channel and console log. But when we go live, the bot does the job, like, it sends the first message then it starts spamming. As you may expect, I don't have the knowledge in js as I am a beginner. So, can someone tell me how to fix this problem or if it can be fixed? Here is my code:
if (!newPresence.activities) return false;
newPresence.activities.forEach(activity => {
if (activity.type == "STREAMING") {
console.log(`${newPresence.user.tag} is streaming at ${activity.url}.`);
};
});
});
And here is the console.log spam:
Mini-Game#8953 is streaming at https://www.twitch.tv/murus.
Mini-Game#8953 is streaming at https://www.twitch.tv/murus.
Mini-Game#8953 is streaming at https://www.twitch.tv/murus.
Mini-Game#8953 is streaming at https://www.twitch.tv/murus.
Add a return after the console.log() inside the forEach
newPresence.activities.forEach((activity,idx,arr) => {
if (activity.type == "STREAMING") {
console.log(`${newPresence.user.tag} is streaming at ${activity.url}.`);
return; //---> ADD this
};
});
I am capturing a user's audio and video with the navigator.mediaDevices.getUserMedia() and then using MediaRecorder and its ondataavailable to store that video and audio blob locally to upload later.
Now Im dealing with an issue where for some reason the ondataavailable stops being called midway through the recording. I'm not sure why and I get no alerts that anything went wrong. So first, does anyone know why this might happen and how to catch the errors?
Second, I have tried to reproduce. By doing something like this.
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(function(camera) {
local_media_stream = camera;
camera.getVideoTracks()[0].onended = function() { console.log("VIDEO ENDED") }
camera.getAudioTracks()[0].onended = function() { console.log("Audio ENDED") }
camera.onended = function() { console.log("--- ENDED") }
camera.onremovetrack = (event) => { console.log(`${event.track.kind} track removed`); };
}).catch(function(error) {
alert('Unable to capture your camera. Please check logs.' + error);
console.error(error);
});
And recording the stream with
recorder = new MediaRecorder(local_media_stream, {
mimeType: encoding_options,
audioBitsPerSecond: 128000,
videoBitsPerSecond: bits_per_second,
});
recorder.ondataavailable = function(e) {
save_blob(e.data, blob_index)
blob_index++;
}
recorder.onstop = function(e) {
console.log("recorder stopped");
console.log(e)
}
recorder.onerror = function(error) {
console.log("recorder error");
alert(error)
throw error;
}
recorder.onstart = function() {
console.log('started');
};
recorder.onpause = function() {
console.log('paused');
};
recorder.onresume = function() {
console.log('resumed');
};
recorder.start(15000)
Then I try to kill the stream manually to hopefully reproduce whatever issue is occurring by doing
local_media_stream.getVideoTracks()[0].stop()
Now ondataavailable is no longer called but none of the onended events were called. The recording is still going and the local_media_stream is still active.
If I kill the audio too
local_media_stream.getAudioTracks()[0].stop()
Now the local_media_stream is not active but still no event was called telling me the stream stopped and the recorder is still going but ondatavailable is never being called.
What can I do? I want to know that the local stream is being recorded successfully and if not be alerted so I can at least inform the user that the recording is no longer saving.
MediaRecorder has a recorder.stop() method. I don't see you calling it in your example code. Try calling it.
When you call track[n].stop() on the tracks of your media stream, you tell them to stop feeding data to MediaRecorder. So, unsurprisingly, MediaRecorder stops generating its coded output stream.
You also might, if you're running on Google Chrome, try a shorter timeslice than your recorder.start(15000). Or force the delivery of your dataavailable event by using recorder.requestData().
Edit When you call .requestData(), it invokes the ondataavailable event handler. (And, if you specified a timeslice in your .start() call the handler is called automatically.) Each call to that handler delivers the coded media data since the previous call. If you need the whole data stream you can accumulate it in your handler. But when you do that, of course, it needs to go into the browser's RAM heap, so you can't just keep accumulating it indefinitely.
Stopping both tracks should stop your recorder, it does for me in both FF and Chrome: https://jsfiddle.net/gpt51d6y/
But that's very improbable your users are calling stop() themselves.
Most probably the problem isn't in the MediaRecorder, but before that in the MediaStream's tracks.
A MediaRecorder for which all its tracks are muted won't emit new dataavailable event, because from its perspective, there is still something that might be going on, the track may unmute at any time.
Think for instance of a microphone with an hardware push-to-talk feature, the track from this microphone would get muted every time the user releases such button, but the MediaRecorder, even though it won't record anything during this time, still has to increment its internal timing, so that the "gaps" don't get "glued" in the final media. However, since it had nothing passed to its graph, it won't either emit new dataavailable events, it will simply adjust the timestamp in the next chunk that will get emitted.
For your case of trying to find where the problem comes from, you can try to listen for the MediaRecorder's error event, it may fire in some cases.
But you should also definitely add events to every tracks of its stream, and don't forget the mute event:
recorder.stream.getTracks().forEach( (track) => {
track.onmute = track.onended = console.warn;
};
I am trying to play a beep sound a minute after user has come on the page of my website. I found the solution here https://stackoverflow.com/a/18628124/912359
Here's my code:
$(document).ready(function(){
setTimeout(function () {
try{
if(!$(".facebook-chat").hasClass("active")){
$(".facebook-chat").addClass("active");
var audio = new Audio("/sound/chat.mp3");
audio.play();
}
}catch(e){
}
}, 60000);
}):
This throws an exception:
Uncaught (in promise) DOMException
Strangely, once I load the sound file separately in my browser and come back to the page, it works perfectly. Any ideas how I can fix it.
[Edit]
The issue is that user has to interact with the browser before the sound can be played. So I put the same code under click event of the body and it works. But the same doesn't work on scroll event either. I guess chrome doesn't consider scroll a user interaction. Can anyone add what other interactions can be used to trigger this?
Also, how is it working if I load the audio file in a separate window and come back to my page.
You can try loading the audio when the document is ready and then play it later only if the resource is loaded (for this check you can register a callback on onloadeddata). Otherwise, if resource is not loaded, you can try loading it again.
$(document).ready(function()
{
let aud = new Audio('https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3');
let canPlay = false;
aud.onloadeddata = () => (console.log("audio loaded"), canPlay = true);
setInterval(function()
{
if (canPlay)
aud.play();
else
aud = new Audio('https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3');
}, 3000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Best solution I could come up with when I tried the same was:
const playPromise = audio.play();
if (playPromise !== null){
playPromise.catch(function() { audio.play(); })
}
But sometimes (One out of ten) the second audio.play() where also uncaught and the audio did not play either. I suggest you made a loop that stops only when the Promise is finally caught.
I'm trying to implement a simple lock using the following code:
Server:
socket.on('lock', function(ressInfo)
{
var lock = false;
if(ressLocks.indexOf(ressInfo.id) === -1)
{
ressLocks.push(ressInfo.id);
lock = true;
}
socket.emit("lock", lock);
});
Client:
this.requestLock = function(ressInfo, callback)
{
if(currentlyOnline)
{
socket.emit("lock", ressInfo);
socket.on("lock", function(lock)
{
// this gets triggered one additional time with each lock
callback(lock);
});
}
else
{
callback(true);
}
}
On the first call I get one callback with true, on the second call I get two callbacks with false, on the third call three, etc.
What is happening here? Why does socket.on get called multiple times?
I can think of two reasons:
Client side:
If you are registering for lock function multiple time
Server side:
As i assume this happens if you are registering multiple times to listen to the events assuming that you are running the socket.on function everytime you recieve events
Heres how you can debug.
Install node-debug
do node-debug "filename"
This will open in debug mode. Now check how many time the socket.on for 'lock' is being registered. I had similar issue. Heres how i solved it.
//check if msgtype is already binded
if (!isMessageTypeBinded(msgType, someKey)) {
// emit ot connection
io.of(someKey).emit(msgType, message)
return
} else {
// apply filter to all connection
var sockets = io.of(someKey).sockets
if (msgType) { // check for message tye
activeMsgConn.push({
"msgType": msgType,
"accessKey": someKey
})
for (index in sockets) {
var socket = sockets[index]
socket.on(msgType, notifyNewMsg(socket))
io.of(someKey).emit(msgType, message)
}
}
}
I am maintianing an array of all the connections made till now.
If a new msg comes, i'll first check if that msg was already binded to the socket and dont add any new namespace. Else i loop thorugh all the socket conneciton and add this handler.
In your case the code need not be same but implementation can be similar.
I am trying to connect computer "a" to computer "b" using webrtc and print out the "Click" on computer "b" when the mouse is clicked on computer "a"'s canvas. I already created a working webrtc example where I make a connection between computer "a" and "b" and send messages between them using textboxes(chat).
I know to Attach a click event to the document. When the user clicks anywhere in the document, output "Click" will be displayed.
document.addEventListener("click", function(){
message.value= "Click!";
});
And these are some of the webrtc functions I have, I didnt post all my webRTC functions because I dont wanna make the question longer, it already is.
// a nice wrapper to send data
function send (room, key, data) {
roomRef.child(room).child(key).set(data);
}
// wrapper function to receive data
function recv (room, type, cb) {
roomRef.child(room).child(type).on("value", function (snapshot, key) {
var data = snapshot.val();
if (data) { cb(data); }
});
}
// get references to the document tags
var chatlog = document.getElementById("chatlog");
var message = document.getElementById("message");
function bindEvents () {
channel.onopen = function () { console.log("Channel Open"); }
channel.onmessage = function (e) {
// add the message to the chat log
chatlog.innerHTML += "<div>Peer says: " + e.data + "</div>";
};
}
// send a message the textbox throught
// the data channel for a chat program
function sendMessage () {
var msg = message.value;
channel.send(msg);
message.value = "";
}
My question is I dont know how to connect these two codes together or even if i did, I am not sure if it would work. So my question is how can I click on the canvas on computer "a" and get the textbox to print out "Click" on computer "b".
Thanks for reading
You could look into node.js and socket.io.
With these two you could connect multiple clients together and have a real-time communication between them. Other alternative is to use ajax with php, and make one browser to poll for new commands from server, and other browser to send them to server.
You're mostly there. What you can do is, after setting the message.value property, is call the sendMessage() function. This should trigger the application to send the correct value through the WebRTC Connection.