lopushen
lopushen

Reputation: 1137

Twilio video calls: Permission denied in chrome only

I am trying to implement video calls using Twilio. Backend successfully generates token and I am using it to establish a video call. Upon requesting permission to access the mic and camera from the browser I get the following error in chrome:

Error with Feature-Policy header: Unrecognized feature: 'speaker'.

log.js:138 2020-09-08 16:12:12.867Z | WARN in [createLocalTracks #1]: Call to getUserMedia failed: DOMException: Permission denied

Upon running

 useEffect(() => {
    isWebRtcSupported();
      createRoom().then(response => {
        Video.connect(response.data.token)
          .then(room => {
            setCreatedRoomId(response.data.room);
            setRoomData(room);
            room.on('participantConnected', participantConnected);
            room.on('participantDisconnected', participantDisconnected);
            room.participants.forEach(participantConnected);
          })
          .catch(err => setError(error)));
    }

I am using twilio-video to connect. The connection succeeds in Firefox and Safari and in any browser on localhost (in any browser). Resetting permissions in the browser does not help, permissions in Chrome are granted. Can you please give a hint about what can be a problem?

Upvotes: 2

Views: 1442

Answers (1)

Valerii Sheremet
Valerii Sheremet

Reputation: 26

So, the problem was with Feature-Policy on back-end part. Back-end code was generated using JHipster, and it consisted the following code:

.featurePolicy("geolocation 'none'; midi 'none'; sync-xhr 'none'; microphone 'none'; camera 'none'; magnetometer 'none'; gyroscope 'none';

So basically using microphone and camera was prohibited. Changing none to * solved the problem and browser was able to gain access to audio and video stream. Funny, but Mozilla and Safari seem to be ignoring those directives, because everything worked fine in these browsers without any changes in policies.

Upvotes: 1

Related Questions