reactjs - React 网络摄像头组件在 chrome 扩展中不起作用

Question

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

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

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

chrome-extension://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: Invalid security origin

我的组件:

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;

我的 list .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"