Welcome to Zoom Video SDK

// Twilio Video:
import * as TwilioVideo from 'twilio-video'

var twilioVideo = TwilioVideo
var twilioRoom

twilioVideo.connect(TOKEN, {name: 'yourName'}).then((room) => {
  twilioRoom = room
})

// Zoom Video SDK:
import ZoomVideo from '@zoom/videosdk'

var zoomVideo = ZoomVideo.createClient()
var zoomSession

zoomVideo.init('en-US', 'Global', { patchJsMedia: true }).then(() => {
  zoomVideo.join('sessionName', TOKEN, 'yourName', 'sessionPasscode').then(() => {
    zoomSession = zoomVideo.getMediaStream()
  })
})

// Twilio Video:

// Start:
twilioVideo.createLocalVideoTrack({
  height: { ideal: 720, min: 480, max: 1080 },
  width: { ideal: 1280, min: 640, max: 1920 },
  aspectRatio: 16 / 9,
}).then((localVideoTrack) => {
  twilioRoom.localParticipant.publishTrack(localVideoTrack)

  const localMediaContainer = document.getElementById('twilio-self-view-div')

  localMediaContainer.appendChild(localVideoTrack.attach())
})

// Stop:
twilioRoom.localParticipant.videoTracks.forEach((publication) => {
  publication.unpublish()
  publication.track.stop()
  var selfTwilioVideo = document.getElementById('twilio-self-view-div')
  selfTwilioVideo.querySelector('video').remove()
})

// Zoom Video SDK:

// Start:
zoomSession.startVideo().then(() => {
  zoomSession.attachVideo(zoomVideo.getCurrentUserInfo().userId, RESOLUTION).then((userVideo) => {
    document.querySelector('video-player-container').appendChild(userVideo)
  })
})

// Stop:
zoomSession.stopVideo().then(() => {
  zoomSession.detachVideo(USER_ID)
})

// Twilio Video:
twilioRoom.on('participantConnected', (participant) => {
  participant.on('trackSubscribed', (track) => {
    document.getElementById('twilio-user-view-div').appendChild(track.attach())
  })

  participant.on('trackUnsubscribed', (track) => {
    var selfTwilioVideo = document.getElementById('twilio-user-view-div')
    selfTwilioVideo.querySelector('video').remove()
  })
})

// Zoom Video SDK:
zoomVideo.on('peer-video-state-change', (payload) => {
  if (payload.action === 'Start') {
    zoomSession.attachVideo(payload.userId, 3).then((userVideo) => {
      document.querySelector('video-player-container').appendChild(userVideo)
    })
  } else if (payload.action === 'Stop') {
    zoomSession.detachVideo(payload.userId)
  }
})

// Twilio Video:

// Start Audio:
twilioVideo.createLocalAudioTrack().then((localAudioTrack) => {
  twilioRoom.localParticipant.publishTrack(localAudioTrack)
  const audioElement = localAudioTrack.attach()
  document.body.appendChild(audioElement)
})

// Unmute:
twilioRoom.localParticipant.audioTracks.forEach((publication) => {
  publication.track.enable()
})

// Mute:
twilioRoom.localParticipant.audioTracks.forEach((publication) => {
  publication.track.disable()
})

// Zoom Video SDK:

// Start Audio:
zoomSession.startAudio()

// Unmute:
zoomSession.unmuteAudio()

// Mute:
zoomSession.muteAudio()

// Twilio Video:
twilioVideo.disconnect()

// Zoom Video SDK:
zoomVideo.leave()