[IFrame] could not detect audio and video on production

I’m having issues detecting audio and video on my page with jitsi IFrame on it. However, it works well on my development machine as well as in meet.jit.si website. This error only occurs on production. How do I properly debug this?

Here is my basic setup

const meetElem = document.querySelector("#meet")
if (meetElem) {
  const roomName = meetElem.dataset.className
  const username = meetElem.dataset.username
  const domain = 'meet.jit.si'
  console.log("joining room ", roomName)
  const options = {
      roomName: roomName,
      width: 640,
      height: 360,
      parentNode: document.querySelector('#meet'),
      userInfo: {displayName: username}
  }
  const api = new JitsiMeetExternalAPI(domain, options)
  window.jitsi = api

  api.addEventListener('displayNameChanged', function(e) {
    api.executeCommand('displayName', username)
  })
}

Below is the error that I got.

2020-07-30T11:45:37.500Z [features/base/tracks] <u/</<>:  Failed to create local tracks 
Array [ "audio", "video" ]
 TypeError: navigator.mediaDevices is undefined
    _newGetUserMediaWithConstraints RTCUtils.js:996
    _newGetUserMediaWithConstraints RTCUtils.js:995
    i RTCUtils.js:1365
Logger.js:154:22
    o Logger.js:154
    u functions.js:121

BTW, I don’t have SSL on my production. Is that necessary?

yes

I’ve installed certbot on the server and it worked. Thank you!