script.js 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. const socket = io('/')
  2. const videoGrid = document.getElementById('video-grid')
  3. let myPeer = null
  4. const myVideo = document.createElement('video')
  5. myVideo.muted = true
  6. const peers = {}
  7. navigator.mediaDevices.getUserMedia({
  8. video: true,
  9. audio: true
  10. }).then(stream => {
  11. myPeer = new Peer(undefined, {
  12. host: '/',
  13. port: '4231'
  14. })
  15. addVideoStream(myVideo, stream)
  16. myPeer.on('call', call => {
  17. call.answer(stream)
  18. })
  19. myPeer.on('open', id => {
  20. socket.emit('join-room', ROOM_ID, id)
  21. })
  22. socket.on('connected-clients', connectedClients => {
  23. for (const userId in connectedClients) {
  24. connectToNewUser(connectedClients[userId], stream)
  25. }
  26. })
  27. socket.on('user-connected', userId => {
  28. connectToNewUser(userId, stream)
  29. })
  30. }).catch(error=>{
  31. console.log("Error: ",error)
  32. })
  33. socket.on('user-disconnected', userId => {
  34. if (peers[userId]) peers[userId].close()
  35. })
  36. function connectToNewUser(userId, stream) {
  37. const call = myPeer.call(userId, stream)
  38. const video = document.createElement('video')
  39. call.on('stream', userVideoStream => {
  40. addVideoStream(video, userVideoStream)
  41. })
  42. call.on('close', () => {
  43. video.remove()
  44. })
  45. peers[userId] = call
  46. }
  47. function addVideoStream(video, stream) {
  48. video.srcObject = stream
  49. video.addEventListener('loadedmetadata', () => {
  50. video.play()
  51. })
  52. videoGrid.append(video)
  53. }