2017-10-10 1 views
0

私はhtml5カメラアクセスを追加するangular2プロジェクトを持っています。 私は角度CLI(angel serve)で私のangular2プロジェクトを開始します これは、テスト時に "ng serve"というWebコンテナで始まります。 私はカメラにアクセスするときブラウザは私に尋ねるカメラにアクセスする。 ブラウザがカメラにアクセスできるようになると、すべて正常です。私たちはTomcat7 Webコンテナを使用しているターゲットenviormentにコードをコピーする場合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); 
    }); 
    } 

、ウェブブラウザは、カメラにアクセスするために私を求めていませんか?ここで私は "t00-lhoist01:8083/GF"でアプリケーションにアクセスします。なぜカメラがtomcatで動作していないのですが、AngularCLI Containerを使用していればうまくいきますか?

誰でもこの問題についてお手伝いできますか?何か不足していますか?

+0

私は私はあなたがファイルを提供するために使用しているサーバーの影響を受けて取得する必要がありますとは思わないので、このコードは、ブラウザで実行されます。風袋入れコンテナ – ricky

+0

を実行しているときにブラウザに表示されているコードを確認してみてください。解決策が見つかりました –

答えて

1

解決策が見つかりました。問題は、クロムがhttps接続でない場合、カメラへのアクセスを要求しないことです。あなたがローカルホストでそれを行う場合、ブラウザーはhttps接続でなくてもカメラへのアクセスを要求します。

IE、Chrome、またはFirefoxの動作が異なることに注意してください。

たとえば、Firefoxはhttp接続でカメラにアクセスするように要求しますが、決定を保存することはできません。

よろしく

関連する問題