React Webcam组件在chrome扩展中不起作用

Question

我有React网络摄像头问题 - https://github.com/mozmorris/react-webcam

在桌面应用程序中一切都很好 - 最近尝试使用create-react-app 2.0 - 网络应用程序启动，要求允许使用相机，当用户允许，相机启动，截图工作，一切都很好。

但是，当我在chrome扩展中复制完全相同的组件时，会出现问题。当用户点击“更改个人资料照片”时，扩展程序会打开新页面：

镀铬的扩展：//ebjbbcedbjkaagbpbkdlhlnbeoehjmgn/page.html#/uploadsnapshot

Uploadsnapshot组件呈现正常，没有可见错误（控制台中没有任何内容），在html中有React-Webcam组件元素：

<video autoplay="" width="132" height="132" class="UploadPhotoSnapshot__webcam__3VOiZ" playsinline=""></video>

但是相机没有启动，并且没有出现“允许/阻止相机”弹出窗口。

我搜索了解决方案，尝试将“audioCapture”和“videoCapture”添加到我的“manifest.json”中的权限，如下所述：How to enable camera and microphone in packaged application for Chrome OS or Chrome extension?

它仍然不会要求使用相机的许可，也不会启动。

我也尝试使用不同的组件：https://github.com/mabelanger/react-html5-camera-photo并在组件加载时出错：

onCameraError DOMException：无效的安全源

我的组件：

import React, {Component} from 'react';
import Webcam from "react-webcam";
import styles from "./UploadPhotoSnapshot.css";

class UploadPhotoSnapshot extends Component {

    constructor(props) {
        super(props);
        this.state = {
            activeImg: null,
            imagesArr: []
        }
    }

    setRef = webcam => {
        this.webcam = webcam;
    };
    capture = () => {
        let shot = this.webcam.getScreenshot();
        let newArr = [...this.state.imagesArr];
        newArr.unshift(shot);
        this.setState({
            activeImg: shot,
            imagesArr: newArr
        });
    };        

    render() {

        const videoConstraints = {
            width: 132,
            height: 132,
            facingMode: "user"
        };
        let imagesPreview = null;
        if (this.state.imagesArr.length > 0) {
            imagesPreview = (
                <div className={styles.webcamArrScroll}>
                    {this.state.imagesArr.map((image, index) => (
                       <img className={styles.webcamArrImg} src={image} alt="" key={index} />
                    ))}
                </div>
            );
        }

        return (
            <div className={styles.webcamDiv}>
                <Webcam
                    audio={false}
                    height={132}
                    ref={this.setRef}
                    screenshotFormat="image/jpeg"
                    width={132}
                    videoConstraints={videoConstraints}
                    className={styles.webcam}
                />
                <button className={styles.webcamBtnTakePhoto} onClick={this.capture}>Take a snapshot</button>
                <div className={styles.webcamArr}>
                    {imagesPreview}
                </div>                
                <div className={styles.buttons}>
                    <button className={styles.buttonText}>Cancel</button>
                    <button className={styles.buttonSetPhoto} onClick={this.hasFileUploaded}>Set a profile photo</button>
                </div>
            </div>
        );
    }
}

export default UploadPhotoSnapshot;

我的manifest.json：

{
    "manifest_version": 2,
    "name": "DEV",
    "description": "dev",
    "version": "4.0.0",
    "content_security_policy": "script-src 'self' 'unsafe-eval' https://ssl.google-analytics.com https://apis.google.com https://www.google-analytics.com; object-src 'self'",
    "default_locale": "en",
    "background": {
        "scripts": ["background.js"]
    },
    "browser_action": {
        "default_icon": "/icons/icon_48.png",
        "default_popup": "index.html"
    },
    "icons": {
        "16": "/icons/icon_16.png",
        "32": "/icons/icon_32.png",
        "48": "/icons/icon_48.png",
        "64": "/icons/icon_64.png",
        "128": "/icons/icon_128.png"
    },
    "web_accessible_resources": [
        "app/*",
        "/images/*",
        "favicon.ico"
    ],
    "sandbox": {
        "pages": ["page.html"]
    },
    "commands": {
        "_execute_browser_action": {
            "suggested_key": {
                "default": "Alt+P"
            }
        }
    },
    "permissions": [
        "tabs",
        "storage",
        "identity",
        "audioCapture",
        "videoCapture",
        "identity.email"        
    ],
    "oauth2": {
        "client_id": "12345.apps.googleusercontent.com",
        "scopes": [
            "email",
            "profile",
            "https://www.googleapis.com/auth/contacts.readonly"
        ]
    },

"key": "12345"
}

我是否必须以某种方式调用Chrome扩展组件中的“允许/拒绝相机”弹出窗口？非常感谢任何想法/帮助/提示/解决方案。

Answer 1

这可能与使扩展程序崩溃的this Chromium bug有关（尽管你没有得到完全相同的错误）。

请在此处查看可能重复的解决方案：Chrome Extension - getUserMedia throws "NotAllowedError: Failed due to shutdown"

Answer 2

我发现了问题并修复了它。这一切都归结为

"sandbox": {
        "pages": ["page.html"]
    },

在manifest.json文件中。当您使用“沙盒”时，内容安全源会阻止所有内容。 我删除了它，一切正常。相机，录音，截图。