Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add WebRTC Data Channel Support to streaming-client.js #38

Merged
merged 6 commits into from
Mar 2, 2024
Merged

Add WebRTC Data Channel Support to streaming-client.js #38

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ef315a4
Added data channel creation to streaming client
guilherme-marcello Aug 30, 2023
6727002
Added handle to print received messages from datachannel (streaming c…
guilherme-marcello Aug 30, 2023
31f5c72
Implemented data channel decode if it's array buffer (streaming client)
guilherme-marcello Aug 30, 2023
e00e76c
Merge branch 'meetecho:master' into master
guilherme-marcello Feb 13, 2024
88cdf06
Improved logging and initialization of data channels in streaming test
guilherme-marcello Mar 1, 2024
8b52ad6
Fixed WebRTC Data Channel setup for streaming client example for remo…
guilherme-marcello Mar 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 38 additions & 1 deletion examples/streaming/html/streaming-client.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ const remoteVideo = document.getElementById('remoteVideo');
const myStream = parseInt(getURLParameter('stream')) || 1;
const myPin = getURLParameter('pin') || null;

let decoder;

const button = document.getElementById('button');
button.onclick = () => {
if (socket.connected)
Expand Down Expand Up @@ -273,6 +275,31 @@ socket.on('created', ({ data }) => console.log('mountpoint created', data));

socket.on('destroyed', ({ data }) => console.log('mountpoint destroyed', data));

function _setupDataChannelCallbacks(channel, isLocal) {
const labelPrefix = isLocal ? 'Local' : 'Remote';

channel.onopen = (event) => {
console.log(`${labelPrefix} Datachannel ${channel.id} (${channel.label}) open`);
};

channel.onmessage = (event) => {
decoder = decoder || new TextDecoder(); // initialize the decoder
let decodedData = event.data;
if (event.data?.byteLength) { // is ArrayBuffer
decodedData = decoder.decode(event.data);
}
console.log(`${labelPrefix} Datachannel ${channel.id} (${channel.label}) received`, decodedData);
};

channel.onclose = () => {
console.log(`${labelPrefix} Datachannel ${channel.id} (${channel.label}) closed`);
};

channel.onerror = (error) => {
console.error(`${labelPrefix} Datachannel ${channel.id} (${channel.label}) error:`, error);
};
}

async function doAnswer(offer) {
if (!streamingPeerConnection) {
const pc = new RTCPeerConnection({
Expand All @@ -282,6 +309,16 @@ async function doAnswer(offer) {
//'sdpSemantics': 'unified-plan',
});

// inspect the offer.sdp for m=application lines before creating the DataChannel
if (/m=application [1-9]\d*/.test(offer.sdp)) {
const localChannel = pc.createDataChannel("JanusDataChannel");
_setupDataChannelCallbacks(localChannel, true);

pc.ondatachannel = (event) => {
const remoteChannel = event.channel;
_setupDataChannelCallbacks(remoteChannel, false);
};
}
pc.onnegotiationneeded = event => console.log('pc.onnegotiationneeded', event);
pc.onicecandidate = event => trickle({ candidate: event.candidate });
pc.oniceconnectionstatechange = () => {
Expand Down Expand Up @@ -343,4 +380,4 @@ function closePC(pc = streamingPeerConnection) {
pc.ontrack = null;
pc.close();
if (pc === streamingPeerConnection) streamingPeerConnection = null;
}
}
Loading