2016-07-10 7 views
0

Ich versuche, Webcam-Video zu holen und es im Browser anzuzeigen, folgende ist die html Ich benutze:JavaScript: error Webcam-Videos zu holen navigator.getUserMedia mit

<!DOCTYPE html> 
<html> 
    <head> 
     <title>DOCUMENT</title> 

     <link href="style.css" rel="stylesheet" media="all" /> 
    </head> 
    <body> 

    <div class="booth"> 
     <video id="video" width="400" height="300" autoplay></video> 
    </div> 

    <script src="video.js"></script> 
    </body> 
</html> 

und die CSS:

.booth{ 
    width: 400px; 
    background: #CCC; 
    border: 10px solid #ddd; 
    margin: 0 auto; 
} 

dies ist das Javascript, das ich hier bin mit:

(function(){ 
    var video = document.getElementById('video'),vendorUrl = window.URL || window.webkitURL; 

    navigator.getUserMedia = (navigator.getUserMedia || 
         navigator.webkitGetUserMedia || 
         navigator.mozGetUserMedia || 
         navigator.msGetUserMedia); 
    //capture video 

    navigator.getUserMedia({ 
     video:true, 
     audio:false 
    }, function(stream){ 
     video.src = vendorUrlcreateObjectURL(stream); 
     video.play(); 
    }, function(error){ 
     //an error occured 
     console.log(error) 

    }); 

})(); 

in Safari Konsole ich einen Fehler bin vor, dass st Ates:

navigator.getUserMedia is not a function. (In 'navigator.getUserMedia', 'navigator.getUserMedia' is undefined)

und in Chromkonsole, ich diese Störung erhalte:

vendorUrlcreateObjectURL is not defined

mir bitte sagen, wo ich schief gelaufen ist!

+0

Mögliches Duplikat von http://StackOverflow.com/Questions/28991835/firefox-Navigator-Getusermedia-is-Not-a-Funktion – 1sloc

+0

Ich versuchte diese Lösung, aber nicht für mich arbeiten, BTW, wenn ich diesen Code ausführen in chrome habe ich einen weiteren fehler: 'vendorUrcreateObjectURL ist nicht definiert' –

Antwort

0

Ihr erster Fehler ist ein seltsamer Fehler, aber ich vermute, Safari verhindert, dass Sie eine neue Eigenschaft für das Objekt navigator erstellen.

Es wäre sicherer, einfach eine lokale Variable zu erstellen, anstatt integrierte Objekte ändern:

var getUserMedia = navigator.getUserMedia || 
        navigator.webkitGetUserMedia || 
        navigator.mozGetUserMedia || 
        navigator.msGetUserMedia; 

if(!getUserMedia) { 
    // Your error handling goes here 
} 

// ... 

Was den zweiten Fehler, vendorUrlcreateObjectURL existiert nicht. Versuchen Sie URL.createObjectURL()!

+0

well safari unterstützt diese funktion nicht! und danke für die Antwort, das funktioniert .. auch wenn Sie irgendeine Möglichkeit haben, auf die Webcam in Safari zuzugreifen, lassen Sie es mich wissen! –

Verwandte Themen