SDK do Live Share

O Live Share é um SDK projetado para transformar aplicativos do Teams em experiências colaborativas de vários usuários sem escrever nenhum código de back-end dedicado. Com o Live Share, seus usuários podem co-watch, cocriar e co-editar juntos no Microsoft Teams. Se os usuários estão apresentando durante uma reunião ou exibindo conteúdo compartilhado em um chat, o Live Share os conecta com segurança a uma sessão compartilhada com apenas algumas linhas de código.

Às vezes, o compartilhamento de tela simplesmente não é suficiente, e é por isso que a Microsoft criou ferramentas como PowerPoint Live e Whiteboard diretamente no Teams. Ao trazer seu aplicativo Web diretamente para o estágio central na interface da reunião, seus usuários podem colaborar perfeitamente durante reuniões e chamadas.

A colaboração também não precisa parar após o término das reuniões. As sessões do Live Share funcionam em contextos de chat e canal, permitindo que seus usuários vejam quem está exibindo o conteúdo, sigam uns aos outros e muito mais.

Introdução

Visão geral dos recursos

O Live Share tem três pacotes primários que dão suporte a cenários colaborativos ilimitados. Esses pacotes expõem um conjunto de DDS (estruturas de dados distribuídas), incluindo blocos de construção primitivos e cenários de chave de turno.

O Live Share integra perfeitamente as reuniões ao Fluid Framework. Fluid Framework é uma coleção de bibliotecas de cliente para distribuir e sincronizar o estado compartilhado. Live Share fornece uma versão gratuita, totalmente gerenciada e pronta para usar o Azure Fluid Relay suportado pela segurança e escala global do Teams.

Núcleo do Live Share

O Live Share permite conectar-se a um contêiner fluido especial associado a cada reunião, chat ou canal em algumas linhas de código. Além das estruturas de dados fornecidas pelo Fluid Framework, o Live Share também dá suporte a um novo conjunto de classes DDS para simplificar a sincronização do estado do aplicativo.

Os recursos compatíveis com o pacote principal do Live Share incluem:

• Participe de uma sessão do Live Share com LiveShareClient para reuniões, chats ou canais.
• Acompanhe a presença e sincronize metadados do usuário com LivePresence.
• Coordenar o estado do aplicativo que desaparece quando os usuários saem da sessão com LiveState.
• Sincronizar um temporizador de contagem regressiva com LiveTimer.
• Enviar eventos em tempo real para outros clientes na sessão com LiveEvent.
• Apresentar e seguir outros usuários com LiveFollowMode.
• Aproveite qualquer recurso do Fluid Framework, como SharedMap e SharedString.

Você pode encontrar mais informações sobre esse pacote na página de recursos principais.

Mídia de compartilhamento ao vivo

Vídeo e áudio são partes fundamentais do local de trabalho e do mundo modernos. A mídia Live Share permite a sincronização de mídia para qualquer player de mídia com apenas algumas linhas de código. Ao sincronizar a mídia na camada de controles de transporte e estado do jogador, você pode atribuir exibições individualmente, fornecendo a mais alta qualidade possível disponível por meio do aplicativo. Como a Microsoft não está retransmitindo seu conteúdo de mídia, seus requisitos de licenciamento e acesso são mantidos intactos.

Os recursos compatíveis com a mídia live share incluem:

• Sincronizar o estado do player de mídia e acompanhar com MediaPlayerSynchronizer.
• Ajustes inteligentes no volume de mídia à medida que os usuários conversam durante a reunião.
• Limite quais usuários podem modificar o estado do jogador.
• Suspender e retomar a sincronização de mídia em tempo real ou em pontos de espera agendados.

Você pode encontrar mais informações sobre esse pacote na página de mídia do Live Share.

Observação

O Live Share não retransmissão de conteúdo de mídia. Ele foi projetado para uso com jogadores web inseridos, como HTML5 <video> ou Azure Media Player.

Tela live share

Ao colaborar em tempo real, é essencial que os usuários possam apontar e enfatizar o conteúdo na tela. A tela Live Share facilita a adição de ponteiros, ponteiros laser e cursores ao seu aplicativo para colaboração contínua.

Os recursos compatíveis com a tela do Live Share incluem:

• Adicione um colaborativo <canvas> ao seu aplicativo com LiveCanvas.
• Transmita ideias usando as ferramentas caneta, marcador, linha e seta.
• Apresente efetivamente usando o ponteiro laser.
• Siga com cursores de mouse em tempo real.
• Configurar configurações para dispositivos variáveis e exibir estados.
• Use entradas de mouse, toque e caneta totalmente compatíveis.

Você pode encontrar mais informações sobre esse pacote na página de tela do Live Share.

Por que criar aplicativos com o Live Share?

Criar aplicativos colaborativos pode ser difícil, demorado, caro e inclui requisitos complexos de conformidade em escala. Os usuários do Teams passam um tempo significativo revisando o trabalho com colegas de equipe, assistindo vídeos juntos e debatendo novas ideias através do compartilhamento de telas. O SDK do Live Share permite transformar seu aplicativo em algo mais colaborativo com o mínimo de investimento.

Aqui estão alguns dos principais benefícios do SDK do Live Share:

• Gerenciamento e segurança de sessão sem complicações.
• Estruturas de dados distribuídos com e sem estado.
• Extensões de mídia para sincronizar facilmente vídeo e áudio.
• Incrustação de chave de turno, ponteiros laser e cursores.
• Respeitar os privilégios de reunião usando a verificação de função.
• Serviço gratuito e totalmente gerenciado com baixa latência.

Para entender se o Live Share é adequado para seu cenário colaborativo, é útil entender as diferenças entre o Live Share e outras estruturas colaborativas, incluindo:

• Soquetes da Web
• Retransmissão de Fluido do Azure
• Live Share

Soquetes da Web

Os soquetes da Web são uma tecnologia onipresente para comunicação em tempo real na Web, e alguns aplicativos podem preferir usar seu próprio back-end de soquete web personalizado. Ao contrário das APIs REST, os soquetes Web mantêm uma conexão aberta entre um servidor e clientes em uma sessão.

Como outros serviços de API personalizados, os requisitos normalmente incluem sessões de autenticação, mapeamento regional, manutenção e escala. Muitos cenários colaborativos também exigem a manutenção do estado da sessão no servidor, o que requer infraestrutura de armazenamento, resoluções de conflitos e muito mais.

Usando o Live Share, você obtém todo o poder dos soquetes da Web sem nenhuma sobrecarga.

Retransmissão de Fluido do Azure

O Azure Fluid Relay é uma oferta gerenciada para o Fluid Framework que ajuda os desenvolvedores a criar experiências colaborativas em tempo real e replicar o estado entre clientes JavaScript conectados. Microsoft Whiteboard, Loop e OneNote são todos exemplos de aplicativos criados com o Fluid Framework hoje.

Assim como outros serviços do Azure, o Azure Fluid Relay foi projetado para adaptar suas necessidades individuais de projeto com complexidade mínima. Os requisitos incluem o desenvolvimento de uma história de autenticação para seus contêineres Fluid e conformidade regional. Depois de configurados, os desenvolvedores podem se concentrar em fornecer experiências colaborativas de alta qualidade.

Serviço hospedado do Live Share

O Live Share fornece um serviço de retransmissão de fluidos do Azure com suporte na segurança do Microsoft Teams. Todas as sessões seguem requisitos de residência de dados de locatário, regulamentos globais e compromissos de segurança. Em apenas algumas linhas de código, você pode se conectar a contêineres do Live Share que são acessíveis apenas aos membros de uma reunião, chat ou canal.

JavaScript

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

TypeScript

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

Todos os dados enviados ou armazenados por meio do serviço de Retransmissão de Fluidos do Azure hospedado do SDK do Live Share estão acessíveis até 24 horas. Para obter mais informações, consulte as perguntas frequentes do Live Share.

Usando um serviço personalizado de Retransmissão de Fluidos do Azure

Embora a maioria de vocês ache preferível usar nosso serviço hospedado gratuito, ainda há situações em que é benéfico usar seu próprio serviço de Retransmissão de Fluidos do Azure para seu aplicativo Live Share.

Considere usar um serviço personalizado se você:

• Exigir armazenamento de dados a longo prazo em contêineres fluidos.
• Transmita dados confidenciais por meio do serviço que requer uma política de segurança personalizada.
• Desenvolva recursos por meio do Fluid Framework, por exemplo, SharedMap, para seu aplicativo fora do Teams.

Para obter mais informações, consulte o guia de instruções do serviço de retransmissão de Fluidos do Azure personalizado.

Contextos colaborativos do Live Share

As sessões do Live Share permitem a colaboração contínua em reuniões, chats e canais. Quando você se conecta a uma sessão por meio da API, o joinContainer() Teams conecta seu usuário ao contêiner fluido apropriado. Embora você não precise escrever nenhum código específico do contexto, você deve entender as diferenças nos cenários de usuário para cada superfície de guia.

Observação

As sessões do Live Share usadas em contextos diferentes devem se conectar ao mesmo contêiner Fluid. Se você quiser sincronizar dados de forma diferente em diferentes contextos, poderá criar diferentes objetos de dados distribuídos (DDS) para cada contexto e escutar apenas as alterações para aqueles relevantes para o seu cenário.

A API do SDK do getContext() Teams JavaScript informa em qual FrameContexts aplicativo está em execução. Você pode usá-lo para habilitar condicionalmente diferentes recursos e padrões de UX em seu aplicativo para cada contexto. O Live Share dá suporte aos seguintes FrameContexts contextos:

• meetingStage
• sidePanel
• content

O exemplo a seguir mostra como você pode adicionar funcionalidade específica do contexto ao seu aplicativo:

JavaScript

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

TypeScript

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ão

Como mencionamos anteriormente, há dois contextos de reunião: meetingStage e sidePanel. Na seção a seguir, exploraremos como otimizar esses contextos para aprimorar a experiência do usuário.

Estágio da reunião

O meetingStage contexto permite que os usuários compartilhem o conteúdo do aplicativo no estágio de reunião para os participantes da reunião. Nesse contexto, os usuários normalmente esperam colaborar em tempo real. Ao contrário de carregar um aplicativo colaborativo como Microsoft Loop ou Word em um navegador da Web, os apresentadores geralmente esperam ter mais controle da experiência. Por exemplo, em PowerPoint Live, os apresentadores esperam ter controle sobre qual slide do PowerPoint é visível para os participantes por padrão, mesmo que os participantes possam optar por parar de segui-los temporariamente.

Considere fazer as seguintes otimizações para seu meetingStage aplicativo:

• Coloque o controle de apresentador ativo do aplicativo, como controlando a posição da câmera para todos os usuários que exibem um modelo 3D.
• Permitir que usuários qualificados assumam o controle do aplicativo, como assumir o controle da reprodução de mídia enquanto assistem a um vídeo.
• Permitir que os usuários parem temporariamente de seguir o apresentador, como mostrar um botão "Sincronizar com o apresentador" quando um participante clica em uma imagem diferente em uma apresentação de slides.
• Forneça configurações que dão ao apresentador controle, como desabilitar a capacidade de outros usuários pararem de segui-los.

Painel lateral da reunião

O contexto da reunião sidePanel permite que os usuários fixem seu aplicativo como uma guia em uma reunião, juntamente com guias padrão, como chat. Embora qualquer participante da reunião possa ter a opção de abrir uma sidePanel guia, cada usuário deve abri-la individualmente. Isso o torna ideal para cenários assíncronos durante uma reunião, como a busca de conteúdo para compartilhar no estágio de reunião. Embora seus usuários não queiram co-watch, cocriar ou co-editar conteúdo avançado dessa superfície, o Live Share ainda pode melhorar seu sidePanel aplicativo.

Considere fazer as seguintes otimizações para seu sidePanel aplicativo:

• Experiências complementares ao estágio de reunião, como playlists colaborativas de vídeo ou áudio.
• Configurações anteriores ao compartilhamento de conteúdo para o estágio de reunião, como desabilitar o recurso "assumir o controle".
• Otimizações de desempenho, como transmitir novos conteúdos uma vez enquanto o compartilhamento já foi iniciado, em vez de recarregar o aplicativo.

Contextos de conteúdo

O content contexto foi projetado para consumo assíncrono do conteúdo do seu aplicativo. Há algumas superfícies diferentes para content contextos em chat e canais, incluindo:

• Guias de chat e canal
• Exibição de estágio colaborativa

Observação

O content contexto também é usado para aplicativos pessoais, que o Live Share não dá suporte. O Live Share só dá suporte a contextos content em clientes web e área de trabalho do Teams.

Guias de chat e canal

As guias de chat e canal permitem que os usuários fixem seu aplicativo em um chat ou canal. Uma guia que dá suporte a ambos sidePanel e content contará com a mesma URL fixada, mas os casos de uso geralmente são bastante diferentes. Para começar, as guias de chat e canal geralmente têm mais espaço horizontal para trabalhar. Como prática recomendada, permita que os usuários pesquisem conteúdo para "fixar" na guia. Por exemplo, professores que usam um aplicativo de notas podem fixar notas contendo recursos educacionais para seus alunos.

Embora as guias de chat e canal sejam mais comumente usadas para consumo assíncrono, é possível que seus usuários tenham o mesmo conteúdo ao mesmo tempo. Quando isso acontece, é útil manter o conteúdo em sincronização para evitar conflitos de dados ou duplicação de trabalho. O Live Share permite mostrar qual conteúdo cada usuário está exibindo, o que está fazendo e muito mais. Isso pode fornecer incentivos sociais que atraem os usuários para o conteúdo do aplicativo, aumentando o envolvimento e a colaboração. Chamamos isso de "colaboração coincidente".

Considere fazer as seguintes otimizações para sua content guia de chat e canal:

• Mostrar quais usuários estão exibindo atualmente o conteúdo fixado na guia, como usuários exibindo ativamente cada quadro de caracteres.
• Empurre os usuários para ingressar em uma sessão de colaboração contínua, como exibir um brinde para ingressar em um standup contínuo para um aplicativo de tarefas.
• Permitir que os usuários sigam um usuário ou grupo específico de usuários, como clicando no avatar de outro usuário conectado que gostariam de seguir.

Visão de estágio colaborativa

Quando os usuários compartilham o conteúdo do seu aplicativo com seus colegas no Teams, recomendamos usar a visão de estágio colaborativa. Nesse cenário, os usuários abrem conteúdo compartilhado em uma janela popout com chat ao lado, permitindo que os usuários se envolvam com seu conteúdo enquanto continuam o fluxo de conversa. Semelhante às guias de chat e canal, esse conteúdo é consumido principalmente de forma assíncrona. No entanto, se os usuários compartilharem o conteúdo por meio de um Cartão Adaptável, os usuários serão mais propensos a exibir o conteúdo e conversar uns com os outros, aumentando a necessidade de recursos colaborativos.

Considere fazer as seguintes otimizações para seus aplicativos de visão de fase colaborativa:

• Mostrar quais usuários estão exibindo o conteúdo no momento e o que estão fazendo, como exibir o avatar de um usuário na posição em que estão em um vídeo.
• Permitir que os usuários sigam um usuário ou grupo específico de usuários, como clicando no avatar de outro usuário conectado que gostariam de seguir.
• Facilite a comunicação ad-hoc, como habilitando ferramentas de incrustação e ponteiros laser no modo a seguir.

integração React

O Live Share tem uma integração de React dedicada, tornando os recursos do Live Share ainda mais fáceis de integrar em aplicativos React. Em vez de usar LiveShareClient diretamente, você pode usar o LiveShareProvider componente para ingressar em uma sessão do Live Share quando o componente for montado pela primeira vez. Cada LiveDataObject um tem um gancho de React correspondente, projetado para tornar o uso do Live Share incrivelmente fácil. Para obter mais informações, consulte Live Share para React página do GitHub para obter mais informações.

Cenários de usuário

Cenário	Exemplo
Durante uma revisão de marketing, um usuário deseja coletar comentários sobre sua edição de vídeo mais recente.	O usuário compartilha o vídeo para o estágio de reunião e inicia o vídeo. Conforme necessário, o usuário pausa o vídeo para discutir a cena e os participantes desenham partes da tela para enfatizar pontos-chave.
Um gerente de projeto joga Agile Poker com sua equipe durante o planejamento.	O gerente compartilha um aplicativo Agile Poker para a fase de reunião que permite jogar o jogo de planejamento até que a equipe tenha consenso.
Um consultor financeiro examina documentos PDF com clientes antes de assinar.	O consultor financeiro compartilha o contrato PDF para a fase de reunião. Todos os participantes podem ver os cursores uns dos outros e o texto realçado no PDF, após o qual ambas as partes assinam o contrato.
Os engenheiros exibem um modelo 3D juntos.	Uma equipe de engenharia exibe um modelo 3D compartilhado no chat. Eles podem ver as posições da câmera um do outro, editar o modelo e seguir uns aos outros.

Importante

O Live Share é licenciado sob a Licença de SDK do Microsoft Live Share. Para usar esses recursos em seu aplicativo, primeiro você deve ler e concordar com esses termos.

Próxima etapa

Introdução

Confira também

• Aplicativos para reuniões do Teams
• Repositório do GitHub
• Documentos de referência do SDK do Live Share
• Documentos de referência do SDK de Mídia do Live Share
• Usar Fluido com o Teams
• APIs de aplicativos de reunião