Teilen Sie:
){kind=small}
Sina ist Java Developer Advocate bei Vonage. Er hat einen akademischen Hintergrund und ist generell neugierig auf alles, was mit Autos, Computern, Programmierung, Technologie und der menschlichen Natur zu tun hat. In seiner Freizeit geht er gerne spazieren oder spielt Videospiele.
Unschärfe für Klarheit: Die Privatsphäre der Teilnehmer schützen und die Aufmerksamkeit fördern
Lesedauer: 5 Minuten
Virtuelle Treffen haben eine andere Atmosphäre als persönliche Treffen. Einer der vielen Gründe dafür ist die Notwendigkeit einer gemeinsamen Umgebung. Da der Standort eines jeden Teilnehmers (und damit auch die Vorgänge im Hintergrund) unterschiedlich ist, kann dies die Teilnehmer ablenken. Außerdem möchten die Teilnehmer bei Videoanrufen ihre Privatsphäre schützen, ohne umziehen zu müssen, was nur manchmal praktisch ist.
Eine Lösung besteht darin, den Hintergrund der Teilnehmer so unscharf zu machen, dass ihr Gesicht im Mittelpunkt steht. Auf diese Weise bleibt die natürliche Hintergrundumgebung erhalten, während die Details reduziert werden, damit sie weniger ablenken. Eine andere Lösung besteht darin, den Hintergrund durch ein anderes Bild zu ersetzen, das dann auf einige oder alle Teilnehmer angewendet werden kann. Der Vorteil dieses Ansatzes besteht darin, dass je nach Stimmung und Art der Besprechung eine geeignete Hintergrundeinstellung verwendet werden kann. Wenn es sich bei einem Videoanruf beispielsweise um eine Besprechung zwischen Personen aus verschiedenen Organisationen handelt, kann zur Verdeutlichung ein Logo oder ein standardisierter Hintergrund für die Vertreter der einzelnen Organisationen verwendet werden.
Beide Lösungen lassen sich mit wenigen Zeilen Code leicht auf Ihre Vonage-Videoanwendung anwenden. In diesem Artikel wird die Anwendung dieser Filter anhand eines minimalen Beispiels Schritt für Schritt erläutert.
Damit die Demoanwendung funktioniert, sind Zugangsdaten erforderlich. Melden Sie sich an oder erstellen Sie ein Vonage Video Account und klicken Sie dann im linken Menü auf "Projekte". Sie können ein früheres benutzerdefiniertes Projekt auswählen oder ein neues Projekt erstellen. Navigieren Sie zu Ihrem Projekt - die Seite sieht dann etwa so aus:
Notieren Sie sich den Projekt-API-Schlüssel. Blättern Sie zum Abschnitt "Projekttools" (unten auf der Seite) und klicken Sie auf "Sitzungs-ID erstellen". Kopieren Sie diese, und fügen Sie sie in den nächsten Abschnitt ein, um ein Token zu erzeugen. Wählen Sie als Rolle "Publisher" und als Ablaufzeit 24 Stunden (oder wie lange Sie die Sitzung benötigen). Für diese Übung benötigen Sie den Projekt-API-Schlüssel, die Sitzungs-ID und das Token.
Legen Sie ein Verzeichnis an, in dem Sie arbeiten möchten, und navigieren Sie dorthin. Erstellen Sie dann die Anwendungsdateien wie folgt:
Nachdem wir nun unser Projekt erstellt haben, fügen wir etwas Code in unsere index.js Datei hinzufügen. Natürlich sollten Sie die Werte von apiKey, sessionId, und token entsprechend einstellen.
const apiKey = '';
const sessionId = '';
const token = '';
function handleError(error) {
if (error) {
alert(error.message);
}
}
const session = OT.initSession(apiKey, sessionId);
const subscriberOptions = {};
const publisherOptions = {
insertMode: 'append',
width: '100%',
height: '100%',
resolution: '1280x720'
};
const publisher = OT.initPublisher('publisher', publisherOptions, handleError);
session.on({
streamCreated: event => session.subscribe(event.stream, 'subscriber', subscriberOptions, handleError),
sessionConnected: event => session.publish(publisher)
});
session.connect(token, error => handleError(error));
Im obigen Code haben wir die Initialisierung von Sitzung und Publisher Objekte mit OT.initSession und OT.initPublisher Methoden. Anschließend setzen wir Ereignis-Listener auf dem Sitzungsobjekt für streamCreated und sessionConnected wo wir einen Stream abonnieren, wenn er erstellt wird, und unseren Stream veröffentlichen, wenn wir mit der Sitzung verbunden sind. Nach dem Einstellen der Sitzungs-Ereignis-Listener versuchen wir, eine Verbindung zur Sitzung mit einem OpenTok Token.
Laden Sie die index.js und index.css Dateien in index.html zusammen mit dem OpenTok.js SDK:
<html>
<head>
<title>Vonage Video Background Filter demo</title>
<link href="index.css" rel="stylesheet" type="text/css">
<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
</head>
<body>
<div id="videos">
<div id="subscriber"></div>
<div id="publisher"></div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
Fügen Sie Folgendes zu Ihrer index.css Datei hinzu:
body, html {
background-color: gray;
height: 100%;
}
#videos {
position: relative;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#subscriber {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
}
#publisher {
position: absolute;
width: 640px;
height: 480px;
bottom: 10px;
left: 10px;
z-index: 100;
border: 3px solid white;
border-radius: 3px;
}Wenn Sie nun index.html mit einem Browser öffnen und den Zugriff auf Ihre Webcam und Ihr Mikrofon zulassen, sollten Sie Ihr Kamera-Video-Feed sehen. Sollte dies nicht der Fall sein, überprüfen Sie bitte Ihren Code und die Werte für Token / Session ID / API Key. In der Entwicklerkonsole des Browsers (in der Regel durch Drücken von F12) erhalten Sie weitere Informationen zu diesem Problem.
Wir können Filter zu unserem Video hinzufügen, indem wir die Option videoFilter Option hinzufügen. Dies kann während oder nach der Initialisierung des Publishers geschehen. In der Regel ist es sinnvoll, dies gleich zu tun. Beachten Sie, dass diese Funktion nicht von allen Browsern (insbesondere älteren) unterstützt wird. Kein Grund zur Sorge - wir können Filter auch bedingt anwenden. So können Sie zum Beispiel den Hintergrund unscharf machen, indem Sie einen Filter auf das publisherOptions Objekt hinzufügen, das wir zuvor erstellt haben:
// Add background blur, if supported
if (OT.hasMediaProcessorSupport()) {
publisherOptions.videoFilter = {
type: 'backgroundBlur',
blurStrength: 'low'
};
}Wenn Ihre Anwendungslogik erfordert, dass der Filter zu einem späteren Zeitpunkt angewendet wird (z. B. als Reaktion auf ein Ereignis), können Sie dies folgendermaßen erreichen:
publisher.applyVideoFilter({
type: 'backgroundBlur',
blurStrength: 'high'
});Um den Filter zu einem bestimmten Zeitpunkt zu entfernen, können Sie publisher.clearVideoFilter(). Fügen Sie Folgendes zu Ihrer index.js Datei hinzu, um den Effekt nach 8 Sekunden zu löschen:
setTimeout(() => publisher.clearVideoFilter(), 8000);
Um den Hintergrund zu ändern, verwenden Sie die folgende Konfiguration für die Option videoFilter:
if (OT.hasMediaProcessorSupport()) {
publisherOptions.videoFilter = {
type: 'backgroundReplacement',
backgroundImgUrl: 'https://example.com/image.jpg'
};
}
Beachten Sie, dass Sie die Bildersatzfunktion und die Hintergrundunschärfe nicht gleichzeitig verwenden können. Wenn Sie Probleme damit haben, dass das Hintergrundbild nicht angewendet wird, kann dies an folgenden Problemen liegen CORS. Dies ist ein Serverproblem. Versuchen Sie daher ein Bild von einer anderen Website. Beachten Sie, dass das Bild ein BMP, PNG, JPEG oder GIF sein muss.
Jetzt, da Sie ein funktionierendes Beispiel haben, können Sie das Aussehen durch Bearbeiten von index.css anpassen und weitere Logik in Ihre Anwendung einbauen. Für eine Produktionsanwendung müssen Sie die Erfassung Ihres API-Schlüssels, Tokens und der Sitzungs-ID vom Server automatisieren. Sehen Sie sich unsere Anleitungen für weitere Lektüre.
Weitere Informationen zur Verwendung des Publishers und der Videofilter finden Sie in der API-Referenz für Verleger. Die unterstützten Publisher-Optionsparameter finden Sie in der OT.initPublisher Methode Dokumentation.
Sie können das vollständige Codebeispiel, das in dieser Demo verwendet wird, finden und es selbst ausprobieren dieser Glitch-Anwendung. Dann müssen Sie nur noch Ihren API-Schlüssel, Ihr Token und Ihre Sitzungs-ID einfügen, damit es funktioniert!
Bitte zögern Sie nicht, sich mit uns auf unserem Gemeinschaft Slack oder Twitter wenn Sie Fragen oder Feedback haben!
Teilen Sie:
Sina ist Java Developer Advocate bei Vonage. Er hat einen akademischen Hintergrund und ist generell neugierig auf alles, was mit Autos, Computern, Programmierung, Technologie und der menschlichen Natur zu tun hat. In seiner Freizeit geht er gerne spazieren oder spielt Videospiele.