Partager:
){kind=small}
Misha est Ingénieur des solutions clients chez Vonage, où il se concentre sur le développement de l'API Video. Après avoir troqué l'effervescence de San Francisco pour le charme de Milwaukee, dans le Wisconsin, il passe désormais son temps libre à découvrir les joyaux cachés du Midwest.
Partagez vos écrans avec vos amis et collègues de travail
Temps de lecture : 2 minutes
Dans certains scénarios, il peut être nécessaire de partager plusieurs écrans en même temps. Avec Video API de Vonage, vous avez la possibilité de faire exactement cela.
Cet article de blog montrera comment construire une application Javascript simple qui utilise l'API Video de Vonage et qui permet d'avoir plusieurs flux de partage d'écran en même temps. Cela peut être utile pour les efforts de collaboration ou pour le simple plaisir, comme jouer une partie de tic-tac-toe avec des amis ou des membres de la famille.
Pour développer ce projet, vous aurez besoin des éléments suivants :
Compte Video API de Vonage
Connaissances de base en JavaScript
Documentation Video API
Cloner certains dépôts GitHub
Nous utiliserons un exemple de Video Chat basique provenant du répertoire Github d'Opentok comme point de départ pour ce tutoriel. Veuillez télécharger le dépôt suivant - https://github.com/opentok/opentok-web-samples et nous travaillerons avec la partie Basic Video Chat de ce dépôt.
Nous utiliserons un identifiant de session et un jeton générés par votre compte API Video de Vonage. Veuillez visiter le site tokbox.com/account pour le faire et copier-coller les informations dans le fichier config.js du référentiel. Pour une application déployée, il est recommandé de générer les ID de session et les jetons via le serveur dorsal.
Dans l'exemple d'application Basic Video Chat, naviguez jusqu'au fichier index.html et ajoutez un bouton pour le partage d'écran.
Ajoutez le code suivant dans la section <body> de la page HTML :
<button onclick=”screenShare()”>Share your screen </button>
Naviguez maintenant vers la partie js/app.js de la base de code et ajoutez la fonction suivante screenShare() fonction :
function screenShare() {
OT.checkScreenSharingCapability(function(response) {
if(!response.supported || response.extensionRegistered === false) {
console.log("screen sharing is not supported")
} else if (response.extensionInstalled === false) {
console.log("older browser like IE might require a plugin")
} else {
// Screen sharing is available. Publish the screen.
var publisher = OT.initPublisher('screenshare',
{videoSource: 'screen'},
function(error) {
if (error) {
console.log(error);
} else {
session.publish(publisher, function(error) {
if (error) {
console.log(error);
}
});
}
}
);
}
});
}Après cela, retournez au fichier index.html et ajoutez l'élément <div> pour le flux de partage d'écran :
<div>
<div id=”subscriber”></div>
<div id=”publisher”></div>
<div id=”sceenshare”></div>
</div>
Nous souhaitons séparer les flux de l'éditeur, de l'abonné et du partage d'écran afin de nous assurer que les utilisateurs peuvent également se voir les uns les autres pendant l'activité de partage d'écran. Vous pouvez mettre à jour le fichier css/app.css pour ajouter un style de mise en page supplémentaire ; cependant, sans aucune modification, les flux de partage d'écran apparaîtront dans le coin supérieur gauche.
Pour tester cela, ouvrez le fichier index.html dans votre navigateur (tel que Google Chrome), publiez votre Video et cliquez sur le bouton "Partager votre écran" sous votre flux vidéo. Ensuite, rejoignez-nous à partir d'un autre appareil ou d'un autre navigateur pour tester cette fonctionnalité !
En conclusion, cet article vous a montré un moyen simple d'améliorer l'application Basic Video Chat avec des fonctionnalités de partage d'écran qui permettent aux utilisateurs de partager leurs écrans simultanément. Pour ce faire, des améliorations ont été apportées aux fichiers HTML et JavaScript du dépôt OpenTok GitHub existant.
Partager:
Misha est Ingénieur des solutions clients chez Vonage, où il se concentre sur le développement de l'API Video. Après avoir troqué l'effervescence de San Francisco pour le charme de Milwaukee, dans le Wisconsin, il passe désormais son temps libre à découvrir les joyaux cachés du Midwest.