title: React Webcam component doesn`t work inside chrome extension
body: <p>I have a problem with React Webcam - <a href="https://github.com/mozmorris/react-webcam" rel="nofollow noreferrer">https://github.com/mozmorris/react-webcam</a></p>
  
  <p>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.</p>
  
  <p>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: </p>
  
  <blockquote>
    <p>chrome-extension://ebjbbcedbjkaagbpbkdlhlnbeoehjmgn/page.html#/uploadsnapshot</p>
  </blockquote>
  
  <p>The Uploadsnapshot component renders fine, no visible errors (nothing in the console), in the html there is the React-Webcam component element:</p>
  
  <pre><code>&lt;video autoplay="" width="132" height="132" class="UploadPhotoSnapshot__webcam__3VOiZ" playsinline=""&gt;&lt;/video&gt;
  </code></pre>
  
  <p>But the camera doesn`t start and no "allow / block camera" popup appears.</p>
  
  <p>I searched for solutions, tried adding "audioCapture" and "videoCapture" to permissions in my "manifest.json" as mentioned here:
  <a href="https://stackoverflow.com/questions/28089359/how-to-enable-camera-and-microphone-in-packaged-application-for-chrome-os-or-chr">How to enable camera and microphone in packaged application for Chrome OS or Chrome extension?</a></p>
  
  <p>It still will not ask for permission to use camera and will not start.</p>
  
  <p>I also tried using different component: <a href="https://github.com/mabelanger/react-html5-camera-photo" rel="nofollow noreferrer">https://github.com/mabelanger/react-html5-camera-photo</a> and got error when the component loads:</p>
  
  <blockquote>
    <p>onCameraError DOMException: Invalid security origin</p>
  </blockquote>
  
  <p>My component:</p>
  
  <pre><code>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 =&gt; {
          this.webcam = webcam;
      };
      capture = () =&gt; {
          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 &gt; 0) {
              imagesPreview = (
                  &lt;div className={styles.webcamArrScroll}&gt;
                      {this.state.imagesArr.map((image, index) =&gt; (
                         &lt;img className={styles.webcamArrImg} src={image} alt="" key={index} /&gt;
                      ))}
                  &lt;/div&gt;
              );
          }
  
          return (
              &lt;div className={styles.webcamDiv}&gt;
                  &lt;Webcam
                      audio={false}
                      height={132}
                      ref={this.setRef}
                      screenshotFormat="image/jpeg"
                      width={132}
                      videoConstraints={videoConstraints}
                      className={styles.webcam}
                  /&gt;
                  &lt;button className={styles.webcamBtnTakePhoto} onClick={this.capture}&gt;Take a snapshot&lt;/button&gt;
                  &lt;div className={styles.webcamArr}&gt;
                      {imagesPreview}
                  &lt;/div&gt;                
                  &lt;div className={styles.buttons}&gt;
                      &lt;button className={styles.buttonText}&gt;Cancel&lt;/button&gt;
                      &lt;button className={styles.buttonSetPhoto} onClick={this.hasFileUploaded}&gt;Set a profile photo&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default UploadPhotoSnapshot;
  </code></pre>
  
  <p>my manifest.json:</p>
  
  <pre><code>{
      "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"
  }
  </code></pre>
  
  <p>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.</p>