带有“unsafely-treat-insecure-origin-as-secure”标志的无头 Chrome 上的媒体设备行为不一致答案

【问题标题】：Inconsistent mediadevice behavior on headless Chrome with `unsafely-treat-insecure-origin-as-secure` flag带有“unsafely-treat-insecure-origin-as-secure”标志的无头 Chrome 上的媒体设备行为不一致
【发布时间】：2019-06-06 09:18:26
【问题描述】：

我在使用 headless Chrome 时遇到了一些看似不一致的行为。我正在尝试使用unsafely-treat-insecure-origin-as-secure 标志在localhost 以外的域上使用无头Chrome 测试媒体设备。

问题是，当 Chrome 正常运行时，媒体设备按预期工作，但在无头运行时，它们无法加载。

我正在测试的 HTML (media.html)：

<html>
  <head>
  </head>

  <body>
    <video id="video"></video>

    <script>
      navigator.mediaDevices.getUserMedia({audio: true, video: {width: 1280, height: 720}})
      .then(function(stream) {
        var video = document.querySelector('#video');
        video.srcObject = stream;

        video.onloadedmetadata = function() {
          video.play();
        };
      }).catch(function() {
        console.log("Failed to get media devices");
      });
    </script>
  </body>
</html>

运行 Chrome 后，它会按预期工作：

chromium --unsafely-treat-insecure-origin-as-secure=http://lvh.me:8000 --use-fake-device-for-media-stream --use-fake-ui-for-media-stream --remote-debugging-port=9222 "http://lvh.me:8000/media.html"

使用python2 -m SimpleHTTPServer 8000 作为网络服务器。

但是，在无头模式下运行 Chrome：

chromium --headless --unsafely-treat-insecure-origin-as-secure=http://lvh.me:8000 --use-fake-device-for-media-stream --use-fake-ui-for-media-stream --remote-debugging-port=9222 "http://lvh.me:8000/media.html"

然后转到http://localhost:9222/ 会得到以下结果：

Uncaught TypeError: Cannot read property 'getUserMedia' of undefined
    at media.html:9

有谁知道这种不一致来自哪里？为什么无头 Chrome 似乎不尊重 unsafely-treat-insecure-origin-as-secure 标志？

【问题讨论】：

标签： javascript google-chrome webrtc chromium getusermedia