Trying to call enumerateDevices from a frame without correct 'allow' attribute

Question

Question:

What is causing the below errors and how do I fix it?

I found this, but can't read Japanese:

https://bisyokuden.com/archives/433

might have something to do with webkit.

https://github.com/WebKit/webkit/blob/master/LayoutTests/http/tests/media/media-stream/enumerate-devices-iframe-allow-attribute-expected.txt

Errors in Safari, but not Chrome:

[Error] Trying to call enumerateDevices from a frame without correct 'allow' attribute.
    (anonymous function) (Anonymous Script 1 (line 1))
    MN (Anonymous Script 2 (line 2:7482))
    (anonymous function) (Anonymous Script 2 (line 2:10663))
    (anonymous function) (Anonymous Script 2 (line 2:6198))
    Wk (Anonymous Script 2 (line 2:5376))
    m (Anonymous Script 2 (line 2:6447))
    ut (Anonymous Script 2 (line 2:4204))
    f (Anonymous Script 2 (line 2:5151))
    (anonymous function) (Anonymous Script 2 (line 2:12020))
    (anonymous function) (Anonymous Script 2 (line 2:11961))
    zf (www-embed-player.js:427)
    (anonymous function) (www-embed-player.js:426:114)
    f (www-embed-player.js:400:114)

[Error] Trying to call enumerateDevices from a frame without correct 'allow' attribute.
    (anonymous function) (Anonymous Script 1 (line 1))
    MN (Anonymous Script 3 (line 1:174))
    (anonymous function) (Anonymous Script 2 (line 2:10663))
    (anonymous function) (Anonymous Script 2 (line 2:6198))
    Wk (Anonymous Script 2 (line 2:5376))
    m (Anonymous Script 2 (line 2:6447))
    ut (Anonymous Script 2 (line 2:4204))
    f (Anonymous Script 2 (line 2:5151))
    (anonymous function) (Anonymous Script 2 (line 2:12020))
    (anonymous function) (Anonymous Script 2 (line 2:11961))
    Qo (base.js:967)
    (anonymous function) (base.js:4605:257)
    k (base.js:950:120)

Javascript Helper (wrapper for YT IframeAPI)

Helpers = window.Helpers || {};
Helpers.Google = Helpers.Google || {};
Helpers.Google.YT = Helpers.Google.YT || {};

Helpers.Google.YT = {

   Player: class Player {

    constructor(element = 'ytplayer', options = { playerVars: { controls: 1 },
                                                  height: '390',
                                                  width: '640',
                                                  videoId: 'novideoid',
                                                  events: {
                                                  'onReady': onPlayerReady,
                                                  'onStateChange': onPlayerStateChange
                                                }}, StubPlayerInstance = null ) {

      if (StubPlayerInstance == undefined) {
        this.player = new YT.Player(element, options);
      } else {
        this.player = StubPlayerInstance;
      }
    }

    loadVideoById($element) {
      var videoId = $element.data('video-id');
      var x = new String(videoId);
      this.player.loadVideoById(x);
    }

    init(modalId){
      const thatInstance = this;
      $(modalId).on('show.bs.modal', function(e) {
        thatInstance.loadVideoById($(e.relatedTarget));
      });  
      return this.player;    
    }
  }
}

var player;


function onYouTubeIframeAPIReady() {
  player = new Helpers.Google.YT.Player().init('#video-modal');
}

function onPlayerReady(event) {
   $('.open-popup').click(function() {
     event.target.playVideo();
   });
   $('.close-popup').click(function(e) {
     player.stopVideo();
   });
 }

function onPlayerStateChange(event) {
   if(event.data === 0) {           
     $('.close.close-popup').click();
   }
 }

Answer 1

I ran into a similar problem (the embedded YouTube video still worked on my page, but I still saw the error in the console), and found the same resources you linked to. Not much more out there ...

This post describes a similar problem. Without seeing your HTML, I can't tell if it would help - but they landed on an unclosed <iframe> tag as the solution.