不安全上下文中 getUserMedia 的不一致行为

Question

为了学习，我正在尝试自己构建一个 Blazeface 演示 1。例如，我使用 Webpack 而不是 yarn，并且我删除了 Stats() 和后端选择器。

原始演示运行与 yarn watch 没问题，但是当我尝试复制代码时运行 webpack-dev-server 我从 TypeError: Cannot set property 'srcObject' of undefined getUserMedia() 在以下函数中调用。 Chrome 和 Firefox.

都会抛出异常

这是 Typescript 函数

async function setupCamera() {
    const video = document.getElementById('videoCamera') as HTMLVideoElement;
    const stream = await navigator.mediaDevices.getUserMedia({
        'audio': false,
        'video': {facingMode: 'user'}
    });
    video.srcObject = stream;   
    return new Promise((resolve) => {
        video.onloadedmetadata = () => {
            resolve(video);
        };
    });
}

这是浏览器读取的美化捆绑 Javascript 函数。

async function l() {
    const t = await navigator.mediaDevices.getUserMedia({audio:!1,video: 
                                                        {facingMode:"user"}});
    return (void 0).srcObject = t,
    new Promise(t=>{
        (void 0).onloadedmetadata = ()=>{
                t(void 0)
        }
    }
)}

我知道抛出错误是因为我在不安全的上下文中使用 navigator.mediaDevices，即本地主机服务器。

Blazeface 演示运行如何在本地主机上没有问题，而我的代码抛出异常？

编辑：在我提到的工作解决方案 package.json 中添加 yarn watch 脚本可能有用：

"watch": "cross-env NODE_ENV=development parcel index.html --no-hmr"

Answer 1

我通过在 tsconfig.json 中将 "target": "es2017" 更改为 "target": "es6" 解决了这个问题。

不安全上下文中 getUserMedia 的不一致行为

Inconsistent behavior from getUserMedia in insecure context

javascript

typescript

tensorflow.js