Add WebRTC Data Channel Support to streaming-client.js #38
Conversation
| @@ -10,6 +10,8 @@ const remoteVideo = document.getElementById('remoteVideo'); | |||
| const myStream = parseInt(getURLParameter('stream')) || 1; | |||
| const myPin = getURLParameter('pin') || null; | |||
|
|
|||
| const decoder = new TextDecoder(); | |||
There was a problem hiding this comment.
datachannels are optional, do not initialize the decoder here, just declare a variable
let decoder;
| @@ -282,6 +284,22 @@ async function doAnswer(offer) { | |||
| //'sdpSemantics': 'unified-plan', | |||
| }); | |||
|
|
|||
| // DataChannel | |||
| pc.createDataChannel("channel"); | |||
There was a problem hiding this comment.
- use name
JanusDataChannel, since that is the one that Janus will use - again, datachannels are optional so inspect the
offer.sdpform=applicationlines before creating the DC, e.g.
if (/m=application [1-9]\d*/.test(offer.sdp)) {
// create dc and set callbacks
}
| // DataChannel | ||
| pc.createDataChannel("channel"); | ||
| pc.ondatachannel = (event) => { | ||
| const channel = event.channel; |
There was a problem hiding this comment.
please add a log here to notify a remote datachannel, e.g.
console.log(`new remote datachannel: ${channel.id} (${channel.label})`);
| if (event.data?.byteLength) { // is ArrayBuffer | ||
| decodedData = decoder.decode(event.data); | ||
| } | ||
| console.log(decodedData); |
There was a problem hiding this comment.
specify in the log message that the origin is datachannel e.g.
console.log(`datchannel ${channel.id} (${channel.label}) received`, decodedData);
| channel.onmessage = (event) => { | ||
| let decodedData = event.data; | ||
| if (event.data?.byteLength) { // is ArrayBuffer | ||
| decodedData = decoder.decode(event.data); |
There was a problem hiding this comment.
here you can initialize the decoder
decoder = decoder || new TextDecoder()
| pc.ondatachannel = (event) => { | ||
| const channel = event.channel; | ||
| channel.onopen = (event) => { | ||
| console.log("[pc.ondatachannel] Opening data channel!"); |
There was a problem hiding this comment.
change log message in
console.log(`datchannel ${channel.id} (${channel.label}) open`);
|
@guilherme-marcello are you still interested in merging this? |
|
Hello @atoppi ! Thank you for pointing out areas for improvement with such detail, I totally agree with your suggestions! I've added the suggested changes into the code, and I believe the enhancements will positively impact the functionality and maintainability of the WebRTC data channel handling in streaming-client.js, as I needed myself during a project. Thank you once again for your review! |
|
Sorry if maybe I was not clear enough. Check how janus.js handles dcs: https://github.com/meetecho/janus-gateway/blob/master/html/demos/janus.js#L1650 Basically you need to do both things if data are going to be negotiated:
For both channels, set up onopen/message/error/close callbacks with proper logging (local/remote and label) |
|
Hello! Thank you for the explanation. Hope is working properly right now. Cheers! |
|
Thanks, looking good now. If it's working I'll merge and then fix some small issues (basically linting and variable/function naming) by myself. |
|
Yes, it is working; I tested before pushing. Same tests as before, with the multistream version of Janus, checking both regular and binary data in the browser console. |
Description
This pull request adds support for WebRTC data channels in the
streaming-client.jsfile. It enables the creation of a data channel named "channel" in the PeerConnection and includes the necessary event handling for the data channel'sonopenandonmessageevents. Additionally, binary data received through the data channel is properly decoded using aTextDecoderinstance.Changes Made
TextDecoderinstance for decoding data.ondatachannelevent to set up callbacks foronopenandonmessage.TextDecoder.Testing
Tested the changes by integrating them with a Janus instance and verified that the data channel works as expected. Verified proper logging of both regular and binary data in the browser console.