2017-10-10 68 views
0

我有一個angular2項目,我添加了一個html5相機訪問。 我開始使用角度CLI(ng服務)我的angular2項目 這將以「ng服務」Web容器在測試開始。 當我訪問攝像機時,瀏覽器詢問我是否要訪問攝像機。 允許瀏覽器訪問攝像機後一切正常。HTML5相機不能在Tomcat7中工作

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

如果我的代碼複製到我們使用的是Tomcat7 Web容器的目標enviorment,web瀏覽器是不是問我訪問攝像機?在那裏我用「t00-lhoist01:8083/GF」訪問應用程序。爲什麼相機不能在tomcat上工作,但如果我使用的是AngularCLI容器,它工作正常嗎?

任何人都可以幫助我們解決這個問題嗎?我錯過了什麼嗎?

+0

此代碼將在瀏覽器中運行,所以我不認爲我應該受到你用來提供文件的服務器的影響。嘗試查看在tomcat容器中運行時您在瀏覽器中獲得的代碼 – ricky

+0

您沒錯,我找到了解決方案 –

回答

1

我找到了解決方案。問題是,如果chrome不是https連接,它不會要求訪問攝像機。如果您使用本地主機進行操作,則瀏覽器會要求訪問攝像機,即使它不是https連接。

請記住,IE,Chrome或Firefox的行爲有所不同。

例如,Firefox會要求通過http連接訪問攝像機,但是無法保存您的決定。

Regards