HTML5 Camera is not working within a Tomcat7

Question

I have a angular2 project where I add a html5 camera access. I start my angular2 project with the angular CLI (ng serve) This will start with "ng serve" the web container at testing. When I access the camera the browser ask me if I want to access the camera. After allow the browser to access the camera all is fine.

private showCam() {
    this.showCamScreen = true;
    // 1. Casting necessary because TypeScript doesn't
    // know object Type 'navigator';
    const nav = <any>navigator;

    // 2. Adjust for all browsers
    nav.getUserMedia = nav.getUserMedia || nav.mozGetUserMedia || nav.webkitGetUserMedia;

    // 3. Trigger lifecycle tick (ugly, but works - see (better) Promise example below)
    setTimeout(() => { }, 100);

    // 4. Get stream from webcam
    nav.getUserMedia(
      { video: { width: 1280, height: 720 } },
      (stream) => {
        const webcamUrl = URL.createObjectURL(stream);

        // 4a. Tell Angular the stream comes from a trusted source
        this.videosrc = this.sanitizer.bypassSecurityTrustUrl(webcamUrl);

        // 4b. Start video element to stream automatically from webcam.
        this.element.nativeElement.querySelector('video').autoplay = true;
      },
      (err) => console.log(err));


    // OR: other method, see http://stackoverflow.com/questions/32645724/angular2-cant-set-video-src-from-navigator-getusermedia for credits
    const promise = new Promise<string>((resolve, reject) => {
      nav.getUserMedia({ video: true }, (stream) => {
        resolve(stream);
      }, (err) => reject(err));
    }).then((stream) => {
      const webcamUrl = URL.createObjectURL(stream);
      this.videosrc = this.sanitizer.bypassSecurityTrustResourceUrl(webcamUrl);
      // for example: type logic here to send stream to your  server and (re)distribute to
      // other connected clients.
    }).catch((error) => {
      console.log(error);
    });
  }

If I copy the code to the target enviorment where we are using a Tomcat7 WebContainer, the webbrowser is not asking me to access the camera? There I access the application with "t00-lhoist01:8083/GF". Why the camera is not working on the tomcat but if I am using the AngularCLI Container it is working fine?

Can anybody help we on this issue? Do I missing something?

This code will run in browser so I don't think I should get affected by what server you are using to serve the file. Try to see what code you are getting in browser while running in tomcat container — ricky, Oct 10 '17 at 06:50

score 1 · Accepted Answer · answered Oct 17 '17 at 16:51

I found the solution. The problem is, that chrome will not ask for access the camera if it is not a https connection. If you do it with a localhost than the browser will ask to access the camera even it is not a https connection.

Keep in mind that IE,Chrome or Firefox behave differently.

For instance, Firefox will ask to access the camera with http-connection but you are not possible to save your decision.

Regards

HTML5 Camera is not working within a Tomcat7

1 Answers1