0
저는 angular2 프로젝트에서 html5 카메라 액세스 권한을 추가했습니다. angular CLI (angel serve)로 angular2 프로젝트를 시작합니다. 테스트 시작시 "ng serve"로 시작합니다. 카메라에 액세스 할 때 브라우저에서 카메라에 액세스할지 묻습니다. 브라우저에서 카메라에 액세스 할 수있게 된 후에는 문제가 없습니다. 나는 우리가 Tomcat7 웹 컨테이너를 사용하는 대상 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"로 응용 프로그램에 접속합니다. 왜 카메라가 바람둥이에서 작동하지 않지만 AngularCLI Container를 사용하고 있다면 잘 작동합니까?
아무도이 문제에 대해 도움을 줄 수 있습니까? 나는 무엇인가 놓치고 있니?
나는이 파일을 제공하기 위해 사용하고있는 서버에 의해 영향을받을한다고 생각하지 않도록이 코드는 브라우저에서 실행됩니다. 바람둥이 콘테이너 – ricky
에서 달리는 동안 당신이 브라우저에서 얻고있는 무슨 부호를 보는 것을 시도하십시오 맞은, 나는 해결책을 찾아 냈다 –