Partager:
){kind=small}
Sina est développeur Java chez Vonage. Il est issu d'une formation universitaire et est généralement curieux de tout ce qui touche aux voitures, aux ordinateurs, à la programmation, à la technologie et à la nature humaine. Pendant son temps libre, on peut le trouver en train de marcher ou de jouer à des jeux vidéo compétitifs.
Le flou au service de la clarté : Protéger la vie privée des participants et favoriser l'attention
Temps de lecture : 5 minutes
Les réunions virtuelles n'ont pas le même caractère que les réunions en personne. L'une des nombreuses raisons en est la nécessité d'un environnement partagé. Comme l'emplacement de chacun (et donc ce qui se passe en arrière-plan) est différent, cela peut distraire les participants. En outre, les participants peuvent vouloir protéger leur vie privée pendant les appels vidéo sans avoir à se déplacer, ce qui n'est pratique que dans certains cas.
Une solution consiste à rendre flou l'arrière-plan des participants de manière à ce que leur visage soit mis en évidence. Cela permet de conserver leur environnement naturel tout en réduisant les détails pour qu'ils soient moins gênants. Une autre solution consiste à remplacer l'arrière-plan par une autre image, qui peut ensuite être appliquée à certains ou à tous les participants. L'avantage de cette approche est qu'un paramètre d'arrière-plan approprié peut être utilisé en fonction du ton et de la nature de la réunion. Par exemple, si un appel vidéo est une réunion entre des personnes de différentes organisations, un logo ou un arrière-plan standardisé peut être appliqué aux représentants de chaque organisation pour plus de clarté.
Ces deux solutions peuvent être facilement appliquées à votre application Video de Vonage en ajoutant seulement quelques lignes de code. Cet article vous expliquera comment appliquer ces filtres en vous guidant étape par étape à l'aide d'un exemple minimal.
Des informations d'identification seront nécessaires pour que l'application de démonstration fonctionne. Connectez-vous ou créez un Vonage Video ou créez un tel compte puis cliquez sur "Projets" dans le menu de gauche. Vous pouvez sélectionner un projet personnalisé antérieur ou en créer un nouveau. Naviguez jusqu'à votre projet - la page ressemblera à ceci :
Notez la clé API du projet. Faites défiler la page jusqu'à la section "Project Tools" (vers le bas de la page) et cliquez sur "Create Session ID" (Créer un identifiant de session). Copiez-le et collez-le dans la section suivante pour générer un jeton. Pour le rôle, sélectionnez "Publisher", et le délai d'expiration est de 24 heures (ou la durée dont vous avez besoin pour la session). Vous aurez besoin de la clé API du projet, de l'ID de session et du jeton pour cet exercice.
Créez un répertoire dans lequel vous travaillerez et naviguez jusqu'à lui. Créez ensuite les fichiers de l'application comme suit :
Maintenant que nous avons créé notre projet, ajoutons du code à notre fichier index.js à notre fichier. Bien entendu, vous devez définir les valeurs de apiKey, sessionId, et token de manière appropriée.
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));
Dans le code ci-dessus, nous avons initialisé la session et éditeur en utilisant les objets OT.initSession et OT.initPublisher respectivement. Nous définissons ensuite des récepteurs d'événements sur l'objet session pour les méthodes streamCreated et sessionConnected où nous nous abonnons à un flux lorsqu'il est créé et publions notre flux lorsque nous sommes connectés à la session. Après avoir défini les récepteurs d'événements de la session, nous tentons de nous connecter à la session en utilisant un jeton OpenTok.
Charger les index.js et index.css dans index.html ainsi que le 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>
Ajoutez ce qui suit à votre fichier index.css fichier :
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;
}Maintenant, si vous ouvrez index.html avec un navigateur et autorisez l'accès à votre webcam et à votre microphone, vous devriez voir le flux vidéo de votre caméra. Si ce n'est pas le cas, vérifiez votre code et les valeurs du jeton, de l'ID de session et de la clé API. Vous pouvez obtenir plus d'informations sur le problème à partir de la console de développement du navigateur (généralement accessible en appuyant sur F12).
Nous pouvons ajouter des filtres à notre Video en utilisant l'option videoFilter pour ajouter des filtres à notre vidéo. Cette option peut être appliquée pendant ou après l'initialisation de l'éditeur. En général, il est préférable de le faire tout de suite. Notez que cette fonctionnalité n'est pas prise en charge par tous les navigateurs (en particulier les plus anciens). Ne vous inquiétez pas : nous pouvons appliquer des filtres de manière conditionnelle. Par exemple, voici comment vous pouvez rendre l'arrière-plan flou en ajoutant un filtre à l'objet publisherOptions que nous avons créé plus tôt :
// Add background blur, if supported
if (OT.hasMediaProcessorSupport()) {
publisherOptions.videoFilter = {
type: 'backgroundBlur',
blurStrength: 'low'
};
}Si votre logique d'application exige que le filtre soit appliqué ultérieurement (par exemple, en réponse à un événement), vous pouvez procéder de la manière suivante :
publisher.applyVideoFilter({
type: 'backgroundBlur',
blurStrength: 'high'
});Pour retirer le filtre à un moment donné, vous pouvez appeler publisher.clearVideoFilter(). Ajoutez ce qui suit à votre fichier index.js pour supprimer l'effet après 8 secondes :
setTimeout(() => publisher.clearVideoFilter(), 8000);
Pour modifier l'arrière-plan, utilisez la configuration suivante pour l'option videoFilter:
if (OT.hasMediaProcessorSupport()) {
publisherOptions.videoFilter = {
type: 'backgroundReplacement',
backgroundImgUrl: 'https://example.com/image.jpg'
};
}
Notez que vous ne pouvez pas utiliser à la fois le remplacement d'image et le flou d'arrière-plan. Si vous rencontrez des problèmes de non-application de l'image d'arrière-plan, cela peut être dû à des problèmes de CORS. Il s'agit d'un problème de serveur, essayez donc une image provenant d'un autre site web. L'image doit être un BMP, un PNG, un JPEG ou un GIF.
Maintenant que vous disposez d'un exemple fonctionnel, vous pouvez personnaliser l'apparence en modifiant index.css si vous le souhaitez et intégrer une logique supplémentaire dans votre application. Pour une application de production, vous devrez automatiser l'acquisition de votre clé API, de votre jeton et de votre identifiant de session à partir du serveur. Consultez nos tutoriels pour en savoir plus.
Pour plus d'informations sur l'utilisation des filtres Publisher et Video, veuillez consulter la référence API pour Éditeur. Vous trouverez les paramètres d'option de l'éditeur pris en charge dans la méthode OT.initPublisher méthode documentation.
Vous pouvez trouver l'échantillon de code complet utilisé dans cette démo et l'essayer vous-même à partir de cette application Glitch. Il ne vous reste plus qu'à coller votre clé API, votre token et votre identifiant de session pour que cela fonctionne !
N'hésitez pas à nous contacter sur notre Communauté Slack ou sur Twitter si vous avez des questions ou des commentaires !
Partager:
Sina est développeur Java chez Vonage. Il est issu d'une formation universitaire et est généralement curieux de tout ce qui touche aux voitures, aux ordinateurs, à la programmation, à la technologie et à la nature humaine. Pendant son temps libre, on peut le trouver en train de marcher ou de jouer à des jeux vidéo compétitifs.