🐐 👨🏿‍🤝‍👨🏽 🐙 Screenshot in Chrome - Vorbereitungen für getDisplayMedia 🛰️ 🐻 🍲

Der Chrome Web Store hat beschlossen, die Inline-Installation von Erweiterungen für Chrome zu verbieten. Dies steht in direktem Zusammenhang mit WebRTC-Anwendungen, da Sie jetzt eine Erweiterung für Screenshots in Chrome benötigen. Wird getDisplayMedia API zur Rettung kommen?

Screenshot in Chrome

Als diese Funktion in Chrome 33 angezeigt wurde , war eine Erweiterung erforderlich, um Sicherheitsprobleme zu lösen. Diese Methode ist besser als die vorherige, als Screenshots unter einer Flagge ausgeblendet wurden. Aufgrund dieser Websites wurden Benutzer aufgefordert, diese Flagge zu aktivieren. Dies führte zu Meldungen zur öffentlichen Sicherheit .

Chrome hat sich seit 2013 nicht viel verändert. Die Erweiterungsanforderungen haben den Freigabeprozess erschwert, aber dank der Inline-Installation , die die Lebensdauer vereinfacht hat:

Benutzer klickt auf eine Schaltfläche, um einen Screenshot zu starten;
Die Webanwendung stellt fest, dass Chrome verwendet wird und die gewünschte Erweiterung nicht installiert ist.
Die Webanwendung startet die Inline-Installation und löst den Rückruf erfolgreich auf.
In Chrome wird ein Fenster Ihrer Wahl angezeigt, in dem genau das angezeigt wird, was der Benutzer freigeben möchte.

Details zur Implementierung finden Sie hier .

Das Auswahlfeld ist hier ein Schlüsselelement. Ist es sicher, es ohne ein Web Store-Netzwerk zu verwenden?

In diesem Fall ist das Teilen eines Tabs besonders rätselhaft, da es gegen das Sandbox-Prinzip für "Cross-Origin" -Skripte verstößt.

Firefox Screenshot

Firefox verfolgt einen anderen Ansatz - eine weiße Liste von Websites, die die API verwenden dürfen. Um auf diese Liste zu gelangen, muss die Site eine Anfrage an Mozilla senden und nachweisen, dass sie die Nutzungsbedingungen und die Datenschutzbestimmungen enthält. Sie können die Whitelist mithilfe der Erweiterung ändern. Die Notwendigkeit einer solchen Liste verschwand mit der Veröffentlichung von Firefox 52, als jede bestätigte Quelle Screenshots verwenden durfte. Die neue getDisplayMedia-API wird hier noch nicht verwendet, worüber wir bald sprechen werden, aber die Implementierung ist fast dieselbe:

navigator.mediaDevices.getUserMedia({video: {mediaSource: 'screen'}})
.then(stream => {
// ,
videoElement.srcObject = stream;
}, error => {
console.log(" ", error);
});

view raw screensharing-ff.js hosted with ❤ by GitHub

Infolgedessen wird die Implementierung geändert , um die Spezifikation zu erfüllen .

getDisplayMedia API

Das W3C-Konsortium arbeitet an der Standardisierung der Screen-Capture- API. Es ist relativ einfach und basiert auf Versprechungen wie getUserMedia :

// 1 Screen Capture API
navigator.getDisplayMedia({ video: true })
.then(stream => {
// ,
videoElement.srcObject = stream;
}, error => {
console.log(" ", error);
});

view raw example1-spec.js hosted with ❤ by GitHub

Microsoft EDGE hat dieses Jahr bereits Screenshots veröffentlicht. Das Nutzungsszenario ist sehr gut durchdacht, mit einem gelben Rahmen um den Bereich, den der Benutzer teilt:

Fenster Screenshot in Edge. Achten Sie auf den gelben Rahmen, der hervorhebt, was genau geteilt wird.

Die Zeiten ändern sich und Chrome-Erweiterungen mit ihnen

Apropos Benutzererfahrung: Die anscheinend.in-Erweiterung funktioniert wie oben beschrieben und verfügt über mehr als eine Million Installationen. Die überwiegende Mehrheit der Benutzer hat eine Inline-Installation durchlaufen, und es gibt so viele, dass Screenshots der Erweiterung im Chrome Web Store seit ... wahrscheinlich 2014 nicht mehr aktualisiert wurden.

Wie im Chrome Web Store-Blog heißt , wird jetzt eine Inline-Installation abgeschnitten. Es war eine große Überraschung, ich habe es zuerst dank des alten Chrome-Problems erfahren - um Screenshots zugänglicher zu machen (danke an Wilhelm Wanecek für den Tipp).

Wenn ich das richtig verstehe, wird der Chrome Web Store in einem separaten Tab geöffnet. Seitens der Webanwendung wird es schwieriger zu bestimmen, wann der Benutzer die Erweiterung installiert hat. Es wird erforderlich sein, Umfragen oder eine Zeitüberschreitung zu verwenden. Die folgenden Begriffe sind in der Post angegeben:

Eine Inline-Installation ist ab dem 12. Juni für neue Erweiterungen nicht mehr verfügbar. Ohne vorherige Ankündigung;
Für bereits veröffentlichte Erweiterungen ist die Inline-Installation bis zum 12. September verfügbar. Vorankündigung - drei Monate im Voraus.

Ansprüche

Hier gibt es definitiv Probleme. Und ich spreche nicht einmal von Google Hangouts / Meet, wodurch die UX-Schwierigkeiten, mit denen sich alle anderen mit der integrierten Erweiterung befassen müssen, vollständig vermieden werden. Die Jungs von Chrome drehen bereits ihre Hände .

Ich möchte im Voraus einige Neuigkeiten vom Chrome Web Store-Team erhalten (der Brief kam ungefähr 24 Stunden nach dem Blog-Beitrag an). Die anscheinend.in-Erweiterung hat mehr als eine Million Benutzer, was diese Erweiterung zu einer der beliebtesten für Screenshots macht. Unsere Benutzer vertrauen unserer Website, indem sie uns Zugriff auf ihre Mikrofone und Kameras gewähren. Die Verwendung einer Inline-Installation, die auf dieser Vertrauensstellung basiert, ist wahrscheinlich sicherer als die Installation aus dem Chrome Web Store. Wir haben uns auch an den Support des Web Store gewandt, um illegale Kopien der Erweiterung zu entfernen, die Hunderte von Benutzern wiederholt selbst festgelegt haben.

Und es wäre toll, wenn die Jungs von Google uns warnen würden.

Das @ webrtc- Konto erwähnte die Absicht, getDisplayMedia als Reaktion auf Änderungen an der Inline-Installationsrichtlinie einzuführen .

Der Pfad für Chrome ist die Veröffentlichung von getDisplayMedia . "Intention to Roll-out" wurde kurz nach den Hauptnachrichten veröffentlicht . Angesichts des Veröffentlichungszyklus von Chrome wird es jedoch einige Wochen dauern. Dies ist eine nicht triviale Änderung der Sicherheitsbestimmungen und Benutzerszenarien. Es ist daher zweifelhaft, ob dies vor dem 12. September geschehen wird. Der Verzweigungspunkt für Chrome 69, der bis zum 12. September veröffentlicht wird, liegt innerhalb eines Monats.

Die Situation mit Chrome wird durch die Tatsache kompliziert, dass jetzt das Teilen von Registerkarten zulässig ist, jedoch mit einer Einschränkung der Auswahl der Anzeige für den Benutzer. Die Freigabe von Audioausgaben wird in Chrome unterstützt, jedoch nicht einmal in der getDisplayMedia- Spezifikation.

So bereiten Sie sich auf Änderungen in Chrome vor

Der Code für die Unterstützung von getDisplayMedia ist relativ unkompliziert. In der Regel entspricht ein Aufruf dieser API dem Aufruf von getUserMedia mit dem Argument mediaSource in Firefox. Um festzustellen, ob diese Funktion verfügbar ist, müssen Sie überprüfen, ob getDisplayMedia vorhanden ist, und sie vorrangig verwenden, falls verfügbar:

if ('getDisplayMedia' in window.navigator) {
// getDisplayMedia
} else {
//
}

view raw check-getDisplayMedia.js hosted with ❤ by GitHub

Es ist immer noch nicht klar, wie die Bildrate angezeigt werden soll. Die Verwendung von applyConstraints im zurückgegebenen MediaStreamTrack funktioniert für getUserMedia und wahrscheinlich auch für getDisplayMedia :

navigator.getDisplayMedia({video: true})
.then(stream => {
stream.getTracks()[0].applyConstraints({frameRate: 5});
return stream;
})

view raw frame-rate.js hosted with ❤ by GitHub

Details finden Sie im Spezifikations-Bugtracker .

Leider kann adapter.js getDisplayMedia nicht einfügen, da die Interaktion mit jeder Erweiterung etwas anders implementiert ist.

Weiter und höher

Ich überwache sorgfältig, ob die WebRTC-Entwickler von Google die Frist für Inline-Installationen beeinflussen oder getDisplayMedia rechtzeitig einführen können. Die Entwicklung unter dem Web ist manchmal chaotisch, ja, aber am Ende sehen wir in der Regel ein gutes Ergebnis. Wir warten auf das Ende dieser Geschichte und verabschieden uns gerne von unseren Erweiterungen.

Screenshot in Voximplant

Wir haben auch einen Screenshot, der in Chrome erfolgreich funktioniert. Obwohl sich niemand von Erweiterungen verabschiedet hat, müssen Sie Folgendes tun:

Laden Sie die Erweiterung aus unserem Repository herunter: github.com/voximplant/voximplant-chrome-extension
Gehen Sie zu dem Ordner, in den die Erweiterung heruntergeladen wurde, öffnen Sie manifest.json und fügen Sie die URL Ihrer Site zum Abschnitt " Übereinstimmungen " hinzu.
Geben Sie auf der neuen Registerkarte Chrome die Erweiterungen chrome: // ein , aktivieren Sie den Entwicklermodus und laden Sie die Erweiterung aus dem Ordner.

Sie installieren also die Entwicklerversion der Erweiterung. Für Endbenutzer ist es bequemer, wenn Sie die Erweiterung im Googe Web Store veröffentlichen. Informationen dazu sowie zur Verwendung von Screenshots auf unserer Plattform finden Sie in unserer Anleitung . Viel Spaß beim Teilen!

	navigator.mediaDevices.getUserMedia({video: {mediaSource: 'screen'}})
	.then(stream => {
	// ,
	videoElement.srcObject = stream;
	}, error => {
	console.log(" ", error);
	});

	// 1 Screen Capture API
	navigator.getDisplayMedia({ video: true })
	.then(stream => {
	// ,
	videoElement.srcObject = stream;
	}, error => {
	console.log(" ", error);
	});

	if ('getDisplayMedia' in window.navigator) {
	// getDisplayMedia
	} else {
	//
	}

	navigator.getDisplayMedia({video: true})
	.then(stream => {
	stream.getTracks()[0].applyConstraints({frameRate: 5});
	return stream;
	})

Screenshot in Chrome - Vorbereitungen für getDisplayMedia