javascript - Not recieving remote video stream when accessing by directly modifying url params

Question

So I've started playing around with the simple mediasoup demo found here: https://github.com/Dirvann/mediasoup-sfu-webrtc-video-rooms

I setup the demo and all is working fine.

The first thing I'm trying to do is add url params to bypass the login screen, which should be easy, right? But for some reason, when you navigate to a room by directly modifying the url params, it does not display the remote streams of other users in the room! And it does display the streams of other users in the room when the user joins a room using the login form.

It baffles me because whether you click the 'join' button on the login form, or your url has the params already present, the exact same js method is being executed!

Here I will demonstrate the execution flow:

Initially we have 1 user sharing webcam in room 123. A second user navigates to the url without relevant params present and as such, they are presented with the login form:

Upon checking the details, the user realises the defaults are fine and proceeds to click the join button. This calls a simple function that adds the room and user values to the URL by updating window.location.href (it causes a page refresh)

When the page refresh completes, the necessary params are present, which causes the video room to load and the remote stream to display, as depicted:

However the problem occurs when we don't login via the form, and we directly add those necessary params to the url ourselves. As depicted: There should be a remote stream here, because it's the same room as in the previous image. I'm clueless as to why this issue is occurring.

Here is my index.js file, my changes are all within the slashes, near the bottom of the file:

if (location.href.substr(0, 5) !== 'https')
  location.href = 'https' + location.href.substr(4, location.href.length - 4)

const socket = io()


let producer = null;

nameInput.value = 'bob' + Math.round(Math.random() * 1000)

socket.request = function request(type, data = {}) {
  return new Promise((resolve, reject) => {
    socket.emit(type, data, (data) => {
      if (data.error) {
        reject(data.error)
      } else {
        resolve(data)
      }
    })
  })
}

let rc = null

function joinRoom(name, room_id) {
  if (rc && rc.isOpen()) {
    console.log('already connected to a room')
  } else {
    rc = new RoomClient(localMedia, remoteVideos, remoteAudios, window.mediasoupClient, socket, room_id, name, roomOpen)

    addListeners()
  }

}



function roomOpen() {
  login.className = 'hidden'
  reveal(startAudioButton)
  hide(stopAudioButton)
  reveal(startVideoButton)
  hide(stopVideoButton)
  reveal(startScreenButton)
  hide(stopScreenButton)
  reveal(exitButton)
  control.className = ''
  reveal(videoMedia)
}

function hide(elem) {
  elem.className = 'hidden'
}

function reveal(elem) {
  elem.className = ''
}


function addListeners() {
  rc.on(RoomClient.EVENTS.startScreen, () => {
    hide(startScreenButton)
    reveal(stopScreenButton)
  })

  rc.on(RoomClient.EVENTS.stopScreen, () => {
    hide(stopScreenButton)
    reveal(startScreenButton)

  })

  rc.on(RoomClient.EVENTS.stopAudio, () => {
    hide(stopAudioButton)
    reveal(startAudioButton)

  })
  rc.on(RoomClient.EVENTS.startAudio, () => {
    hide(startAudioButton)
    reveal(stopAudioButton)
  })

  rc.on(RoomClient.EVENTS.startVideo, () => {
    hide(startVideoButton)
    reveal(stopVideoButton)
  })
  rc.on(RoomClient.EVENTS.stopVideo, () => {
    hide(stopVideoButton)
    reveal(startVideoButton)
  })
  rc.on(RoomClient.EVENTS.exitRoom, () => {
    hide(control)
    reveal(login)
    hide(videoMedia)

    /////////////////////////
    let indexOfQuestionMark = location.href.indexOf("?")
    location.href = location.href.split('').slice(0, indexOfQuestionMark-1).join('')
    /////////////////////////

  })
}

// Load mediaDevice options
navigator.mediaDevices.enumerateDevices().then(devices =>
  devices.forEach(device => {
    let el = null
    if ('audioinput' === device.kind) {
      el = audioSelect
    } else if ('videoinput' === device.kind) {
      el = videoSelect
    }
    if(!el) return

    let option = document.createElement('option')
    option.value = device.deviceId
    option.innerText = device.label
    el.appendChild(option)
  })
)
/////////////////////////
if (window.location.href.includes("?r=") && window.location.href.includes("n=")) {
  let indexOfRoomNumber = location.href.indexOf("?r=")+3
  let array = location.href.split('')
  let room = array.slice(indexOfRoomNumber,indexOfRoomNumber+3).join("")
  let username = array.slice(indexOfRoomNumber+6, array.length).join("")
  joinRoom(username,room)
  console.log(`Welcome to room: ${room}, ${username}`)

}

function addParams(name, room_id) {
  window.location.href = `${location.href}?r=${room_id}+n=${name}`
}
//////////////////////////

question from:https://stackoverflow.com/questions/65943776/not-recieving-remote-video-stream-when-accessing-by-directly-modifying-url-param

Answer 1

The only difference is that you don't use user interaction for establishing the connection. There is user interaction needed for certain actions in the browser and this could be the reason why it doesn't work. Autoplay policy changes.

Adding a button to execute joinRoom when you're on the page could solve the issue.