Question

我对React Webcam有问题-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：无效的安全来源

我的组件

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

我找到了问题并解决。全部归结为manifest.json文件中的
"sandbox": { "pages": ["page.html"] },
。当您使用“沙盒”时，内容安全性源阻止了所有内容。
我删除了它，一切正常。相机，录音，屏幕截图。

React Webcam组件在Chrome扩展程序中不起作用

2 个答案: