I have a problem with React Webcam - https://github.com/mozmorris/react-webcam
In desktop app everything works great - tried it with create-react-app 2.0 recently - web app starts, asks for permission to use camera and when user allows, camera starts, screenshots work, everything is fine.
However when i copy the exact same component inside our chrome extension there is a problem. When user clicks "change profile photo" the extension opens new page:
chrome-extension://ebjbbcedbjkaagbpbkdlhlnbeoehjmgn/page.html#/uploadsnapshot
The Uploadsnapshot component renders fine, no visible errors (nothing in the console), in the html there is the React-Webcam component element:
<video autoplay="" width="132" height="132" class="UploadPhotoSnapshot__webcam__3VOiZ" playsinline=""></video>
But the camera doesn`t start and no "allow / block camera" popup appears.
I searched for solutions, tried adding "audioCapture" and "videoCapture" to permissions in my "manifest.json" as mentioned here: How to enable camera and microphone in packaged application for Chrome OS or Chrome extension?
It still will not ask for permission to use camera and will not start.
I also tried using different component: https://github.com/mabelanger/react-html5-camera-photo and got error when the component loads:
onCameraError DOMException: Invalid security origin
My component:
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;
my 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"
}
Do i somehow have to invoke the "allow / deny camera" popup inside the Chrome extension component? Would be very gratefull for any ideas/ help / hint / solutions.
