75 lines
1.7 KiB
JavaScript
75 lines
1.7 KiB
JavaScript
const socket = io('/')
|
|
const videoGrid = document.getElementById('video-grid')
|
|
const myPeer = new Peer(undefined, {
|
|
host: location.hostname,
|
|
path: '/peerjs/domingo'
|
|
})
|
|
|
|
|
|
const myVideo = document.createElement('video')
|
|
myVideo.muted = true
|
|
myVideo.setAttribute("playsinline", true);
|
|
|
|
const peers = {}
|
|
|
|
var facingMode = "user";
|
|
|
|
navigator.mediaDevices.getUserMedia({
|
|
video: {
|
|
facingMode: facingMode
|
|
},
|
|
audio: true // TODO: set to true
|
|
}).then(stream => {
|
|
addVideoStream(myVideo, stream)
|
|
|
|
myPeer.on('call', call => {
|
|
call.answer(stream)
|
|
|
|
const video = document.createElement('video')
|
|
video.setAttribute("playsinline", true);
|
|
call.on('stream', userVideoStream => {
|
|
addVideoStream(video, userVideoStream)
|
|
})
|
|
})
|
|
|
|
socket.on('user-connected', userId => {
|
|
connectToNewUser(userId, stream)
|
|
})
|
|
})
|
|
|
|
socket.on('user-disconnected', userId => {
|
|
console.log("User disconnected: ", userId)
|
|
if (peers[userId]) peers[userId].close()
|
|
})
|
|
|
|
myPeer.on('open', id => {
|
|
socket.emit('join-room', ROOM_ID, id)
|
|
})
|
|
|
|
socket.on('user-connected', userId => {
|
|
console.log('User connected: ', userId)
|
|
})
|
|
|
|
function addVideoStream(video, stream) {
|
|
video.srcObject = stream
|
|
video.addEventListener('loadedmetadata', () => {
|
|
video.play()
|
|
})
|
|
videoGrid.append(video)
|
|
}
|
|
|
|
function connectToNewUser(userId, stream) {
|
|
const call = myPeer.call(userId, stream)
|
|
const video = document.createElement('video')
|
|
video.setAttribute("playsinline", true);
|
|
call.on('stream', userVideoStream => {
|
|
addVideoStream(video, userVideoStream)
|
|
})
|
|
|
|
call.on('close', () => {
|
|
video.remove()
|
|
})
|
|
|
|
peers[userId] = call
|
|
}
|