Hello,
I’m trying to develope a browser client (i’m testing it with google chrome) that use Janus as relay server to stream audio/video to another browser client.
I’m using react js and the npm package janus-gateway.
The connection to the Janus server works and attach the plugin videoroom successfully, I setted the clients so that participates a given room as publishers to share their streams to the other side and receive the other side stream.
In the console logs of the browser it seems that i am getting some “media” but the remote-video class of the jsx renderer (html) is not showing up anything (stays black) as it seems that the “onremotestream” event listener that should set the stream to be displayed is not being triggered anytime during the session. Actually noone of the event listeners seems to be triggered.
Here are some more details:
Google Chrome console logs of one client:
Remote description accepted!
janus.es.js:2147 Adding remote candidate: {sdpMid: ‘0’, sdpMLineIndex: 0, candidate: ‘candidate:1 1 udp 2015363327 207.180.232.78 57013 typ host’}
janus.es.js:767 Got a trickled candidate on session 1045239133298189
janus.es.js:768 {completed: true}
janus.es.js:772 Adding remote candidate: {completed: true}
janus.es.js:732 Got an ack on session 1045239133298189
janus.es.js:733 {janus: ‘ack’, session_id: 1045239133298189, transaction: ‘2x6ljsMOwE23’}
janus.es.js:732 Got an ack on session 1045239133298189
janus.es.js:733 {janus: ‘ack’, session_id: 1045239133298189, transaction: ‘zTZl2ENSh6pS’}
janus.es.js:1919 End of candidates.
janus.es.js:1620 Sending trickle candidate (handle=736181068510485):
janus.es.js:1621 {janus: ‘trickle’, candidate: {…}, transaction: ‘9HPjX32FHrRR’}
janus.es.js:732 Got an ack on session 1045239133298189
janus.es.js:733 {janus: ‘ack’, session_id: 1045239133298189, transaction: ‘9HPjX32FHrRR’}
janus.es.js:880 Got a plugin event on session 1045239133298189
janus.es.js:881 {janus: ‘event’, session_id: 1045239133298189, sender: 736181068510485, plugindata: {…}}
janus.es.js:892 – Event is coming from 736181068510485 (janus.plugin.videoroom)
janus.es.js:894 {videoroom: ‘event’, room: 176653, publishers: Array(1)}
janus.es.js:907 Notifying application…
janus.es.js:790 Got a webrtcup event on session 1045239133298189
janus.es.js:791 {janus: ‘webrtcup’, session_id: 1045239133298189, sender: 736181068510485}
janus.es.js:838 Got a media event on session 1045239133298189
janus.es.js:839 {janus: ‘media’, session_id: 1045239133298189, sender: 736181068510485, mid: ‘1’, type: ‘video’, …}
janus.es.js:838 Got a media event on session 1045239133298189
janus.es.js:839 {janus: ‘media’, session_id: 1045239133298189, sender: 736181068510485, mid: ‘0’, type: ‘audio’, …}
Janus logs:
Creating new session: 5436630060895875; 0x7f562400ba30
Creating new handle in session 5436630060895875: 6243726027020735; 0x7f562400ba30 0x7f562400e4b0
Creating new session: 1045239133298189; 0x7f562400da30
Creating new handle in session 1045239133298189: 736181068510485; 0x7f562400da30 0x7f5624009c00
[WARN] [6243726027020735] No stream, queueing this trickle as it got here before the SDP…
[6243726027020735] Creating ICE agent (ICE Full mode, controlled)
[WARN] [6243726027020735] Failed to add some remote candidates (added 0, expected 1)
[WARN] [736181068510485] No stream, queueing this trickle as it got here before the SDP…
[736181068510485] Creating ICE agent (ICE Full mode, controlled)
[WARN] [736181068510485] Failed to add some remote candidates (added 0, expected 1)
[6243726027020735] The DTLS handshake has been completed
[janus.plugin.videoroom-0x7f55f800b930] WebRTC media is now available
[736181068510485] The DTLS handshake has been completed
[janus.plugin.videoroom-0x7f562400b970] WebRTC media is now available
React js webapp snippet:
const initializeJanusSession = (roomId) => {
Janus.init({
debug: "all",
callback: () => {
if (!Janus.isWebrtcSupported()) {
alert("No WebRTC support... ");
return;
}
const janusInstance = new Janus({
server: 'wss://websocket.my.domain/janus',
iceServers: [
{ urls: 'stun:stun.l.google.com:19302' }
],
success: () => {
janusInstance.attach({
plugin: "janus.plugin.videoroom",
success: (pluginHandleInstance) => {
console.log('Plugin attached!');
pluginHandle.current = pluginHandleInstance;
const register = {
request: "join",
room: roomId,
ptype: "publisher",
display: uuidv4()
};
pluginHandle.current.send({ message: register });
pluginHandle.current.createOffer({
stream: localStream,
trickle: true, // Enable trickle ICE
media: { audioRecv: false, videoRecv: false, audioSend: true, videoSend: true },
success: (jsep) => {
if (!jsep || !jsep.sdp) {
throw new Error('SDP is null');
}
const publish = {
request: "configure",
audio: true,
video: true
};
pluginHandle.current.send({ message: publish, jsep });
},
error: (error) => {
console.error("WebRTC error:", error);
}
});
},
error: (error) => {
console.error("Error attaching plugin", error);
},
onmessage: (msg, jsep) => {
if (jsep) {
pluginHandle.current.handleRemoteJsep({ jsep });
}
},
onlocalstream: (stream) => {
console.log('Local stream received:', stream);
if (localVideoRef.current) {
localVideoRef.current.srcObject = stream;
}
},
onremotestream: (stream) => {
console.log('Remote stream received:', stream);
setRemoteStream(stream);
if (remoteVideoRef.current) {
remoteVideoRef.current.srcObject = stream;
}
},
oniceconnectionstatechange: () => {
const state = pluginHandle.current.webrtcStuff.pc.iceConnectionState;
console.log('ICE Connection State changed to:', state);
},
onsignalingstatechange: () => {
const state = pluginHandle.current.webrtcStuff.pc.signalingState;
console.log('Signaling State changed to:', state);
},
oncleanup: () => {
console.log("Cleanup notification");
}
});
},
error: (error) => {
console.error("Janus error", error);
},
destroyed: () => {
console.log("Janus instance destroyed");
}
});
setJanus(janusInstance);
}
});
};
Am I missing something? Can you address me to a possible solution to this problem?
Thanks!