Vue d’ensemble Live Share - Teams

Article
05/22/2024

Live Share est un Kit de développement logiciel (SDK) conçu pour transformer Teams applications en expériences multi-utilisateurs collaboratives sans écrire de code principal dédié. Avec Live Share, vos utilisateurs peuvent co-regarder, co-créer et co-modifier ensemble dans Microsoft Teams. Que vos utilisateurs présentent pendant une réunion ou affichent du contenu partagé dans une conversation, Live Share les connecte en toute sécurité à une session partagée avec seulement quelques lignes de code.

Parfois, le partage d’écran ne suffit pas, c’est pourquoi Microsoft a créé des outils tels que PowerPoint Live et Whiteboard directement dans Teams. En plaçant votre application web directement au centre de l’interface de réunion, vos utilisateurs peuvent collaborer en toute transparence pendant les réunions et les appels.

La collaboration n’a pas non plus besoin de s’arrêter une fois les réunions terminées. Les sessions Live Share fonctionnent dans les contextes de conversation et de canal, ce qui permet à vos utilisateurs de voir qui consulte quel contenu, de se suivre les uns les autres, et bien plus encore.

Prise en main

Vue d’ensemble des fonctionnalités

Live Share dispose de trois packages principaux qui prennent en charge des scénarios de collaboration illimités. Ces packages exposent un ensemble de structures de données distribuées (DDS), y compris des blocs de construction primitifs et des scénarios clés en clé en clé.

Live Share intègre en toute transparence les réunions avec Fluid Framework. Infrastructure Fluid est une collection de bibliothèques clientes permettant de distribuer et de synchroniser l’état partagé. Live Share fournit un relais Azure Fluid gratuit, entièrement managé et prêt à l’emploi, soutenu par la sécurité et l’échelle mondiale de Teams.

Live Share permet de se connecter à un conteneur Fluid spécial associé à chaque réunion, conversation ou canal en quelques lignes de code. En plus des structures de données fournies par Fluid Framework, Live Share prend également en charge un nouvel ensemble de classes DDS pour simplifier la synchronisation de l’état de l’application.

Les fonctionnalités prises en charge par le package de base Live Share sont les suivantes :

Rejoignez une session Live Share avec LiveShareClient pour des réunions, des conversations ou des canaux.
Suivre la présence et synchroniser les métadonnées utilisateur avec LivePresence.
Coordonner l’état de l’application qui disparaît lorsque les utilisateurs quittent la session avec LiveState.
Synchronisez un minuteur de compte à rebours avec LiveTimer.
Envoyez des événements en temps réel à d’autres clients dans la session avec LiveEvent.
Présentez et suivez d’autres utilisateurs avec LiveFollowMode.
Utilisez n’importe quelle fonctionnalité de Fluid Framework, comme SharedMap et SharedString.

Vous trouverez plus d’informations sur ce package sur la page des fonctionnalités principales.

La vidéo et l’audio sont des parties instrumentales du monde moderne et du lieu de travail. Live Share media permet la synchronisation multimédia pour n’importe quel lecteur multimédia avec seulement quelques lignes de code. En synchronisant les médias à l’état du lecteur et à la couche de contrôles de transport, vous pouvez attribuer individuellement des vues, tout en fournissant la meilleure qualité possible par le biais de votre application. Étant donné que Microsoft ne rediffuse pas votre contenu multimédia, vos exigences en matière de licence et d’accès sont conservées intactes.

Les fonctionnalités prises en charge par le média Live Share sont les suivantes :

Synchronisez l’état et le suivi du lecteur multimédia avec MediaPlayerSynchronizer.
Ajustements intelligents du volume multimédia à mesure que les utilisateurs parlent pendant la réunion.
Limitez les utilisateurs qui peuvent modifier l’état du joueur.
Suspendez et reprenez la synchronisation des médias à la volée ou aux points d’attente planifiés.

Vous trouverez plus d’informations sur ce package sur la page multimédia Live Share.

Remarque

Live Share ne rediffuse pas le contenu multimédia. Il est conçu pour être utilisé avec des lecteurs web incorporés, tels que HTML5 <video> ou Azure Media Player.

Lorsque vous collaborez en temps réel, il est essentiel que les utilisateurs puissent pointer et mettre en évidence le contenu à l’écran. Le canevas Live Share facilite l’ajout d’une entrée manuscrite, de pointeurs laser et de curseurs à votre application pour une collaboration transparente.

Les fonctionnalités prises en charge par le canevas Live Share sont les suivantes :

Ajoutez une collaboration <canvas> à votre application avec LiveCanvas.
Transmettez des idées à l’aide des outils de stylet, de surligneur, de trait et de flèche.
Présenter efficacement à l’aide du pointeur laser.
Suivez les curseurs de souris en temps réel.
Configurez les paramètres des appareils variables et des états d’affichage.
Utilisez des entrées de souris, tactiles et stylet entièrement prises en charge.

Vous trouverez plus d’informations sur ce package sur la page canevas Live Share.

La création d’applications collaboratives peut être difficile, fastidieuse, coûteuse et comprend des exigences de conformité complexes à grande échelle. Les utilisateurs de Teams passent beaucoup de temps à revoir leur travail avec leurs coéquipiers, à regarder des vidéos ensemble et à réfléchir à de nouvelles idées grâce au partage d'écran. Le SDK Live Share vous permet de transformer votre application en quelque chose de plus collaboratif avec un investissement minimal.

Voici quelques-uns des principaux avantages du SDK Live Share :

Gestion et sécurité des sessions sans souci.
Structures de données distribuées avec état et sans état.
Extensions multimédias pour synchroniser facilement la vidéo et l’audio.
Entrée manuscrite clé en touche, pointeurs laser et curseurs.
Respecter les privilèges de réunion à l’aide de la vérification de rôle.
Service gratuit et entièrement managé avec une faible latence.

Pour comprendre si Live Share convient à votre scénario de collaboration, il est utile de comprendre les différences entre Live Share et d’autres frameworks collaboratifs, notamment :

Sockets web
Relais Azure Fluid
Live Share

Sockets web

Les sockets web sont une technologie omniprésente pour la communication en temps réel sur le web, et certaines applications peuvent préférer utiliser leur propre back-end de socket web personnalisé. Contrairement aux API REST, les sockets web conservent une connexion ouverte entre un serveur et les clients dans une session.

Comme les autres services d’API personnalisés, les exigences incluent généralement l’authentification des sessions, le mappage régional, la maintenance et la mise à l’échelle. De nombreux scénarios collaboratifs nécessitent également le maintien de l’état de session sur le serveur, ce qui nécessite l’infrastructure de stockage, la résolution des conflits, etc.

En utilisant Live Share, vous obtenez toute la puissance des sockets web sans aucune surcharge.

Relais Azure Fluid

Relais Azure Fluid est une offre managée pour Fluid Framework qui permet aux développeurs de créer des expériences collaboratives en temps réel et de répliquer l’état sur les clients JavaScript connectés. Microsoft Whiteboard, Loop et OneNote sont tous des exemples d’applications créées avec Fluid Framework aujourd’hui.

Comme d’autres services Azure, Azure Fluid Relay est conçu pour s’adapter aux besoins individuels de votre projet avec une complexité minimale. Les exigences incluent le développement d’un article d’authentification pour vos conteneurs Fluid et la conformité régionale. Une fois configurés, les développeurs peuvent se concentrer sur la fourniture d’expériences collaboratives de haute qualité.

Live Share fournit un service Relais Azure Fluid clé en charge par la sécurité de Microsoft Teams. Toutes les sessions respectent les exigences de résidence des données des locataires, les réglementations globales et les engagements en matière de sécurité. En quelques lignes de code seulement, vous pouvez vous connecter à des conteneurs Live Share accessibles uniquement aux membres d’une réunion, d’une conversation ou d’un canal.

JavaScript
TypeScript

import { LiveShareClient, LivePresence } from "@microsoft/live-share";
import { LiveShareHost } from "@microsoft/teams-js";

// Join the Fluid container
const host = LiveShareHost.create();
const liveShare = new LiveShareClient(host);
const schema = {
  initialObjects: { presence: LivePresence },
};
const { container } = await liveShare.joinContainer(schema);

// ... ready to start app sync logic

import { LiveShareClient, LivePresence } from "@microsoft/live-share";
import { LiveShareHost } from "@microsoft/teams-js";
import { ContainerSchema } from "fluid-framework";

// Join the Fluid container
const host = LiveShareHost.create();
const liveShare = new LiveShareClient(host);
const schema: ContainerSchema = {
  initialObjects: { presence: LivePresence },
};
const { container } = await liveShare.joinContainer(schema);

// ... ready to start app sync logic

Importante

Toutes les données envoyées ou stockées via le service Relais Azure Fluid hébergé du SDK Live Share sont accessibles jusqu’à 24 heures. Si vous souhaitez en savoir plus, veuillez consulter la rubrique FAQ sur Live Share.

Utilisation d’un service Relais Azure Fluid personnalisé

Bien que la plupart d’entre vous trouvent préférable d’utiliser notre service hébergé gratuit, il existe encore des situations où il est avantageux d’utiliser votre propre service Relais Azure Fluid pour votre application Live Share.

Envisagez d’utiliser un service personnalisé si vous :

Exiger le stockage à long terme des données dans des conteneurs Fluid.
Transmettre des données sensibles via le service qui nécessite une stratégie de sécurité personnalisée.
Développez des fonctionnalités via Fluid Framework, par exemple, SharedMappour votre application en dehors de Teams.

Pour plus d’informations, consultez le guide pratique du service Relais Azure Fluid personnalisé.

Les sessions Live Share permettent une collaboration transparente dans les réunions, les conversations et les canaux. Lorsque vous vous connectez à une session via l’API joinContainer() , Teams connecte votre utilisateur au conteneur Fluid approprié. Bien que vous n’ayez pas besoin d’écrire de code spécifique au contexte, vous devez comprendre les différences dans les scénarios utilisateur pour chaque surface d’onglet.

Remarque

Les sessions Live Share utilisées dans différents contextes doivent se connecter au même conteneur Fluid. Si vous souhaitez synchroniser les données différemment dans différents contextes, vous pouvez créer différents objets de données distribuées (DDS) pour chaque contexte et écouter uniquement les modifications pour celles qui sont pertinentes pour votre scénario.

L’API du Kit de getContext() développement logiciel (SDK) JavaScript Teams vous indique dans quelle FrameContexts application s’exécute. Vous pouvez l’utiliser pour activer de manière conditionnelle différents modèles d’expérience utilisateur et fonctionnalités dans votre application pour chaque contexte. Live Share prend en charge les contextes suivants FrameContexts :

meetingStage
sidePanel
content

L’exemple suivant montre comment ajouter des fonctionnalités spécifiques au contexte à votre application :

JavaScript
TypeScript

import { LiveShareClient, LiveFollowMode } from "@microsoft/live-share";
import {
  app,
  liveShare,
  LiveShareHost,
  FrameContexts,
} from "@microsoft/teams-js";

// Check if Live Share is supported in the current host / context
if (!liveShare.isSupported()) return;

// Join the Fluid container for the current scope
const host = LiveShareHost.create();
const liveShare = new LiveShareClient(host);
const schema = {
  initialObjects: { followMode: LiveFollowMode },
};
const { container } = await liveShare.joinContainer(schema);

// Get teamsJs context
const context = await app.getContext();
switch (context.page?.frameContext) {
  case FrameContexts.meetingStage: {
    // Optimize app for meeting stage
    // e.g., followMode.startPresenting()
    break;
  }
  case FrameContexts.sidePanel: {
    // Optimize app for meeting side panel
    // e.g., provide simplified UX for selecting content
    break;
  }
  case FrameContexts.content: {
    // Optimize app for content
    // e.g., hide presenter settings not appropriate for async contexts
    break;
  }
  default: {
    throw new Error("Received unexpected frameContext");
  }
}

// ... ready to start app sync logic

import { LiveShareClient, LiveFollowMode } from "@microsoft/live-share";
import { app, liveShare, LiveShareHost, FrameContexts } from "@microsoft/teams-js";
import { ContainerSchema } from "fluid-framework";

// Check if Live Share is supported in the current host / context
if (!liveShare.isSupported()) return;

// Join the Fluid container for the current scope
const host = LiveShareHost.create();
const liveShare = new LiveShareClient(host);
const schema: ContainerSchema = {
  initialObjects: { followMode: LiveFollowMode },
};
const { container } = await liveShare.joinContainer(schema);

// Get teamsJs context
const context: app.Context = await app.getContext();
switch(context.page?.frameContext) {
  case FrameContexts.meetingStage: {
    // Optimize app for meeting stage
    // e.g., followMode.startPresenting()
    break;
  }
  case FrameContexts.sidePanel: {
    // Optimize app for meeting side panel
    // e.g., provide simplified UX for selecting content
    break;
  }
  case FrameContexts.content: {
    // Optimize app for content
    // e.g., hide presenter settings not appropriate for async contexts
    break;
  }
  default: {
    throw new Error("Received unexpected frameContext");
  }
}

// ... ready to start app sync logic

Contextes de réunion

Comme nous l’avons mentionné précédemment, il existe deux contextes de réunion : meetingStage et sidePanel. Dans la section suivante, découvrez comment optimiser ces contextes pour améliorer l’expérience utilisateur.

Étape de la réunion

Le meetingStage contexte permet aux utilisateurs de partager le contenu de votre application à la phase de réunion pour les participants à la réunion. Dans ce contexte, les utilisateurs s’attendent généralement à collaborer en temps réel. Contrairement au chargement d’une application collaborative comme Microsoft Loop ou Word dans un navigateur web, les présentateurs s’attendent généralement à avoir plus de contrôle sur l’expérience. Par exemple, dans PowerPoint Live, les présentateurs s’attendent à avoir le contrôle sur la diapositive PowerPoint visible par défaut par les participants, même si les participants peuvent choisir d’arrêter de les suivre temporairement.

Envisagez d’effectuer les optimisations suivantes pour votre meetingStage application :

Placez le contrôle présentateur actif de l’application, par exemple en contrôlant la position de la caméra pour tous les utilisateurs qui consultent un modèle 3D.
Autorisez les utilisateurs éligibles à prendre le contrôle de l’application, par exemple en prenant le contrôle de la lecture multimédia lors de la co-visionnage d’une vidéo.
Permettez aux utilisateurs d’arrêter temporairement de suivre le présentateur, par exemple en affichant un bouton « Synchroniser avec le présentateur » lorsqu’un participant clique sur une autre image dans un diaporama.
Fournissez des paramètres qui donnent au présentateur le contrôle, comme la désactivation de la possibilité pour d’autres utilisateurs d’arrêter de les suivre.

Panneau latéral de la réunion

Le contexte de réunion sidePanel permet aux utilisateurs d’épingler votre application en tant qu’onglet dans une réunion, aux côtés des onglets par défaut tels que la conversation. Bien que n’importe quel participant à la réunion puisse avoir la possibilité d’ouvrir un sidePanel onglet, chaque utilisateur doit l’ouvrir individuellement. Cela le rend idéal pour les scénarios asynchrones pendant une réunion, tels que la recherche de contenu à partager avec la phase de réunion. Bien que vos utilisateurs ne souhaitent pas co-regarder, co-créer ou co-éditer du contenu enrichi à partir de cette surface, Live Share peut toujours améliorer votre sidePanel application.

Envisagez d’effectuer les optimisations suivantes pour votre sidePanel application :

Expériences complémentaires à la phase de réunion, telles que les playlists vidéo ou audio collaboratives.
Paramètres de configuration avant de partager du contenu vers la phase de réunion, comme la désactivation de la fonctionnalité « prendre le contrôle ».
Optimisations des performances, telles que la diffusion d’un nouveau contenu une fois alors que le partage a déjà démarré, au lieu de recharger l’application.

Contextes de contenu

Le content contexte est conçu pour une consommation asynchrone du contenu de votre application. Il existe deux surfaces différentes pour content les contextes dans la conversation et les canaux, notamment :

Onglets de conversation et de canal
Vue d’étape collaborative

Remarque

Le content contexte est également utilisé pour les applications personnelles, que Live Share ne prend pas en charge. Live Share prend uniquement en charge content les contextes sur les clients web et de bureau Teams.

Onglets de conversation et de canal

Les onglets de conversation et de canal permettent aux utilisateurs d’épingler votre application à une conversation ou à un canal. Onglet qui prend en charge et sidePanelcontent qui présente la même URL épinglée, mais les cas d’usage sont assez différents. Pour commencer, les onglets de conversation et de canal ont généralement plus d’espace horizontal pour travailler. Il est recommandé d’autoriser les utilisateurs à rechercher du contenu à « épingler » à l’onglet. Par exemple, les enseignants qui utilisent une application de notes peuvent épingler des notes contenant des ressources pédagogiques pour leurs étudiants.

Bien que les onglets de conversation et de canal soient généralement utilisés pour la consommation asynchrone, il est possible pour vos utilisateurs d’avoir le même contenu en même temps. Dans ce cas, il est utile de maintenir le contenu synchronisé pour éviter les conflits de données ou la duplication du travail. Live Share vous permet d’afficher le contenu que chaque utilisateur affiche, ce qu’il fait et bien plus encore. Cela peut fournir des incitations sociales qui attirent les utilisateurs dans le contenu de l’application, ce qui augmente l’engagement et la collaboration. Nous appelons cette « collaboration par coïncidence ».

Envisagez d’effectuer les optimisations suivantes pour votre content onglet de conversation et de canal :

Afficher les utilisateurs qui affichent le contenu épinglé à l’onglet, par exemple les utilisateurs qui consultent activement chaque tableau blanc.
Inciter les utilisateurs à rejoindre une session de collaboration en cours, par exemple en affichant un toast pour rejoindre un standup en cours pour une application de tâche.
Autoriser les utilisateurs à suivre un utilisateur ou un groupe d’utilisateurs spécifiques, par exemple en cliquant sur l’avatar d’un autre utilisateur connecté qu’ils souhaitent suivre.

Vue d’étape collaborative

Lorsque les utilisateurs partagent le contenu de votre application avec leurs collègues dans Teams, nous vous recommandons d’utiliser la vue d’étape collaborative. Dans ce scénario, les utilisateurs ouvrent le contenu qui a été partagé dans une fenêtre contextuelle avec une conversation sur le côté, ce qui permet aux utilisateurs d’interagir avec votre contenu tout en continuant le flux de conversation. À l’instar des onglets de conversation et de canal, ce contenu est principalement consommé de manière asynchrone. Toutefois, si les utilisateurs partagent le contenu via une carte adaptative, les utilisateurs sont plus susceptibles d’afficher le contenu et de discuter entre eux, ce qui augmente le besoin de fonctionnalités collaboratives.

Envisagez d’effectuer les optimisations suivantes pour vos applications stageview collaboratives :

Afficher les utilisateurs qui affichent le contenu et ce qu’ils font, par exemple en affichant l’avatar d’un utilisateur à la position à laquelle ils se trouvent dans une vidéo.
Autoriser les utilisateurs à suivre un utilisateur ou un groupe d’utilisateurs spécifiques, par exemple en cliquant sur l’avatar d’un autre utilisateur connecté qu’ils souhaitent suivre.
Facilitez la communication ad hoc, par exemple en activant les outils d’entrée manuscrite et les pointeurs laser en mode suivi.

Intégration de React

Live Share dispose d’une intégration React dédiée, ce qui facilite l’intégration des fonctionnalités Live Share dans les applications React. Au lieu d’utiliser LiveShareClient directement, vous pouvez utiliser le LiveShareProvider composant pour rejoindre une session Live Share lors du premier montage du composant. Chacun LiveDataObject a un hook React correspondant, conçu pour rendre l’utilisation de Live Share incroyablement facile. Pour plus d’informations, consultez La page GitHub Live Share pour React.

Scénarios utilisateur

Scénario	Exemple
Au cours d’une révision marketing, un utilisateur souhaite recueillir des commentaires sur sa dernière modification vidéo.	L’utilisateur partage la vidéo à la phase de réunion et démarre la vidéo. Si nécessaire, l’utilisateur suspend la vidéo pour discuter de la scène et les participants dessinent sur des parties de l’écran pour mettre en évidence les points clés.
Un responsable de projet joue à Agile Poker avec son équipe pendant la planification.	Le responsable partage une application Agile Poker à la phase de réunion qui permet de jouer au jeu de planification jusqu’à ce que l’équipe ait un consensus.
Un conseiller financier examine les documents PDF avec les clients avant de signer.	Le conseiller financier partage le contrat PDF à la phase de réunion. Tous les participants peuvent voir les curseurs de l’autre et le texte mis en surbrillance dans le fichier PDF, après quoi les deux parties signent l’accord.
Les ingénieurs visualisent un modèle 3D ensemble.	Une équipe d’ingénierie affiche un modèle 3D qui a été partagé dans une conversation. Ils peuvent voir les positions de la caméra de l’autre, modifier le modèle et se suivre.

Importante

Live Share est concédé sous licence dans le cadre de la licence du Kit de développement logiciel (SDK) Microsoft Live Share. Pour utiliser ces fonctionnalités dans votre application, vous devez d’abord lire et accepter ces conditions.

Étape suivante

Prise en main

Partager via

Vue d’ensemble des fonctionnalités

Sockets web

Relais Azure Fluid

Utilisation d’un service Relais Azure Fluid personnalisé

Contextes de réunion

Étape de la réunion

Panneau latéral de la réunion

Contextes de contenu

Onglets de conversation et de canal

Vue d’étape collaborative

Intégration de React

Scénarios utilisateur

Étape suivante

Voir aussi

Ressources supplémentaires

Partager via

FAQ sur le Kit de développement logiciel (SDK) de Live Share

Vue d’ensemble des fonctionnalités

Cœur de Live Share

Média Live Share

Canevas Live Share

Pourquoi créer des applications avec Live Share ?

Sockets web

Relais Azure Fluid

Service hébergé Live Share

Utilisation d’un service Relais Azure Fluid personnalisé

Contextes de collaboration Live Share

Contextes de réunion

Étape de la réunion

Panneau latéral de la réunion

Contextes de contenu

Onglets de conversation et de canal

Vue d’étape collaborative

Intégration de React

Scénarios utilisateur

Étape suivante

Voir aussi

Ressources supplémentaires