130 lines
4.2 KiB
JavaScript
130 lines
4.2 KiB
JavaScript
const { createLocalVideoTrack, connect } = require('twilio-video');
|
|
const root = document.getElementById('videochat');
|
|
const remoteMedia = document.getElementById('remote-media');
|
|
const muteButton = document.getElementById('mute-toggle');
|
|
const videoToggleButton = document.getElementById('videohide-toggle');
|
|
const localMediaContainer = document.getElementById('local-media');
|
|
const roomType = document.getElementById('room-type').dataset.type; //Group
|
|
|
|
connect(root.dataset.token, {
|
|
name: 'room-name',
|
|
audio: true,
|
|
type: roomType,
|
|
video: { width: 800 },
|
|
}).then((room) => {
|
|
room.participants.forEach(participantConnected);
|
|
room.on('participantConnected', participantConnected);
|
|
|
|
room.on('participantDisconnected', participantDisconnected);
|
|
room.once('disconnected', (_error) =>
|
|
room.participants.forEach(participantDisconnected),
|
|
);
|
|
muteButton.onclick = function (e) {
|
|
e.preventDefault();
|
|
room.localParticipant.audioTracks.forEach(function (trackPub) {
|
|
if (muteButton.dataset.muted === 'true') {
|
|
muteButton.dataset.muted = 'false';
|
|
muteButton.classList.remove('crayons-btn--danger');
|
|
muteButton.innerHTML = 'Mute';
|
|
trackPub.track.enable();
|
|
} else {
|
|
muteButton.dataset.muted = 'true';
|
|
muteButton.classList.add('crayons-btn--danger');
|
|
muteButton.innerHTML = 'Unmute';
|
|
trackPub.track.disable();
|
|
}
|
|
});
|
|
};
|
|
|
|
videoToggleButton.onclick = function (e) {
|
|
e.preventDefault();
|
|
room.localParticipant.videoTracks.forEach(function (trackPub) {
|
|
if (videoToggleButton.dataset.hidden === 'true') {
|
|
videoToggleButton.dataset.hidden = 'false';
|
|
videoToggleButton.classList.remove('crayons-btn--danger');
|
|
videoToggleButton.innerHTML = 'Hide';
|
|
localMediaContainer.classList.remove('video-hidden');
|
|
trackPub.track.enable();
|
|
} else {
|
|
videoToggleButton.dataset.hidden = 'true';
|
|
videoToggleButton.classList.add('crayons-btn--danger');
|
|
videoToggleButton.innerHTML = 'Unhide';
|
|
localMediaContainer.classList.add('video-hidden');
|
|
trackPub.track.disable();
|
|
}
|
|
});
|
|
};
|
|
});
|
|
|
|
createLocalVideoTrack().then((track) => {
|
|
localMediaContainer.appendChild(track.attach());
|
|
document.getElementById('video-controls').classList.add('showing');
|
|
});
|
|
|
|
function participantConnected(participant) {
|
|
const numExistingDivs = document.getElementsByClassName('individual-video')
|
|
.length;
|
|
const div = document.createElement('div');
|
|
div.id = participant.sid;
|
|
div.className = `individual-video${
|
|
numExistingDivs > 3 ? ' one-of-many-videos' : ''
|
|
}`;
|
|
div.innerHTML = `<div class="participant-info">\
|
|
<div class="participant-name">${participant.identity}</div>\
|
|
<div class="disabled-audio-indicator">audio off</div>\
|
|
<div class="disabled-video-indicator">video off</div>\
|
|
</div>`;
|
|
|
|
participant.on('trackSubscribed', (track) => trackSubscribed(div, track));
|
|
participant.on('trackUnsubscribed', trackUnsubscribed);
|
|
|
|
participant.on('trackDisabled', (track) => trackDisabled(div, track));
|
|
participant.on('trackEnabled', (track) => trackEnabled(div, track));
|
|
|
|
participant.tracks.forEach((publication) => {
|
|
if (publication.isSubscribed) {
|
|
trackSubscribed(div, publication.track);
|
|
}
|
|
});
|
|
remoteMedia.appendChild(div);
|
|
}
|
|
|
|
function participantDisconnected(participant) {
|
|
document.getElementById(participant.sid).remove();
|
|
}
|
|
|
|
function trackSubscribed(div, track) {
|
|
div.appendChild(track.attach());
|
|
if (!track.isEnabled) {
|
|
if (track.kind === 'video') {
|
|
div.classList.add('disabled-video');
|
|
} else {
|
|
div.classList.add('disabled-audio');
|
|
}
|
|
}
|
|
}
|
|
|
|
function trackUnsubscribed(track) {
|
|
track.detach().forEach((element) => element.remove());
|
|
}
|
|
|
|
function trackDisabled(div, track) {
|
|
if (track.kind === 'video') {
|
|
div.classList.add('disabled-video');
|
|
} else {
|
|
div.classList.add('disabled-audio');
|
|
}
|
|
}
|
|
|
|
function trackEnabled(div, track) {
|
|
if (track.kind === 'video') {
|
|
div.classList.remove('disabled-video');
|
|
} else {
|
|
div.classList.remove('disabled-audio');
|
|
}
|
|
}
|
|
|
|
if (navigator.userAgent === 'DEV-Native-ios') {
|
|
root.innerHTML =
|
|
'<h2 class="platform-unavailable-message">This feature is not yet available on iPhone</h2>';
|
|
}
|