I'm currently experimenting with Kurento Media Server to rebuild the One2Many example with NodeJS, Socket.io and React but I cannot seem to establish a conenction between the publisher and KMS.
The SDP offer is transmitted to KMS and the answer is transmitted to the client. Every ICECandidates from KMS and the client are transmitted too. The video feedback is showing on the app but nothing is sent to the server and there is no errors. Here's is the chrome://webrtc-internals for my app.
The example app is perfectly working with the same Kurento server, I checked every line and I'm doing the same calls on the backend and on the frontend. Here's the chrome://webrtc-internals for the example app.
For reference, here's the code I'm using on the backend (the errors checking have been removed for this example but nothing is raising an error when I'm using it):
io.on('connect', (socket) => {
const socketInfo = {};
socketInfo.webrtcEndpointCreation = new Promise((resolve, reject) => {
socketInfo.webrtcEndpointCreationResolve = resolve;
socketInfo.webrtcEndpointCreationReject = reject;
});
socket.on('broadcast', (infos, callback) => {
kms.client.create('MediaPipeline', (mediaPipelineError, pipeline) => {
mediaPipeline = pipeline;
mediaPipeline.create('WebRtcEndpoint', (webRtcEndpointError, webRtcEndpoint) => {
socketInfo.webRtcEndpoint = webRtcEndpoint;
presenterWebRtc = webRtcEndpoint;
socketInfo.webrtcEndpointCreationResolve();
webRtcEndpoint.on('OnIceCandidate', (event) => {
socket.emit('iceCandidate',
new kms.lib.register.complexTypes.IceCandidate(event.candidate));
});
webRtcEndpoint.processOffer(infos.sdpOffer, (error, sdpAnswer) => {
callback(null, sdpAnswer);
});
webRtcEndpoint.gatherCandidates();
});
});
});
socket.on('iceCandidate', (candidate) => {
socketInfo.webrtcEndpointCreation.then(() => {
socketInfo.webRtcEndpoint.addIceCandidate(candidate);
});
});
});
And this is the client code:
const options = {
localVideo: document.getElementById('video'),
onicecandidate: (candidate) => {
global.socket.emit('iceCandidate', candidate);
}
};
this.kurentoSocket = new WebRtcPeer.WebRtcPeerSendonly(options, (error) => {
this.kurentoSocket.generateOffer((err, sdpOffer) => {
global.socket.on('iceCandidate', (iceCandidate) => {
this.kurentoSocket.addIceCandidate(iceCandidate);
});
global.socket.emit('broadcast', { sdpOffer }, (broadcastErr, sdpAnswer) => {
this.kurentoSocket.processAnswer(sdpAnswer);
});
});
});
I finally found the problem, it was a Backend issue.
I need to create a IceCandidate object with new kms.lib.register.complexTypes.IceCandidate(candidate) from the message sent by the client before adding it. Because of the way promises works, the error was ignored.
Related
I'm having a problem with socket.io at the moment I try to send a second time from the server to the client
here is the server code with express and socket.io
io.on('connection', async function (socket) {
let socketId = socket.id;
const mta = new Client("20.64.24.144", 22005, "*", "*");
mta.resources.evokestats.getPlayerCount()
.then((result) => {
console.log("result", result);
socket.emit("players-start", { players: result })
})
.catch((err) => {
console.error(`Ooops! Something went wrong ${err}`);
});
app.post('/player_connect', async function (req, res) {
let ip = req.body[0];
let player = await players.findOne({ ip: ip })
if (player) {
await socket.emit("players", { players: req.body[1] })
} else {
try {
player = await players.create({ ip: ip, name: req.body[2] })
await socket.emit("players", { players: req.body[1] })
await socket.emit("last_24_players", { players: 1 });
} catch (error) {
console.log("error", error)
}
}
res.send("connected")
});
});
and here is my client with reactjs and socket.io
useEffect(() => {
getStats();
}, [])
async function getStats(params) {
socket.on("players-start", function (data) {
setNowPlayers(data.players)
});
socket.on("players", function (data) {
console.log("players", data)
setNowPlayers(data.players)
});});
And in my client using react, in useEffect I listen to the "players-start" and the "players" that was emit.
players-start: It is for every first time that I enter my client he only calls once, to bring all players connected
players: Every time someone connects to the game server, a post call is made to my server where I use the express with socket, in the url '/player_connect' and then immediately emit
The problem: whenever I issue an issue on 'players-start' and then immediately enter the game server that calls the url '/player_connect' it is not triggering the issue of 'players' or at least the client is not receiving.
Test I've done:
My first attempt was to stick everything to the listener "players" but it still doesn’t work
I really appreciate everyone's help.
Tried following the article below to read eventstreams. Instead of using formData like it is done in the article, I'm using Json to post. It works smoothly with a 200 response. Even tells that some kb of data was sent over the wire, but the eventstream tab shows nothing. The same curl works on my terminal.
https://medium.com/swlh/how-do-server-sent-events-sse-or-eventsource-work-in-angular-e9e27b6a3295
As shown in the article
return Observable.create((observer) => {
const eventSource = this.sseService.getEventSourceWithPost(url, data);
// Launch query
eventSource.stream();
// on answer from message listener
eventSource.onmessage = (event) => {
this.zone.run(() => {
observer.next(event.progress);
});
};
eventSource.onerror = (error) => {
this.zone.run(() => {
observer.error(error);
});
};
});
Changing this part to
return Observable.create((observer) => {
const eventSource = this.sseService.getEventSourceWithPost(url, data);
// Launch query
eventSource.stream();
// on answer from message listener
eventSource.addEventListener('EVENT_NAME_FROM_STREAM', (event) => {
this.zone.run(() => {
observer.next(event.data);
});
};
});
Got the data to show up. But in the network tab I still don't see the events.
I am trying to build a web app to stream music. I use MongoDB to store the audio, a Node API to connect to the database and a Vuejs frontend. Below is the endpoint which streams the music, based on this article: https://medium.com/#richard534/uploading-streaming-audio-using-nodejs-express-mongodb-gridfs-b031a0bcb20f
trackRoute.get('/:trackID', (req, res) => {
try {
var trackID = new ObjectID(req.params.trackID);
} catch (err) {
return res.status(400).json({ message: "Invalid trackID in URL parameter. Must be a single String of 12 bytes or a string of 24 hex characters" });
}
res.set('content-type', 'audio/mp3');
res.set('accept-ranges', 'bytes');
let bucket = new mongodb.GridFSBucket(db, {
bucketName: 'tracks'
});
let downloadStream = bucket.openDownloadStream(trackID);
downloadStream.on('data', (chunk) => {
res.write(chunk);
});
downloadStream.on('error', () => {
res.sendStatus(404);
});
downloadStream.on('end', () => {
res.end();
});
});
I tested it with Postman and it works there. I am trying to read the stream in my Vuejs application. I'm just not sure how to do it. I tried the following to test it:
const url = 'http://localhost:4343/api/track/6061c90b2658b9001e65311d';
http.get(url, function (res) {
res.on('data', function (buf) {
console.log(buf);
});
res.on('end', function () {
console.log('ended');
});
})
This does not work however. How should I go about reading it in the frontend?
Using interceptBufferProtocol, I can successfully intercept the loadURL event to https://google.com mainWindow.loadURL("https://google.com/"); and replace it with my custom HTML code. The HTML code has an iframe which I am trying to proxy. This can usually be achieved by setting the electron browserWindow proxy but in my case, it fails to work. I set the proxy with the following code:
mainWindow.webContents.session.setProxy({
proxyRules: "http://" + proxy
}, () => {
console.log('Proxy: http://' + proxy)
})
Intercept url code:
ses.protocol.interceptBufferProtocol('https', (req, callback) => {
ses.resolveProxy(req.url, (x) => {
console.log(x)
})
if (req.url == "https://google.com/") {
fs.readFile(path.join(__dirname, "/../../path/stuff.html"), 'utf8', function(err, html) {
callback(Buffer.from(html, 'utf8'));
});
} else {
const request = net.request(req)
request.on('response', res => {
const chunks = []
res.on('data', chunk => {
chunks.push(Buffer.from(chunk))
})
res.on('end', async () => {
const file = Buffer.concat(chunks)
callback(file)
})
})
if (req.uploadData) {
req.uploadData.forEach(part => {
if (part.bytes) {
request.write(part.bytes)
} else if (part.file) {
request.write(fs.readFileSync(part.file))
}
})
}
request.end()
}
})
However, no matter what I do, it appears to use my local IP instead of a proxy. Do I have any options?
The code runs fine without a proxy. I'm trying to run it with one. The problem lies within the .interceptBufferProtocol() function. Any help would be appreciated!
I am developing a react application (chat app) using electron js (for desktops) I want to make Http requests to certain websites, to get URL metadata (opengraph, schema.org, twitterCard, etc). This cannot be done without disabling the webSecurity in electronJS.
a) is it a good idea to disable webSecurity in electron JS ? since users can send others pretty much anything ?
b) I have managed to achieve this using electron net package. I used it in react (renderer process) and it works smoothly, no need to disable webSecurity. however when a invalid URL is provided it throws an exception in main process (net::ERR_NAME_NOT_RESOLVED) which pops a error dialog box. is there a way to catch this exception in the renderer process?
below is how I used electron net package.
const {net} = window.require('electron').remote
function ScrapeMeta(url) {
var promise = new Promise((resolve, reject) => {
const options = {
url: url,
timeout: 2000
};
const request = net.request(options)
request.on('response', (response) => {
var body = '';
response.on('data', function (d) {
body += d;
});
response.on('end', () => {
if (response.statusCode == 200) {
ParseMeta(body)
.then(meta => resolve(meta))
.catch(err => reject(err))
} else {
reject("request failed with " + response.statusCode);
}
})
})
request.end();
})
return promise;
}
What is the best way to achieve this. thanks.