119 lines
3.7 KiB
JavaScript
119 lines
3.7 KiB
JavaScript
import { h, Component, render } from 'preact';
|
|
import PropTypes from 'prop-types';
|
|
|
|
const root = document.getElementById('chat')
|
|
|
|
|
|
export default class VideoChat extends Component {
|
|
|
|
componentDidMount() {
|
|
this.setupCallChannel(root.dataset.token)
|
|
}
|
|
|
|
setupCallChannel = token => {
|
|
const component = this;
|
|
const activeChannelId = root.dataset.channel
|
|
console.log()
|
|
import('twilio-video').then(({ connect, createLocalVideoTrack }) => {
|
|
connect(
|
|
token,
|
|
{
|
|
name: `private-video-channel-${activeChannelId}`,
|
|
audio: true,
|
|
type: 'peer-to-peer',
|
|
video: { width: 640 },
|
|
},
|
|
).then(
|
|
function onConnectSuccess(room) {
|
|
console.log(room)
|
|
component.setState({ token: token, room });
|
|
createLocalVideoTrack().then(track => {
|
|
const localMediaContainer = document.getElementById(
|
|
'videolocalscreen',
|
|
);
|
|
localMediaContainer.appendChild(track.attach());
|
|
});
|
|
const roomParticipants = [];
|
|
room.participants.forEach(participant => {
|
|
component.triggerRemoteJoin(participant);
|
|
roomParticipants.push(participant);
|
|
});
|
|
component.setState({ participants: roomParticipants });
|
|
room.on('participantConnected', function onParticipantConnected(
|
|
participant,
|
|
) {
|
|
console.log('participant joined')
|
|
component.triggerRemoteJoin(participant);
|
|
room.participants.forEach(p => {
|
|
roomParticipants.push(p);
|
|
});
|
|
component.setState({ participants: roomParticipants });
|
|
room.on(
|
|
'participantDisconnected',
|
|
function onParticipantDisconnected() {
|
|
console.log('disconnected')
|
|
},
|
|
);
|
|
participant.on('dominantSpeakerChanged', dominantSpeaker => {
|
|
// eslint-disable-next-line no-console
|
|
console.log(
|
|
'The new dominant speaker in the Room is:',
|
|
dominantSpeaker,
|
|
);
|
|
});
|
|
});
|
|
},
|
|
function onConnectFailure(error) {
|
|
document.getElementById('videoremotescreen').innerHTML = '';
|
|
// eslint-disable-next-line no-console
|
|
console.error(`Unable to connect to Room: ${error.message}`);
|
|
},
|
|
);
|
|
});
|
|
};
|
|
|
|
triggerRemoteJoin = participant => {
|
|
participant.on('trackSubscribed', track => {
|
|
console.log(track)
|
|
if (!document.getElementById(`${track.kind}-${track.id}`)) {
|
|
const trackDiv = document.createElement('div');
|
|
trackDiv.className = `chat__videocalltrackdiv--${track.kind}`;
|
|
trackDiv.id = participant.sid;
|
|
trackDiv.appendChild(track.attach());
|
|
document.getElementById('videoremotescreen').appendChild(trackDiv);
|
|
document.getElementById(
|
|
'videoremotescreen',
|
|
).lastChild.id = `${track.kind}-${track.sid}`;
|
|
}
|
|
});
|
|
participant.on('trackRemoved', track => {
|
|
if (document.getElementById(track.id)) {
|
|
document.getElementById(track.id).outerHTML = '';
|
|
}
|
|
});
|
|
// participant.on('trackDisabled', track => {
|
|
// console.log('disabled')
|
|
// console.log('TODO: Show track status on video')
|
|
// console.log(track.mediaStreamTrack.id)
|
|
// });
|
|
// participant.on('trackEnabled', track => {
|
|
// console.log('enabled')
|
|
// console.log('TODO: Show track status on video')
|
|
// console.log(track.mediaStreamTrack.id)
|
|
// });
|
|
};
|
|
|
|
|
|
render() {
|
|
|
|
return <div>
|
|
<div id="videoremotescreen"></div>
|
|
<div id="videolocalscreen"></div>
|
|
</div>
|
|
}
|
|
|
|
}
|
|
|
|
|
|
render(<VideoChat />, root, root.firstElementChild);
|
|
|