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:

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();
   }
 }

Tee · Answer 1 · 2019-10-28T21:12:30.923

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.

edited Oct 28 '19 at 21:12

answered Oct 28 '19 at 20:51

Tee

126
6

How did you remove picture in picture feature? – user2012677 Oct 29 '19 at 09:05
In the embed code copied from YouTube, there's an "allow" attribute that lists what the iframe is allowed to access: "gyroscope, accelerometer, autoplay, encrypted-media, picture-in-picture" are in there. You can edit that code directly by removing whichever you would like. I edited my answer because I was unable to confirm that removing picture-in-picture actually solved the problem for me. – Tee Oct 29 '19 at 13:27
In my case the iframe api creates it, so I would need to look how to prevent the pip using the api. thanks – user2012677 Oct 29 '19 at 14:53

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

Question:

Errors in Safari, but not Chrome:

Javascript Helper (wrapper for YT IframeAPI)

1 Answers1