2017-10-10 1 views
0

J'ai un projet angular2 où j'ajoute un accès appareil photo html5. Je commence mon projet angular2 avec le CLI angulaire (ng serve) Cela commencera par "servir" le conteneur web au test. Lorsque j'accède à la caméra, le navigateur me demande si je veux accéder à la caméra. Après permettre au navigateur d'accéder à la caméra tout va bien.Caméra HTML5 ne fonctionne pas dans un 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); 
    }); 
    } 

Si je copie le code à la enviorment cible où nous utilisons un tomcat7 WebContainer, le WebBrowser ne me demande pas d'accéder à la caméra? Là, j'accède à l'application avec "t00-lhoist01: 8083/GF". Pourquoi la caméra ne fonctionne pas sur le tomcat mais si j'utilise le conteneur AngularCLI cela fonctionne bien?

Quelqu'un peut-il nous aider sur cette question? Est-ce que je manque quelque chose?

+0

Ce code sera exécuté dans le navigateur, donc je ne pense pas que je devrais être touché par ce serveur que vous utilisez pour servir le fichier. Essayez de voir quel code vous obtenez dans le navigateur lors de l'exécution dans le conteneur Tomcat – ricky

+0

Vous avez raison, et j'ai trouvé la solution –

Répondre

1

J'ai trouvé la solution. Le problème est, que le chrome ne demandera pas l'accès à la caméra si ce n'est pas une connexion https. Si vous le faites avec un localhost que le navigateur vous demandera d'accéder à la caméra même s'il ne s'agit pas d'une connexion https. Gardez à l'esprit que IE, Chrome ou Firefox se comportent différemment. Par exemple, Firefox demandera à accéder à la caméra avec une connexion http, mais vous ne pourrez pas enregistrer votre décision.

Cordialement