121 lines
No EOL
4.2 KiB
JavaScript
121 lines
No EOL
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>'
|
|
} |