Wie gebe ich die webkitGetUserMedia-Berechtigung in einem Popup-Fenster der Chrome-Erweiterung ein?

Question

Ich habe WebkitGetUserMedia erfolgreich verwendet, um Videos von meiner Webcam auf einer normalen Webseite zu erfassen, aber wenn ich dies in der popup.html meiner Chrome-Erweiterung versuche, passiert nichts. Ich bekomme keine Erlaubnis Fehler, es scheint nur nie zu fragen (die Informationsleiste rutscht nie im Popup-Fenster). Gibt es einen Weg dazu? Es sieht nicht so aus, als könnte ich im manifest json Berechtigungen erteilen.

Answer 1

Chrome-Erweiterungen und WebRTC:

Die Chrome Extensions Manifest Permissions Documentation die beiden Berechtigungen im Manifest benötigt nicht erwähnt, „Videocapture“ und „audioCapture“, also bin ich nicht sicher, ob diese Funktionalität zu Chrome verfügbar ist Erweiterungen oder nicht, sollten Sie versuchen und sehen, was passiert, bevor Sie weitermachen! ;)

Chrome Packaged Apps und WebRTC:

jedoch in Chrome Gepackte Anwendungen ist es möglich, sowohl in der Sandbox und Nicht-Sandbox Seiten! Chrome Packaged Apps sind Erweiterungen sehr ähnlich. Je nachdem, was Sie tun, möchten Sie möglicherweise stattdessen eine App erstellen.

In der Packaged Apps Manifest Permissions Documentation sind die Berechtigungen "videoCapture" und "audioCapture" nicht explizit aufgelistet, aber eines wird in einem Beispiel demonstriert.

Ich habe eine gepackte App, die eine sandboxed HTML-Seite verwendet, um webkitGetUserMedia auszuführen, und es funktioniert gut. Hier ist, was Sie in Ihrem Manifest bräuchten:

{ 
    "name": "app name", 
    "version": "0.2", 
    "manifest_version": 2, 
    "minimum_chrome_version": "21", 
    "app": { 
    "background": { 
     "scripts": ["main.js"] 
    } 
    }, 
    "icons": { 
    /* "128": "icon_128.png" */ 
    }, 
    "sandbox": { 
    "pages": ["call.htm" ] 
    }, 
    "permissions" : [ "videoCapture", "audioCapture" ] 
} 

Sie dann Ihren Popup aus dem Chrom starten müssen: // newtab Seite als App. Die main.js sollte etwa Folgendes enthalten:

// Chrome v24+ 
chrome.app.runtime.onLaunched.addListener(function() { 
    chrome.app.window.create('mainpage.html', 
     {width: 1190, height: 709}); 
}); 

Und die Hauptseite sollte Ihr Popup-Fenster sein. In meinem Setup habe ich einen iframe namens call.htm innerhalb von mainpage.html, und die iframe-Seite ist sandboxed, so dass sie einige unsichere Operationen ausführen kann, die nur als normale Webseite durchgeführt werden können. Wenn ich jedoch den getUserMedia Befehl in einem Nicht-Sandbox Popup laufe, kann ich das Mediastream-Objekt aus dem Aufruf von webkitGetUserMedia erhalten:

navigator.webkitGetUserMedia({ audio: true, video: true }, 
       function (stream) { 
        mediaStream = stream; 
       }, 
       function (error) { 
        console.error("Error trying to get the stream:: " + error.message); 
       }); 

ich es getestet, und ich konnte mein Video in einem Popup erfassen .

Answer 2

Es ist ein billiger Hack, aber wenn Sie eine Optionsseite für Ihre Erweiterung erstellen und einen Aufruf an webkitGetUserMedia in der JS dafür, es wird die Berechtigung für alle URIs für diese Erweiterung anfordern, nachdem der Benutzer es in den Optionen erlaubt Seite Die Hintergrundseite wird auch die Berechtigung haben, sie zu verwenden.

Answer 3

Wie @tsbarnes vorgeschlagen es ist ein Hack, aber für Chrome-Apps der Hack anders ist, rufen Sie navigator.webkitGetUserMedia von background.js statt, so etwas wie:

navigator.webkitGetUserMedia({audio: true, video: true}, function() { 
    console.log('ok'); 
}, function(e) { 
    console.log('webcam not ok'); 
}); 

Und dann können Sie immer noch Audio-Zugriff/Video aus dem Fenster.html oder andere webview

Answer 4

für navigator.webkitGetUserMedia in options.js Werke Vorstellung aber Sie müssen option.html Popup in einem neuen Tab öffnen, oder Sie werden einen Fehler erhalten, so in der manifest.json müssen Sie

"options_ui": { 
    "page": "options.html", 
    "chrome_style": true, 
    "open_in_tab": true 
    }