Javascript HTML5摄像头无法在Tomcat7中工作

我有一个angular2项目，在那里我添加了一个html5摄像头访问。 我用angular CLI（ng serve）启动angular2项目 这将从测试时的web容器“ng serve”开始。 当我访问相机时，浏览器会询问我是否要访问相机。 允许浏览器访问摄像头后，一切正常

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);
    });
  }

private showCam（）{
this.showCamScreen=true；
//1.强制转换是必要的，因为TypeScript没有
//了解对象类型“导航器”；
const nav=导航器；
//2.针对所有浏览器进行调整
nav.getUserMedia=nav.getUserMedia | | nav.mozGetUserMedia | | nav.webkitGetUserMedia；
//3.触发生命周期勾选（丑陋，但有效-参见下面的（更好）承诺示例）
setTimeout（（）=>{}，100）；
//4.从网络摄像头获取流
nav.getUserMedia(
{视频：{宽度：1280，高度：720}，
（流）=>{
const webcamUrl=URL.createObjectURL（流）；
//4a.告诉我们该流来自可靠来源
this.videosrc=this.sanitizer.bypassSecurityTrustUrl（webcamUrl）；
//4b.启动视频元素，从网络摄像头自动播放视频。
this.element.nativeElement.querySelector（'video'）。autoplay=true；
},
（err）=>console.log（err））；
//或：其他方法，请参阅http://stackoverflow.com/questions/32645724/angular2-cant-set-video-src-from-navigator-getusermedia 学分
持续承诺=新承诺（（解决、拒绝）=>{
nav.getUserMedia（{video:true}，（流）=>{
解决（流）；
}，（err）=>拒绝（err））；
})。然后（（流）=>{
const webcamUrl=URL.createObjectURL（流）；
this.videosrc=this.sanitizer.bypassSecurityTrustResourceUrl（webcamUrl）；
//例如：在此处键入logic以将流发送到服务器并（重新）分发到
//其他连接的客户端。
}).catch（（错误）=>{
console.log（错误）；
});
}

如果我将代码复制到我们使用Tomcat7网络容器的目标环境中，网络浏览器不会要求我访问摄像头？在那里，我使用“t00-lhoist01:8083/GF”访问应用程序。为什么tomcat上的摄像头不工作，但如果我使用AngularCLI容器，它工作正常

---

有谁能在这个问题上帮助我们吗？我遗漏了什么吗？

我找到了解决办法。问题是，如果不是https连接，chrome不会要求访问摄像头。如果使用localhost执行此操作，则即使不是https连接，浏览器也会请求访问摄像头

请记住，IE、Chrome或Firefox的表现有所不同

例如，Firefox会要求通过http连接访问摄像头，但您无法保存您的决定

---

关于

此代码将在浏览器中运行，因此我认为我不应该受到您用于提供文件的服务器的影响。在tomcat Container中运行时，尝试查看您在浏览器中获得的代码。您是对的，我找到了解决方案