Heroku Hosted Page throws error - navigator.mediaDevices is undefined

Question

The following piece of code works fine when served from localhost, but when deployed to Heroku fails stating : TypeError: navigator.mediaDevices is undefined

navigator.mediaDevices.getUserMedia({audio: true, video: true}).then(function(stream){
    video = $('#myVid')[0];
    video.srcObject = stream;

    video.onloadedmetadata = function(e) {
        video.play();
    };

Including adapter.js from WebRtC does not help. Have you had a similar experience and got it resolved?

score 6 · Accepted Answer · answered Dec 14 '19 at 14:18

6

Like Google did years ago, Firefox is now (since v69) requiring a secure-context to access the MediaDevices API.
You must serve your website from https.

answered Dec 14 '19 at 14:18

Kaiido

123,334
13
219
285

score 0 · Answer 2 · answered Jun 29 '22 at 11:00

To extend Kaiido's answer.

In the case of running applications locally,

localhost is considered secure (docs)
0.0.0.0 is not considered secure. The application can be visited by other clients on the same network.

For example, if you launch a NextJS server, the output might suggest you could visit 0.0.0.0:3000:

started server on 0.0.0.0:3000, url: http://localhost:3000

You should visit the http://localhost:3000 to avoid this error.

Heroku Hosted Page throws error - navigator.mediaDevices is undefined

2 Answers2