Teilen über


Live Share SDK

Screenshot: Live Share in einer Besprechung Besprechungsteilnehmer betrachten gemeinsam ein 3D-Modell.

Live Share ist ein SDK, das entwickelt wurde, um Teams-Apps in kollaborative Mehrbenutzererlebnisse umzuwandeln, ohne einen dedizierten Back-End-Code schreiben zu müssen. Mit Live Share können Ihre Benutzer in Microsoft Teams gemeinsam ansehen, gemeinsam erstellen und bearbeiten. Unabhängig davon, ob Ihre Benutzer während einer Besprechung präsentieren oder inhalte anzeigen, die für einen Chat freigegeben wurden, verbindet Live Share sie mit nur wenigen Codezeilen sicher mit einer freigegebenen Sitzung.

Manchmal reicht die Bildschirmfreigabe einfach nicht aus, weshalb Microsoft Tools wie PowerPoint Live und Whiteboard direkt in Teams integriert hat. Indem Sie Ihre Webanwendung direkt in den Mittelpunkt der Besprechungsoberfläche stellen, können Ihre Benutzer während Besprechungen und Anrufen nahtlos zusammenarbeiten.

Die Zusammenarbeit muss auch nach dem Ende der Besprechungen nicht beendet werden. Live Share-Sitzungen funktionieren in Chat- und Kanalkontexten, sodass Ihre Benutzer sehen können, wer welche Inhalte anzeigt, einander folgen und vieles mehr.

Featureübersicht

Live Share verfügt über drei primäre Pakete, die unbegrenzte Zusammenarbeitsszenarien unterstützen. Diese Pakete machen eine Reihe von verteilten Datenstrukturen (DDS) verfügbar, einschließlich primitiver Bausteine und schlüsselfertiger Szenarien.

Live Share integriert Besprechungen nahtlos in Fluid Framework. Fluid Framework ist eine Sammlung von Client-Bibliotheken zum Verteilen und Synchronisieren von freigegeben Status. Live Share bietet ein kostenloses, vollständig verwaltetes und einsatzbereites Azure Fluid Relay, das durch die Sicherheit und globale Reichweite von Teams unterstützt wird.

Live Share Core

Live Share ermöglicht die Verbindung mit einem speziellen Fluid Container, der jeder Besprechung, jedem Chat oder Kanal in wenigen Codezeilen zugeordnet ist. Zusätzlich zu den von Fluid Framework bereitgestellten Datenstrukturen unterstützt Live Share auch einen neuen Satz von DDS-Klassen, um die Synchronisierung des App-Zustands zu vereinfachen.

Zu den vom Live Share-Kernpaket unterstützten Features gehören:

  • Nehmen Sie an einer Live Share-Sitzung mit LiveShareClient für Besprechungen, Chats oder Kanäle teil.
  • Nachverfolgen von Anwesenheitsinformationen und Synchronisieren von Benutzermetadaten mit LivePresence.
  • Der App-Koordinatenstatus wird ausgeblendet, wenn Benutzer die Sitzung mit LiveStateverlassen.
  • Synchronisieren Sie einen Countdown-Timer mit LiveTimer.
  • Senden Von Echtzeitereignissen an andere Clients in der Sitzung mit LiveEvent.
  • Präsentieren sie anderen Benutzern, und folgen Sie anderen Benutzern mit LiveFollowMode.
  • Verwenden Sie ein beliebiges Feature von Fluid Framework, z SharedMap . B. und SharedString.

Weitere Informationen zu diesem Paket finden Sie auf der Seite mit den wichtigsten Funktionen.

Live Share-Medien

Screenshot: Beispiel für die Live Share-Videofreigabe

Video und Audio sind wichtige Bestandteile der modernen Welt und des Arbeitsplatzes. Live Share-Medien ermöglichen die Mediensynchronisierung für jeden Media Player mit nur wenigen Codezeilen. Durch die Synchronisierung von Medien auf der Playerzustands- und Transportsteuerungsebene können Sie Ansichten einzeln zuordnen und gleichzeitig die höchstmögliche Qualität bereitstellen, die über Ihre App verfügbar ist. Da Microsoft Ihre Medieninhalte nicht erneut übertragen, bleiben Ihre Lizenzierungs- und Zugriffsanforderungen erhalten.

Zu den von Live Share-Medien unterstützten Features gehören:

  • Synchronisieren Des Media Player-Zustands und -Nachverfolgens mit MediaPlayerSynchronizer.
  • Intelligente Anpassungen der Medienlautstärke, wenn Benutzer während der Besprechung sprechen.
  • Schränken Sie ein, welche Benutzer den Spielerstatus ändern können.
  • Anhalten und Fortsetzen der Mediensynchronisierung während des Vorgangs oder an geplanten Wartepunkten.

Weitere Informationen zu diesem Paket finden Sie auf der Live Share-Medienseite.

Hinweis

Live Share übergibt Medieninhalte nicht erneut. Es ist für die Verwendung mit eingebetteten Webplayern wie HTML5 <video> oder Azure Media Player konzipiert.

Live Share-Canvas

Screenshots zeigen ein Beispiel für mehrere Benutzer, die während einer Besprechung auf einer Canvas zeichnen.

Bei der Zusammenarbeit in Echtzeit ist es wichtig, dass Benutzer inhalte auf dem Bildschirm hervorheben und hervorheben können. Die Live Share-Canvas erleichtert das Hinzufügen von Freihand, Laserpointern und Cursorn zu Ihrer App für eine nahtlose Zusammenarbeit.

Die Live Share-Canvas unterstützt folgende Features:

  • Fügen Sie Ihrer App mit LiveCanvaseine Zusammenarbeit <canvas> hinzu.
  • Vermitteln Sie Ideen mithilfe der Stift-, Textmarker-, Linien- und Pfeiltools.
  • Präsentieren Sie effektiv mit dem Laserpointer.
  • Folgen Sie zusammen mit echtzeitbasierten Mauszeigern.
  • Konfigurieren Sie Einstellungen für variable Geräte und Ansichtszustände.
  • Verwenden Sie vollständig unterstützte Maus-, Touch- und Eingabeeingaben.

Weitere Informationen zu diesem Paket finden Sie auf der Live Share-Canvasseite.

Gründe für das Erstellen von Apps mit Live Share

Das Erstellen von kollaborativen Apps kann schwierig, zeitaufwändig und kostspielig sein und umfasst komplexe Compliance-Anforderungen in großem Maßstab. Benutzer von Teams verbringen viel Zeit damit, die Arbeit mit Teamkollegen zu überprüfen, gemeinsam Videos anzusehen und neue Ideen durch Bildschirmfreigabe zu sammeln. Mit dem Live Share SDK können Sie Ihre App mit minimalen Investitionen in etwas kollaborativeres verwandeln.

Hier sind einige der wichtigsten Vorteile des Live Share SDK:

  • Problemloses Sitzungsmanagement und Sicherheit
  • Zustandsbehaftete und zustandslose verteilte Datenstrukturen
  • Medienerweiterungen zum einfachen Synchronisieren von Video und Audio
  • Freihandeingabe, Laserpointer und Cursor.
  • Besprechungsberechtigungen mithilfe der Rollenüberprüfung respektieren
  • Kostenloser und vollständig verwalteter Dienst mit geringer Latenz

Um zu verstehen, ob Live Share für Ihr Szenario für die Zusammenarbeit geeignet ist, ist es hilfreich, die Unterschiede zwischen Live Share und anderen Frameworks für die Zusammenarbeit zu verstehen, einschließlich:

Websockets

Websockets sind eine allgegenwärtige Technologie für die Echtzeitkommunikation im Web, und einige Apps bevorzugen möglicherweise die Verwendung eines eigenen benutzerdefinierten Websocket-Back-Ends. Im Gegensatz zu REST-APIs behalten Websockets eine offene Verbindung zwischen einem Server und Clients in einer Sitzung bei.

Wie andere benutzerdefinierte API-Dienste umfassen anforderungen in der Regel Authentifizierungssitzungen, regionale Zuordnung, Wartung und Skalierung. Viele Szenarien für die Zusammenarbeit erfordern auch die Beibehaltung des Sitzungszustands auf dem Server, was Speicherinfrastruktur, Konfliktlösungen und vieles mehr erfordert.

Durch die Verwendung von Live Share erhalten Sie die gesamte Leistung von Websockets ohne den Aufwand.

Azure Fluid Relay

Azure Fluid Relay ist ein verwaltetes Angebot für das Fluid Framework, mit dem Entwickler Zusammenarbeitserfahrungen in Echtzeit erstellen und den Zustand über verbundene JavaScript-Clients replizieren können. Microsoft Whiteboard, Loop und OneNote sind Beispiele für Apps, die heute mit Fluid Framework erstellt wurden.

Wie andere Azure-Dienste ist Auch Azure Fluid Relay so konzipiert, dass sie mit minimaler Komplexität an Ihre individuellen Projektanforderungen angepasst wird. Zu den Anforderungen gehören die Entwicklung einer Authentifizierungsgeschichte für Ihre Fluidcontainer und die regionale Compliance. Nach der Konfiguration können sich Entwickler auf die Bereitstellung hochwertiger Zusammenarbeitserfahrungen konzentrieren.

Gehosteter Live Share-Dienst

Live Share bietet einen schlüsselfertigen Azure Fluid Relay-Dienst, der durch die Sicherheit von Microsoft Teams unterstützt wird. Alle Sitzungen entsprechen den Anforderungen an die Mandantendatenresidenz, globalen Vorschriften und Sicherheitsverpflichtungen. In nur wenigen Codezeilen können Sie eine Verbindung mit Live Share-Containern herstellen, auf die nur Mitglieder einer Besprechung, eines Chats oder Kanals zugreifen können.

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

Wichtig

Auf alle Daten, die über den gehosteten Azure Fluid Relay-Dienst des Live Share SDK gesendet oder gespeichert werden, kann bis zu 24 Stunden zugegriffen werden. Weitere Informationen finden Sie unter Häufig gestellte Fragen zu Live Share.

Verwenden eines benutzerdefinierten Azure Fluid Relay-Diensts

Die meisten von Ihnen finden es zwar vorzuziehen, unseren kostenlos gehosteten Dienst zu verwenden, aber es gibt immer noch Situationen, in denen es von Vorteil ist, Ihren eigenen Azure Fluid Relay-Dienst für Ihre Live Share-App zu verwenden.

Erwägen Sie die Verwendung eines benutzerdefinierten Diensts, wenn Sie:

  • Erfordern einer langfristigen Speicherung von Daten in Fluidcontainern.
  • Übertragen Sie vertrauliche Daten über den Dienst, für den eine benutzerdefinierte Sicherheitsrichtlinie erforderlich ist.
  • Entwickeln Sie Features über Fluid Framework, SharedMapz. B. , für Ihre Anwendung außerhalb von Teams.

Weitere Informationen finden Sie in der Anleitung zum benutzerdefinierten Azure Fluid Relay-Dienst.

Live Share-Kontexte für die Zusammenarbeit

Live Share-Sitzungen ermöglichen eine nahtlose Zusammenarbeit in Besprechungen, Chats und Kanälen. Wenn Sie über die joinContainer() API eine Verbindung mit einer Sitzung herstellen, verbindet Teams Ihren Benutzer mit dem entsprechenden Fluid-Container. Obwohl Sie keinen kontextspezifischen Code schreiben müssen, sollten Sie die Unterschiede in den Benutzerszenarien für jede Registerkartenoberfläche kennen.

Hinweis

Live Share-Sitzungen, die in verschiedenen Kontexten verwendet werden, sollten eine Verbindung mit demselben Fluid-Container herstellen. Wenn Sie Daten in verschiedenen Kontexten unterschiedlich synchronisieren möchten, können Sie für jeden Kontext unterschiedliche Verteilte Datenobjekte (Distributed Data Objects, DDS) erstellen und nur auf Änderungen lauschen, die für Ihr Szenario relevant sind.

Die API des getContext() Teams JavaScript SDK teilt Ihnen mit, in welchem Bereich FrameContexts Ihre App ausgeführt wird. Sie können dies verwenden, um unterschiedliche Features und UX-Muster in Ihrer Anwendung für jeden Kontext bedingt zu aktivieren. Live Share unterstützt die folgenden FrameContexts Kontexte:

  • meetingStage
  • sidePanel
  • content

Das folgende Beispiel zeigt, wie Sie Ihrer Anwendung kontextspezifische Funktionen hinzufügen können:

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

Besprechungskontexte

Screenshot: Besprechungsseitenbereich und -phase

Wie bereits erwähnt, gibt es zwei Besprechungskontexte: meetingStage und sidePanel. Im folgenden Abschnitt erfahren Sie, wie Sie diese Kontexte optimieren, um die Benutzererfahrung zu verbessern.

Besprechungsphase

Der meetingStage Kontext ermöglicht es Benutzern, Ihre App-Inhalte für die Besprechungsphase für Teilnehmer an der Besprechung freizugeben. In diesem Kontext erwarten Benutzer in der Regel, in Echtzeit zusammenzuarbeiten. Im Gegensatz zum Laden einer App für die Zusammenarbeit wie Microsoft Loop oder Word in einem Webbrowser erwarten Referenten in der Regel mehr Kontrolle über die Benutzeroberfläche. Beispielsweise erwarten Referenten in PowerPoint Live, dass sie steuern können, welche PowerPoint-Folie für Die Teilnehmer standardmäßig sichtbar ist, auch wenn die Teilnehmer entscheiden können, ihnen vorübergehend nicht mehr zu folgen.

Übersicht über eindeutige Anwendungsfälle für Live Share in der Besprechungsphase.

Erwägen Sie, die folgenden Optimierungen für Ihre meetingStage App vorzunehmen:

  • Platzieren Sie das aktive Referentensteuerelement der App, z. B. durch Steuern der Kameraposition für alle Benutzer, die ein 3D-Modell anzeigen.
  • Ermöglichen Sie berechtigten Benutzern, die Kontrolle über die App zu übernehmen, z. B. die Kontrolle über die Medienwiedergabe während der gemeinsamen Wiedergabe eines Videos.
  • Benutzer können vorübergehend aufhören, dem Referenten zu folgen, z. B. die Schaltfläche "Mit Referenten synchronisieren", wenn ein Teilnehmer auf ein anderes Bild in einer Bildschirmpräsentation klickt.
  • Geben Sie Einstellungen an, die dem Referenten steuerelementieren, z. B. die Möglichkeit deaktivieren, dass andere Benutzer ihnen nicht mehr folgen können.

Besprechungsseitenbereich

Der Besprechungskontext sidePanel ermöglicht es Benutzern, Ihre App als Registerkarte in einer Besprechung neben Standardregisterkarten wie Chat anzuheften. Während jeder Besprechungsteilnehmer die Möglichkeit hat, eine sidePanel Registerkarte zu öffnen, muss jeder Benutzer sie einzeln öffnen. Dies macht es ideal für asynchrone Szenarien während einer Besprechung, z. B. die Suche nach Inhalten, die für die Besprechungsphase freigegeben werden sollen. Während Ihre Benutzer auf dieser Oberfläche keine umfassenden Inhalte gemeinsam ansehen, gemeinsam erstellen oder bearbeiten möchten, kann Live Share Ihre sidePanel App dennoch verbessern.

Übersicht über eindeutige Anwendungsfälle für Live Share im Besprechungsseitenbereich.

Erwägen Sie, die folgenden Optimierungen für Ihre sidePanel App vorzunehmen:

  • Begleiterfahrungen für die Besprechungsphase, z. B. gemeinsame Video- oder Audiowiedergabelisten.
  • Konfigurationseinstellungen vor dem Freigeben von Inhalten für die Besprechungsphase, z. B. das Deaktivieren des Features "Kontrolle übernehmen".
  • Leistungsoptimierungen, z. B. die einmalige Übertragung neuer Inhalte, während die Freigabe bereits gestartet wurde, anstatt die Anwendung neu zu laden.

Inhaltskontexte

Der content Kontext ist für die asynchrone Nutzung des Inhalts Ihrer App konzipiert. Es gibt einige verschiedene Oberflächen für content Kontexte in Chats und Kanälen, einschließlich:

  • Chat- und Kanalregisterkarten
  • Ansicht der Phase "Zusammenarbeit"

Hinweis

Der content Kontext wird auch für persönliche Apps verwendet, die von Live Share nicht unterstützt werden. Live Share unterstützt content nur Kontexte auf Teams-Desktop- und Webclients.

Chat- und Kanalregisterkarten

Screenshot: Live Share in Chat- und Kanalregisterkarten mit einer Liste von Taskboards und Avataren, die angibt, welche Aufgaben personen anzeigen.

Mithilfe von Chat- und Kanalregistern können Benutzer Ihre Anwendung an einen Chat oder Kanal anheften. Eine Registerkarte, die sowohl als auch sidePanelcontent die gleiche angeheftete URL unterstützt, aber die Anwendungsfälle unterscheiden sich ziemlich. Für den Anfang bieten Chat- und Kanalregisterkarten in der Regel mehr horizontalen Platz zum Arbeiten. Als bewährte Methode können Benutzer nach Inhalten suchen, die an die Registerkarte angeheftt werden sollen. Beispielsweise können Lehrer, die eine Notiz-App verwenden, Notizen anheften, die Bildungsressourcen für ihre Schüler enthalten.

Während Chat- und Kanalregisterkarten am häufigsten für die asynchrone Nutzung verwendet werden, ist es möglich, dass Ihre Benutzer gleichzeitig über dieselben Inhalte verfügen. In diesem Fall ist es hilfreich, inhalte synchron zu halten, um Datenkonflikte oder Duplikate von Arbeit zu verhindern. Mit Live Share können Sie anzeigen, welche Inhalte jeder Benutzer anzeigt, was er gerade tut und vieles mehr. Dies kann soziale Anreize bieten, die Benutzer in App-Inhalte ziehen und die Interaktion und Zusammenarbeit erhöhen. Wir nennen dies "zufällige Zusammenarbeit".

Übersicht über eindeutige Anwendungsfälle für Live Share in Chat- und Kanalregisterkarten.

Erwägen Sie, die folgenden Optimierungen für Ihre content Chat- und Kanalregisterkarte vorzunehmen:

  • Zeigen Sie an, welche Benutzer Inhalte anzeigen, die an die Registerkarte angeheftet sind, z. B. Benutzer, die jedes Whiteboard aktiv anzeigen.
  • Animieren sie Benutzer, an einer laufenden Zusammenarbeitssitzung teilzunehmen, z. B. das Anzeigen eines Popups, um an einem laufenden Standup für eine Aufgaben-App teilzunehmen.
  • Ermöglichen Sie Es Benutzern, einem bestimmten Benutzer oder einer Gruppe von Benutzern zu folgen, z. B. indem Sie auf den Avatar eines anderen verbundenen Benutzers klicken, dem sie folgen möchten.

Phasenansicht für die Zusammenarbeit

Screenshot: Live Share in Collaborative Stageview, in dem ein Videoplayer geöffnet ist und Avatare bestimmte Punkte im Video angeben, die jeder Benutzer anzeigt.

Wenn Benutzer die Inhalte Ihrer App für ihre Kollegen in Teams freigeben, empfehlen wir die Verwendung der Phasenansicht für die Zusammenarbeit. In diesem Szenario öffnen Benutzer Inhalte, die in einem Popout-Fenster mit Chat an der Seite freigegeben wurden, sodass Benutzer mit Ihren Inhalten interagieren können, während sie den Konversationsfluss fortsetzen. Ähnlich wie bei Chat- und Kanalregisterkarten werden diese Inhalte in erster Linie asynchron genutzt. Wenn Benutzer die Inhalte jedoch über eine adaptive Karte freigeben, ist die Wahrscheinlichkeit höher, dass Die Benutzer die Inhalte anzeigen und miteinander chatten, was den Bedarf an Features für die Zusammenarbeit erhöht.

Übersicht über eindeutige Anwendungsfälle für Live Share in der Phasenansicht für die Zusammenarbeit.

Erwägen Sie, die folgenden Optimierungen für Ihre Apps für die zusammenarbeitsorientierte Stageview vorzunehmen:

  • Zeigen Sie an, welche Benutzer den Inhalt anzeigen und was sie tun, z. B. das Anzeigen des Avatars eines Benutzers an der Position, an der er sich in einem Video befindet.
  • Ermöglichen Sie Es Benutzern, einem bestimmten Benutzer oder einer Gruppe von Benutzern zu folgen, z. B. indem Sie auf den Avatar eines anderen verbundenen Benutzers klicken, dem sie folgen möchten.
  • Erleichtern Sie die Ad-hoc-Kommunikation, z. B. durch Aktivieren von Freihandwerkzeugen und Laserpointern im Folgemodus.

React-Integration

Live Share verfügt über eine dedizierte React-Integration, sodass Live Share-Features noch einfacher in React-Apps integriert werden können. Anstatt direkt zu verwenden LiveShareClient , können Sie die LiveShareProvider Komponente verwenden, um an einer Live Share-Sitzung teilzunehmen, wenn die Komponente zum ersten Mal eingebunden wird. Jede LiveDataObject verfügt über einen entsprechenden React-Hook, der die Verwendung von Live Share unglaublich einfach macht. Weitere Informationen finden Sie auf der GitHub-Seite "Live Share für React".

Benutzerszenarien

Szenario Beispiel
Während einer Marketingüberprüfung möchte ein Benutzer Feedback zu seiner letzten Videobearbeitung sammeln. Der Benutzer gibt das Video für die Besprechungsphase weiter und startet das Video. Bei Bedarf hält der Benutzer das Video an, um die Szene zu besprechen, und die Teilnehmer zeichnen über Teile des Bildschirms, um wichtige Punkte hervorzuheben.
Ein Projektmanager spielt agile Poker mit dem Team während der Planung. Der Manager teilt der Besprechungsphase eine Agile Poker-App, die das Spielen des Planungsspiels ermöglicht, bis das Team einen Konsens hat.
Ein Finanzberater überprüft pdf-Dokumente mit Kunden, bevor er unterschreiben kann. Der Finanzberater teilt den PDF-Vertrag mit der Besprechungsphase. Alle Teilnehmer können sich gegenseitig die Cursor und den hervorgehobenen Text in der PDF sehen, nach dem beide Parteien die Vereinbarung unterzeichnen.
Techniker zeigen ein 3D-Modell zusammen an. Ein Entwicklungsteam zeigt ein 3D-Modell an, das im Chat freigegeben wurde. Sie können die Kamerapositionen des jeweils anderen sehen, das Modell bearbeiten und einander folgen.

Wichtig

Live Share ist unter der Microsoft Live Share SDK-Lizenz lizenziert. Um diese Funktionen in Ihrer App nutzen zu können, müssen Sie zuerst diese Bedingungen lesen und ihnen zustimmen.

Nächster Schritt

Siehe auch