SDK de Live Share

Live Share es un SDK diseñado para transformar las aplicaciones de Teams en experiencias multiusuario colaborativas sin necesidad de escribir código de back-end dedicado. Con Live Share, los usuarios pueden co-ver, co-crear y editar conjuntamente en Microsoft Teams. Ya sea que los usuarios presenten durante una reunión o vean el contenido compartido en un chat, Live Share los conecta de forma segura a una sesión compartida con solo unas pocas líneas de código.

A veces, el uso compartido de pantalla no es suficiente, por lo que Microsoft ha creado herramientas como PowerPoint Live y Whiteboard directamente en Teams. Al llevar la aplicación web directamente a la fase central de la interfaz de reunión, los usuarios pueden colaborar sin problemas durante las reuniones y llamadas.

Tampoco es necesario que la colaboración se detenga una vez finalizadas las reuniones. Las sesiones de Live Share funcionan en contextos de chat y canales, lo que permite a los usuarios ver quién está viendo qué contenido, seguirse unos a otros y mucho más.

Información general sobre la característica

Live Share tiene tres paquetes principales que admiten escenarios de colaboración ilimitados. Estos paquetes exponen un conjunto de estructuras de datos distribuidas (DDS), incluidos los bloques de creación primitivos y los escenarios de clave de giro.

Live Share integra perfectamente las reuniones con Fluid Framework. Fluid Framework es una colección de bibliotecas de cliente para distribuir y sincronizar el estado compartido. Live Share proporciona el servicio gratuito Azure Fluid Relay totalmente administrado, listo para usar y respaldado por la seguridad y la importancia a escala global de Teams.

Núcleo de Live Share

Live Share permite conectarse a un contenedor fluido especial asociado a cada reunión, chat o canal en unas pocas líneas de código. Además de las estructuras de datos proporcionadas por Fluid Framework, Live Share también admite un nuevo conjunto de clases DDS para simplificar la sincronización del estado de la aplicación.

Entre las características admitidas por el paquete principal de Live Share se incluyen:

• Únase a una sesión de Live Share con LiveShareClient para reuniones, chats o canales.
• Realice un seguimiento de la presencia y sincronice los metadatos de usuario con LivePresence.
• Coordine el estado de la aplicación que desaparece cuando los usuarios abandonan la sesión con LiveState.
• Sincronice un temporizador de cuenta atrás con LiveTimer.
• Envíe eventos en tiempo real a otros clientes de la sesión con LiveEvent.
• Presente y siga a otros usuarios con LiveFollowMode.
• Use cualquier característica de Fluid Framework, como SharedMap y SharedString.

Puede encontrar más información sobre este paquete en la página de funcionalidades principales.

Contenido multimedia de Live Share

El vídeo y el audio forman parte fundamental del mundo moderno y de los lugares de trabajo. Live Share Media permite la sincronización de medios para cualquier reproductor multimedia con solo unas pocas líneas de código. Al sincronizar los medios en la capa de controles de transporte y estado del reproductor, puede atribuir vistas individualmente, a la vez que proporciona la máxima calidad posible disponible a través de la aplicación. Dado que Microsoft no retransmite de nuevo el contenido multimedia, los requisitos de licencia y acceso se mantienen intactos.

Entre las características admitidas por los medios de Live Share se incluyen:

• Sincronice el estado del reproductor multimedia y realice un seguimiento con MediaPlayerSynchronizer.
• Ajustes inteligentes en el volumen multimedia a medida que los usuarios hablan durante la reunión.
• Limitar qué usuarios pueden modificar el estado del reproductor.
• Suspende y reanude la sincronización de medios sobre la marcha o en los puntos de espera programados.

Puede encontrar más información sobre este paquete en la página multimedia de Live Share.

Lienzo de Live Share

Al colaborar en tiempo real, es esencial que los usuarios puedan señalar y enfatizar el contenido en la pantalla. Live Share Canvas facilita la incorporación de entrada manuscrita, punteros láser y cursores a la aplicación para una colaboración perfecta.

Entre las características admitidas por el lienzo de Live Share se incluyen:

• Agregue una colaboración <canvas> a la aplicación con LiveCanvas.
• Transmita ideas mediante el lápiz, el resaltador, la línea y las herramientas de flecha.
• Presente de forma eficaz con el puntero láser.
• Siga junto con los cursores del mouse en tiempo real.
• Configure los valores de los dispositivos variables y los estados de vista.
• Use entradas de mouse, táctiles y de lápiz totalmente compatibles.

Puede encontrar más información sobre este paquete en la página lienzo de Live Share.

¿Por qué compilar aplicaciones con Live Share?

Crear aplicaciones colaborativas puede ser un proceso difícil, lento, costoso e incluye requisitos complejos de cumplimiento a gran escala. Los usuarios de Teams dedican una gran cantidad de tiempo a revisar el trabajo con sus compañeros de equipo, ver vídeos juntos y hacer lluvias de ideas nuevas mediante el uso compartido de la pantalla. El SDK de Live Share permite transformar una aplicación en algo más colaborativo con una inversión mínima.

Estas son algunas de las principales ventajas del SDK de Live Share:

• Administración y seguridad de sesiones sin complicaciones.
• Estructuras de datos distribuidos con y sin estado
• Extensiones multimedia para sincronizar fácilmente vídeo y audio.
• Entrada manuscrita llave en mano, punteros láser y cursores.
• Respetar los privilegios de reunión mediante la comprobación de roles.
• Servicio gratuito y totalmente administrado con baja latencia.

Para comprender si Live Share es adecuado para su escenario de colaboración, resulta útil comprender las diferencias entre Live Share y otros marcos de colaboración, entre los que se incluyen:

• Sockets web
• Azure Fluid Relay
• Live Share

Sockets web

Los sockets web son una tecnología ubicua para la comunicación en tiempo real en la web y algunas aplicaciones pueden preferir usar su propio back-end de socket web personalizado. A diferencia de las API REST, los sockets web mantienen una conexión abierta entre un servidor y los clientes de una sesión.

Al igual que otros servicios de API personalizados, los requisitos suelen incluir la autenticación de sesiones, la asignación regional, el mantenimiento y la escala. Muchos escenarios de colaboración también requieren mantener el estado de sesión en el servidor, lo que requiere infraestructura de almacenamiento, soluciones de conflictos, etc.

Al usar Live Share, obtiene toda la potencia de los sockets web sin ninguna sobrecarga.

Azure Fluid Relay

Azure Fluid Relay es una oferta administrada para Fluid Framework que ayuda a los desarrolladores a crear experiencias de colaboración en tiempo real y replicar el estado entre los clientes de JavaScript conectados. Microsoft Whiteboard, Loop y OneNote son todos ejemplos de aplicaciones creadas con Fluid Framework hoy en día.

Al igual que otros servicios de Azure, Azure Fluid Relay está diseñado para adaptarse a sus necesidades de proyecto individuales con una complejidad mínima. Entre los requisitos se incluye el desarrollo de una historia de autenticación para los contenedores fluid y el cumplimiento regional. Una vez configurados, los desarrolladores pueden centrarse en ofrecer experiencias de colaboración de alta calidad.

Servicio hospedado de Live Share

Live Share proporciona un servicio de Azure Fluid Relay a su vez respaldado por la seguridad de Microsoft Teams. Todas las sesiones cumplen los requisitos de residencia de datos de inquilino, las regulaciones globales y los compromisos de seguridad. En solo unas pocas líneas de código, puede conectarse a contenedores de Live Share que solo son accesibles para los miembros de una reunión, chat o canal.

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

Uso de un servicio de Azure Fluid Relay personalizado

Aunque a la mayoría le parece preferible usar nuestro servicio hospedado gratuito, todavía hay situaciones en las que resulta beneficioso usar su propio servicio Azure Fluid Relay para la aplicación Live Share.

Considere la posibilidad de usar un servicio personalizado si:

• Requerir almacenamiento a largo plazo de datos en contenedores Fluid.
• Transmitir datos confidenciales a través del servicio que requiere una directiva de seguridad personalizada.
• Desarrolle características a través de Fluid Framework, por ejemplo, SharedMap, para la aplicación fuera de Teams.

Para obtener más información, consulte la guía de procedimientos del servicio Azure Fluid Relay personalizada.

Contextos de colaboración de Live Share

Las sesiones de Live Share permiten la colaboración sin problemas en reuniones, chats y canales. Cuando se conecta a una sesión a través de la joinContainer() API, Teams conecta al usuario con el contenedor de Fluid adecuado. Aunque no es necesario escribir código específico del contexto, debe comprender las diferencias en los escenarios de usuario para cada superficie de pestaña.

La API del SDK de JavaScript de getContext() Teams indica en qué FrameContexts se ejecuta la aplicación. Puede usarlo para habilitar condicionalmente diferentes características y patrones de experiencia de usuario en la aplicación para cada contexto. Live Share admite los siguientes FrameContexts contextos:

• meetingStage
• sidePanel
• content

En el ejemplo siguiente se muestra cómo agregar funcionalidad específica del contexto a la aplicación:

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

Contextos de reunión

Como hemos mencionado anteriormente, hay dos contextos de reunión: meetingStage y sidePanel. En la sección siguiente, explore cómo optimizar estos contextos para mejorar la experiencia del usuario.

Fase de reunión

El meetingStage contexto permite a los usuarios compartir el contenido de la aplicación en la fase de reunión para los participantes en la reunión. En este contexto, los usuarios normalmente esperan colaborar en tiempo real. A diferencia de cuando se carga una aplicación colaborativa como Microsoft Loop o Word en un explorador web, los moderadores suelen esperar tener más control de la experiencia. Por ejemplo, en PowerPoint Live, los moderadores esperan tener control sobre qué diapositiva de PowerPoint es visible para los asistentes de forma predeterminada, incluso si los asistentes pueden optar por dejar de seguirlos temporalmente.

Considere la posibilidad de realizar las siguientes optimizaciones para la meetingStage aplicación:

• Coloque el control de moderador activo de la aplicación, por ejemplo, controlando la posición de la cámara para todos los usuarios que ven un modelo 3D.
• Permitir que los usuarios aptos tomen el control de la aplicación, como tomar el control de la reproducción multimedia mientras ven un vídeo.
• Permitir que los usuarios dejen de seguir temporalmente al moderador, como mostrar un botón "Sincronizar con moderador" cuando un asistente hace clic en una imagen diferente en una presentación.
• Proporcione una configuración que proporcione el control del moderador, como deshabilitar la posibilidad de que otros usuarios dejen de seguirlos.

Panel lateral de la reunión

El contexto de reunión sidePanel permite a los usuarios anclar la aplicación como una pestaña en una reunión, junto con pestañas predeterminadas como chat. Aunque cualquier participante de la reunión puede tener la opción de abrir una sidePanel pestaña, cada usuario debe abrirla individualmente. Esto hace que sea ideal para escenarios asincrónicos durante una reunión, como la búsqueda de contenido para compartir en la fase de reunión. Aunque los usuarios no querrán co-ver, co-crear ni editar contenido enriquecido de esta superficie, Live Share puede seguir mejorando la sidePanel aplicación.

Considere la posibilidad de realizar las siguientes optimizaciones para la sidePanel aplicación:

• Experiencias complementarias a la fase de reunión, como listas de reproducción de vídeo o audio colaborativas.
• Configuración antes de compartir contenido en la fase de reunión, como deshabilitar la característica "tomar el control".
• Las optimizaciones de rendimiento, como la difusión de contenido nuevo una vez mientras el uso compartido ya se ha iniciado, en lugar de volver a cargar la aplicación.

Contextos de contenido

El content contexto está diseñado para el consumo asincrónico del contenido de la aplicación. Hay un par de superficies diferentes para content contextos en chat y canales, entre los que se incluyen:

• Pestañas de chat y canal
• Vista de la fase de colaboración

Pestañas de chat y canal

Las pestañas chat y canal permiten a los usuarios anclar la aplicación a un chat o canal. Una pestaña que admite sidePanel y content cuenta con la misma dirección URL anclada, pero los casos de uso son bastante diferentes. Para empezar, las pestañas de chat y canal suelen tener más espacio horizontal con el que trabajar. Como procedimiento recomendado, permita a los usuarios buscar contenido para "anclar" a la pestaña. Por ejemplo, los profesores que usan una aplicación de nota pueden anclar notas que contengan recursos educativos para sus alumnos.

Aunque las pestañas de chat y canal se usan con más frecuencia para el consumo asincrónico, es posible que los usuarios tengan el mismo contenido al mismo tiempo. Cuando esto sucede, es útil mantener el contenido sincronizado para evitar conflictos de datos o duplicación del trabajo. Live Share le permite mostrar qué contenido está viendo cada usuario, qué está haciendo y mucho más. Esto puede proporcionar incentivos sociales que atraen a los usuarios al contenido de la aplicación, lo que aumenta la participación y la colaboración. Llamamos a esta "colaboración coincidente".

Considere la posibilidad de realizar las siguientes optimizaciones para la content pestaña de chat y canal:

• Muestra qué usuarios ven el contenido anclado a la pestaña, como los usuarios que ven activamente cada pizarra.
• Desenlaza a los usuarios para que se unan a una sesión de colaboración en curso, como mostrar una notificación del sistema para unirse a un standup en curso para una aplicación de tareas.
• Permitir que los usuarios sigan a un usuario o grupo de usuarios específico, como haciendo clic en el avatar de otro usuario conectado al que le gustaría seguir.

Vista previa de colaboración

Cuando los usuarios comparten el contenido de la aplicación con sus compañeros en Teams, se recomienda usar la vista previa de colaboración. En este escenario, los usuarios abren contenido compartido en una ventana emergente con chat en el lateral, lo que permite a los usuarios interactuar con el contenido mientras continúa el flujo de conversación. De forma similar a las pestañas de chat y canal, este contenido se consume principalmente de forma asincrónica. Sin embargo, si los usuarios comparten el contenido a través de una tarjeta adaptable, es más probable que los usuarios vean el contenido y chatee entre sí, lo que aumenta la necesidad de características de colaboración.

Considere la posibilidad de realizar las siguientes optimizaciones para las aplicaciones de stageview de colaboración:

• Muestra qué usuarios están viendo el contenido y lo que están haciendo, como mostrar el avatar de un usuario en la posición en la que se encuentran en un vídeo.
• Permitir que los usuarios sigan a un usuario o grupo de usuarios específico, como haciendo clic en el avatar de otro usuario conectado al que le gustaría seguir.
• Facilitar la comunicación ad hoc, como mediante la habilitación de herramientas de entrada manuscrita y punteros láser en el modo siguiente.

Integración de React

Live Share tiene una integración de React dedicada, lo que facilita aún más la integración de las características de Live Share en las aplicaciones de React. En lugar de usar LiveShareClient directamente, puede usar el LiveShareProvider componente para unirse a una sesión de Live Share cuando el componente se monta por primera vez. Cada LiveDataObject uno tiene un enlace React correspondiente, diseñado para que el uso de Live Share sea increíblemente fácil. Para obtener más información, consulte la página de GitHub Live Share for React.

Escenarios de usuario

Paso siguiente

Vea también

• Aplicaciones para reuniones de Teams
• Repositorio de GitHub
• Documentos de referencia del SDK de Live Share
• Documentos de referencia del SDK multimedia de Live Share
• Uso de Fluid con Teams
• API de aplicaciones de reunión