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, os seus utilizadores podem co-ver, cocriar e coeditar em conjunto no Microsoft Teams. Quer os seus utilizadores estejam a apresentar durante uma reunião ou a ver conteúdos partilhados numa conversa, o Live Share liga-os de forma segura a uma sessão partilhada com apenas algumas linhas de código.

Por vezes, a partilha de ecrã não é suficiente, razão pela qual a Microsoft criou ferramentas como o PowerPoint Live e o Whiteboard diretamente no Teams. Ao colocar a sua aplicação Web diretamente no centro do palco na interface da reunião, os seus utilizadores podem colaborar de forma totalmente integrada durante reuniões e chamadas.

A colaboração também não tem de parar após o fim das reuniões. As sessões live Share funcionam em contextos de chat e de canal, permitindo que os seus utilizadores vejam quem está a ver o conteúdo, sigam-se uns aos outros e muito mais.

Visão geral dos recursos

O Live Share tem três pacotes principais que suportam cenários de colaboração ilimitados. Estes pacotes expõem um conjunto de estruturas de dados distribuídas (DDS), incluindo blocos modulares primitivos e cenários chave-na-chave.

O Live Share integra facilmente reuniões com o 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.

Live Share core

O Live Share permite ligar a um Contentor de Fluidos 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 suporta um novo conjunto de classes DDS para simplificar a sincronização do estado da aplicação.

As funcionalidades suportadas pelo pacote principal do Live Share incluem:

• Participe numa sessão live share com LiveShareClient para reuniões, chats ou canais.
• Controle a presença e sincronize os metadados do utilizador com LivePresence.
• Coordene o estado da aplicação que desaparece quando os utilizadores saem da sessão com LiveState.
• Sincronizar um temporizador de contagem decrescente com LiveTimer.
• Envie eventos em tempo real para outros clientes na sessão com LiveEvent.
• Apresentar e seguir outros utilizadores com LiveFollowMode.
• Utilize qualquer funcionalidade do Fluid Framework, como SharedMap e SharedString.

Pode encontrar mais informações sobre este pacote na página de capacidades principais.

Multimédia de Partilha em Direto

Vídeo e áudio são partes fundamentais do local de trabalho e do mundo modernos. Os suportes de dados do Live Share permitem a sincronização de multimédia para qualquer leitor de multimédia com apenas algumas linhas de código. Ao sincronizar os suportes de dados na camada de controlos de estado e transporte do leitor, pode atribuir individualmente vistas, ao mesmo tempo que fornece a qualidade mais elevada possível disponível através da sua aplicação. Uma vez que a Microsoft não está a retransmissar os seus conteúdos multimédia, os seus requisitos de licenciamento e acesso mantêm-se intactos.

As funcionalidades suportadas pelo suporte de dados Live Share incluem:

• Sincronize o estado do leitor de multimédia e controle com MediaPlayerSynchronizer.
• Ajustes inteligentes ao volume de multimédia à medida que os utilizadores falam durante a reunião.
• Limite os utilizadores que podem modificar o estado do leitor.
• Suspenda e retome a sincronização de multimédia de imediato ou em pontos de espera agendados.

Pode encontrar mais informações sobre este pacote na página Multimédia do Live Share.

Tela Live Share

Ao colaborar em tempo real, é essencial que os utilizadores consigam apontar e realçar conteúdos no ecrã. A tela Live Share facilita a adição de tinta digital, ponteiros de laser e cursores à sua aplicação para uma colaboração totalmente integrada.

As funcionalidades suportadas pela tela Live Share incluem:

• Adicione uma colaboração <canvas> à sua aplicação com LiveCanvas.
• Transmita ideias com as ferramentas de caneta, marcador, linha e seta.
• Apresentar eficazmente com o ponteiro de laser.
• Acompanhe os cursores do rato em tempo real.
• Configurar definições para dispositivos variáveis e ver estados.
• Utilize entradas de rato, toque e estilete totalmente suportadas.

Pode encontrar mais informações sobre este pacote na página de tela Live Share.

Porquê criar aplicações 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.
• Utilização de tinta digital, ponteiros de 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 compreender se o Live Share é adequado para o seu cenário de colaboração, é útil compreender as diferenças entre o Live Share e outras arquiteturas de colaboração, incluindo:

• Sockets Web
• Reencaminhamento de Fluidos do Azure
• Live Share

Sockets Web

Os sockets Web são uma tecnologia ubíqua para comunicação em tempo real na Web e algumas aplicações podem preferir utilizar o seu próprio back-end web-socket personalizado. Ao contrário das APIs REST, os sockets Web mantêm uma ligação aberta entre um servidor e os clientes numa sessão.

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

Ao utilizar o Live Share, obtém toda a energia dos sockets Web sem qualquer sobrecarga.

Reencaminhamento de Fluidos do Azure

O Azure Fluid Relay é uma oferta gerida para o Fluid Framework que ajuda os programadores a criar experiências de colaboração em tempo real e a replicar o estado em clientes JavaScript ligados. O Microsoft Whiteboard, o Loop e o OneNote são hoje exemplos de aplicações criadas com o Fluid Framework.

Tal como outros serviços do Azure, o Azure Fluid Relay foi concebido para se adaptar às necessidades individuais do projeto com uma complexidade mínima. Os requisitos incluem desenvolver uma história de autenticação para os seus contentores fluidos e conformidade regional. Depois de configurados, os programadores podem concentrar-se em proporcionar experiências de colaboração de alta qualidade.

Serviço alojado do Live Share

O Live Share fornece um serviço de Reencaminhamento de Fluidos do Azure com a segurança do Microsoft Teams. Todas as sessões cumprem os requisitos de residência dos dados do inquilino, os regulamentos globais e os compromissos de segurança. Em apenas algumas linhas de código, pode ligar-se a contentores live share acessíveis apenas a membros de uma reunião, chat ou 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

Utilizar um serviço de Reencaminhamento de Fluidos do Azure personalizado

Apesar de a maioria de si achar preferível utilizar o nosso serviço alojado gratuito, ainda existem situações em que é vantajoso utilizar o seu próprio serviço Azure Fluid Relay para a sua aplicação Live Share.

Considere utilizar um serviço personalizado se:

• Exigir armazenamento a longo prazo de dados em contentores de Fluidos.
• Transmita dados confidenciais através do serviço que requer uma política de segurança personalizada.
• Desenvolva funcionalidades através do Fluid Framework, por exemplo, SharedMappara a sua aplicação fora do Teams.

Para obter mais informações, veja o guia de procedimentos personalizado do serviço Azure Fluid Relay.

Live Share collaborative contexts (Contextos de colaboração do Live Share)

As sessões live Share permitem uma colaboração totalmente integrada em reuniões, conversas e canais. Quando se liga a uma sessão através da API, o joinContainer() Teams liga o utilizador ao contentor fluido adequado. Embora não precise de escrever código específico do contexto, deve compreender as diferenças nos cenários de utilizador para cada superfície de tabulação.

A API do SDK JavaScript do getContext() Teams indica-lhe em que FrameContexts a aplicação está a ser executada. Pode utilizá-lo para ativar condicionalmente diferentes funcionalidades e padrões de UX na sua aplicação para cada contexto. O Live Share suporta os seguintes FrameContexts contextos:

• meetingStage
• sidePanel
• content

O exemplo seguinte mostra como pode adicionar funcionalidades específicas do contexto à sua aplicação:

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

Como mencionámos anteriormente, existem dois contextos de reunião: meetingStage e sidePanel. Na secção seguinte, explore como otimizar estes contextos para melhorar a experiência do utilizador.

Estágio da reunião

O meetingStage contexto permite que os utilizadores partilhem os conteúdos da sua aplicação na fase da reunião para os participantes na reunião. Neste contexto, os utilizadores normalmente esperam colaborar em tempo real. Ao contrário do que acontece quando carrega uma aplicação colaborativa como o Microsoft Loop ou o Word num browser, os apresentadores normalmente esperam ter mais controlo sobre a experiência. Por exemplo, no PowerPoint Live, os apresentadores esperam ter controlo sobre o diapositivo do PowerPoint que está visível para os participantes por predefinição, mesmo que os participantes possam optar por deixar de os seguir temporariamente.

Considere fazer as seguintes otimizações para a sua meetingStage aplicação:

• Coloque o controlo ativo do apresentador da aplicação, como controlar a posição da câmara para todos os utilizadores que veem um modelo 3D.
• Permitir que os utilizadores elegíveis assumam o controlo da aplicação, como assumir o controlo da reprodução de multimédia enquanto co-visualizam um vídeo.
• Permita que os utilizadores deixem de seguir temporariamente o apresentador, como mostrar um botão "Sincronizar com o apresentador" quando um participante clica numa imagem diferente numa apresentação de diapositivos.
• Forneça definições que dão ao apresentador o controlo, como desativar a capacidade de outros utilizadores deixarem de as seguir.

Painel lateral da reunião

O contexto de reunião sidePanel permite que os utilizadores afixem a sua aplicação como um separador numa reunião, juntamente com os separadores predefinidos, como o chat. Embora qualquer participante da reunião possa ter a opção de abrir um sidePanel separador, cada utilizador tem de a abrir individualmente. Isto torna-o ideal para cenários assíncronos durante uma reunião, como procurar conteúdos para partilhar na fase da reunião. Embora os seus utilizadores não queiram co-ver, cocriar ou coeditar conteúdos avançados a partir desta superfície, o Live Share ainda pode melhorar a sua sidePanel aplicação.

Considere fazer as seguintes otimizações para a sua sidePanel aplicação:

• Experiências complementares na fase da reunião, como listas de reprodução de vídeo ou áudio colaborativas.
• Definições de configuração antes de partilhar conteúdo na fase da reunião, como desativar a funcionalidade "assumir controlo".
• Otimizações de desempenho, como a difusão de novos conteúdos uma vez enquanto a partilha já começou, em vez de recarregar a aplicação.

Contextos de conteúdo

O content contexto foi concebido para o consumo assíncrono dos conteúdos da sua aplicação. Existem algumas superfícies diferentes para content contextos no chat e canais, incluindo:

• Separadores de chat e canal
• Vista de fase de colaboração

Separadores de chat e canal

Os separadores de chat e canal permitem que os utilizadores afixem a sua aplicação a um chat ou canal. Um separador que suporta e sidePanelcontent apresenta o mesmo URL afixado, mas os casos de utilização são bastante diferentes. Para começar, os separadores de chat e de canal geralmente têm mais espaço horizontal para trabalhar. Como melhor prática, permita que os utilizadores procurem conteúdo para "afixar" no separador. Por exemplo, os professores que utilizam uma aplicação de notas podem afixar notas com recursos educativos para os estudantes.

Embora os separadores de chat e de canal sejam mais frequentemente utilizados para consumo assíncrono, é possível que os seus utilizadores tenham o mesmo conteúdo ao mesmo tempo. Quando isto acontece, é útil manter o conteúdo sincronizado para evitar conflitos de dados ou duplicação de trabalho. O Live Share permite-lhe mostrar o conteúdo que cada utilizador está a ver, o que está a fazer e muito mais. Isto pode fornecer incentivos sociais que atraem os utilizadores para o conteúdo da aplicação, aumentando o envolvimento e a colaboração. Chamamos a isto "colaboração coincidente".

Considere fazer as seguintes otimizações para o seu content chat e separador de canal:

• Mostrar que utilizadores estão a ver conteúdo afixado ao separador, como utilizadores que veem ativamente cada quadro.
• Encaminhe os utilizadores para participarem numa sessão de colaboração em curso, como apresentar um alerta para aderirem a um stand-up contínuo para uma aplicação de tarefas.
• Permitir que os utilizadores sigam um utilizador ou grupo de utilizadores específico, como, por exemplo, ao clicar no avatar de outro utilizador ligado que gostariam de seguir.

Descrição de fase de colaboração

Quando os utilizadores partilharem os conteúdos da sua aplicação com os seus colegas no Teams, recomendamos que utilizem a visão de palco colaborativa. Neste cenário, os utilizadores abrem conteúdo que foi partilhado numa janela de pop-out com o chat lateral, permitindo que os utilizadores interajam com os seus conteúdos enquanto prosseguem o fluxo de conversação. Semelhante aos separadores de chat e de canal, este conteúdo é consumido principalmente de forma assíncrona. No entanto, se os utilizadores partilharem os conteúdos através de um Cartão Ajustável, é mais provável que os utilizadores vejam os conteúdos e conversem entre si, aumentando a necessidade de funcionalidades de colaboração.

Considere fazer as seguintes otimizações para as suas aplicações de stageview colaborativas:

• Mostrar que utilizadores estão a ver o conteúdo e o que estão a fazer, como apresentar o avatar de um utilizador na posição em que se encontram num vídeo.
• Permitir que os utilizadores sigam um utilizador ou grupo de utilizadores específico, como, por exemplo, ao clicar no avatar de outro utilizador ligado que gostariam de seguir.
• Facilite a comunicação ad hoc, como ativar ferramentas de tinta digital e ponteiros de laser no modo de seguimento.

Integração do React

O Live Share tem uma integração dedicada do React, o que torna as funcionalidades do Live Share ainda mais fáceis de integrar nas aplicações do React. Em vez de utilizar LiveShareClient diretamente, pode utilizar o LiveShareProvider componente para participar numa sessão live share quando o componente é montado pela primeira vez. Cada LiveDataObject um tem um hook do React correspondente, concebido para tornar a utilização do Live Share incrivelmente fácil. Para obter mais informações, veja Live Share for React GitHub page (Live Share for React GitHub page).

Cenários de usuário

Próxima etapa

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
• Utilizar o Fluid com o Teams
• APIs de aplicações de reunião