2016-10-12 5 views
0

Ich lerne getUserMedia() zu verwenden, um auf die Webcam in Javascript zuzugreifen. Aber ich bin immer einen Fehler - Not allowed to load local resource: blob:null/3485f5b8-46c1-4a40-946a-8de2588720f0Zugriff auf Webcam (Javascript) nicht möglich?

ich im Netz gesucht, aber sie sagten, dass ich eine https-Verbindung benötigt oder etwas, Datei-URLs ist nicht erlaubt, aber ich habe nicht ganz verstanden, was los ist.

die Code -

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta content="stuff, to, help, search, engines, not" name="keywords"> 
 
<meta content="What this page is about." name="description"> 
 
<meta content="Display Webcam Stream" name="title"> 
 
<title>Display Webcam Stream</title> 
 
    
 
<style> 
 
#container { 
 
    margin: 0px auto; 
 
    width: 500px; 
 
    height: 375px; 
 
    border: 10px #333 solid; 
 
} 
 
#videoElement { 
 
    width: 500px; 
 
    height: 375px; 
 
    background-color: #666; 
 
} 
 
</style> 
 
</head> 
 
    
 
<body> 
 
<div id="container"> 
 
    <video autoplay="true" id="videoElement"> 
 
     
 
    </video> 
 
</div> 
 
<script> 
 
var video = document.querySelector("#videoElement"); 
 
    
 
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia; 
 
    
 
if (navigator.getUserMedia) {  
 
    navigator.getUserMedia({video: true}, handleVideo, videoError); 
 
} 
 
    
 
function handleVideo(stream) { 
 
    video.src = window.URL.createObjectURL(stream); 
 
} 
 
    
 
function videoError(e) { 
 
    // do something 
 
\t console.log("error"); 
 
} 
 
</script> 
 
</body> 
 
</html>

+0

Prompts, um webcam hier zu erlauben, bei 'file:' Protokoll und stacksnippets bei firefox – guest271314

Antwort

2

Um die Privatsphäre und Sicherheit, Google bestimmte Funktionen nur zu "sichern" Herkunft zu ermöglichen, entschieden, das heißt getUserMedia nur auf Websites mit HTTPS.

Für weitere Überlegungen können Sie their article on this lesen.

Ihr Code ist in Ordnung und funktioniert gut, wenn Sie über HTTPS verwendet werden, der einfachste Weg dies während der Entwicklung zu tun ist wahrscheinlich jsbin.

+0

Aber ist das Dateischema in der Liste der sicheren Herkunft enthalten? –

+0

Ja, und tatsächlich funktioniert es von dem lokalen Dateisystem sowie http: // localhost für mich - aber das kann von Ihrem Betriebssystem abhängen und was nicht, so ist die sichere Wette HTTPS. – geekonaut

+0

Wie funktioniert es gut in android Chrome Browser? Ich teste die JSBIN-Verbindung. Es zeigt "Fehler" in der Konsole. – user906919

1

Wenn Sie versuchen, Chrom, Chrom bei file: Protokoll, schließen Sie alle Chrom, Chrom-Instanzen, dann starten Chrom, Chrom mit --allow-file-access-from-files Flag, um Browser-Zugriff auf Dateien im lokalen Dateisystem zu ermöglichen. Siehe auch Jquery load() only working in firefox?

+0

Warum sind diese? Änderungen nicht empfohlen? –

+0

@DhruvChadha Aus Sicherheitsgründen. Die Flagge muss nicht dauerhaft gesetzt sein. Sie können verschiedene Startprogramme erstellen, um verschiedene Flags zu verwenden und ohne Flags festzulegen. Sie können auch Chrom oder Chrom aus 'terminal'' $ google-chrome --allow-datei-access-from-files' oder '$ chrom-browser --allow-datei-access-from-files' starten, wo wenn Wird bei 'terminal' oder im Browser geschlossen, wird die Markierung nicht dauerhaft auf dem Desktop oder einem anderen Launcher gesetzt – guest271314

Verwandte Themen