Reactjs React网络摄像头组件在chrome扩展中不起作用
我的React网络摄像头有问题- 在桌面应用程序中,一切都很好-最近试用了create react app 2.0-web应用程序启动,请求使用摄像头的许可,当用户允许时,摄像头启动,屏幕截图工作,一切正常 然而,当我在我们的chrome扩展中复制完全相同的组件时,出现了一个问题。当用户单击“更改配置文件照片”时,扩展将打开新页面: 铬-extension://ebjbbcedbjkaagbpbkdlhlnbeoehjmgn/page.html#/uploadsnapshot Uploadsnapshot组件呈现良好,没有可见错误(控制台中没有),html中有React Webcam组件元素:Reactjs React网络摄像头组件在chrome扩展中不起作用,reactjs,google-chrome-extension,webcam,Reactjs,Google Chrome Extension,Webcam,我的React网络摄像头有问题- 在桌面应用程序中,一切都很好-最近试用了create react app 2.0-web应用程序启动,请求使用摄像头的许可,当用户允许时,摄像头启动,屏幕截图工作,一切正常 然而,当我在我们的chrome扩展中复制完全相同的组件时,出现了一个问题。当用户单击“更改配置文件照片”时,扩展将打开新页面: 铬-extension://ebjbbcedbjkaagbpbkdlhlnbeoehjmgn/page.html#/uploadsnapshot Uploadsna
<video autoplay="" width="132" height="132" class="UploadPhotoSnapshot__webcam__3VOiZ" playsinline=""></video>
我是否必须调用Chrome扩展组件中的“允许/拒绝摄像头”弹出窗口?
非常感谢您提供任何想法/帮助/提示/解决方案。这可能与导致扩展崩溃的原因有关(尽管您没有得到完全相同的错误)
请在此处查看可能重复的解决方案:我找到了问题并解决了它。 这一切都归结为“沙箱”:{ “页面”:[“page.html”]
},
在manifest.json文件中。当您使用“沙盒”时,内容安全源会阻止一切。
我删除了它,一切正常。摄像头、录音、屏幕截图。My
manifest.json
不包括sandbox
条目,我仍然遇到同样的问题。您是否在后台脚本中请求权限?你能在这里分享该脚本的内容作为参考吗?
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_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"
}