Visão geral da tela do Live Share
Em salas de conferência e salas de aula em todo o mundo, os quadros de brancos são uma parte fundamental da colaboração. Nos tempos modernos, no entanto, o quadro de brancos não é mais suficiente. Com inúmeras ferramentas digitais como o PowerPoint sendo o ponto focal da colaboração na era moderna, é essencial habilitar o mesmo potencial criativo.
Para habilitar uma colaboração mais perfeita, a Microsoft criou PowerPoint Live, que se tornou fundamental para a forma como as pessoas trabalham no Microsoft Teams. Os apresentadores podem anotar em slides para que todos vejam, usando canetas, marcadores e ponteiros laser para chamar a atenção para os principais conceitos. Usando a tela Do Live Share, seu aplicativo pode trazer o poder de PowerPoint Live ferramentas de incrustação com o mínimo de esforço.
Instalar
A tela Live Share é um pacote JavaScript publicado no npm e você pode baixar por meio de npm ou yarn. Você também deve instalar suas dependências par, que incluem @microsoft/live-share, fluid-frameworke @fluidframework/azure-client. Se você estiver usando o Live Share em seu aplicativo de guia, também deverá instalar @microsoft/teams-js a versão 2.11.0 ou posterior.
npm install @microsoft/live-share @microsoft/live-share-canvas fluid-framework @fluidframework/azure-client --save
npm install @microsoft/teams-js --save
OU
Para adicionar a versão mais recente do SDK ao seu aplicativo usando Yarn:
yarn add @microsoft/live-share @microsoft/live-share-canvas fluid-framework @fluidframework/azure-client
yarn add @microsoft/teams-js
Configurando o pacote
A tela Live Share tem duas classes primárias que permitem a colaboração de chave de turno: InkingManager e LiveCanvas. InkingManager é responsável por anexar um elemento totalmente em <canvas> destaque ao seu aplicativo, enquanto LiveCanvas gerencia a sincronização remota com outros participantes da reunião. Usado em conjunto, seu aplicativo pode ter uma funcionalidade completa em forma de quadro em apenas algumas linhas de código.
| Aulas | Descrição |
|---|---|
| InkingManager | Classe que anexa um <canvas> elemento a um determinado <div> para gerenciar automaticamente traços de caneta ou marcador, ponteiro laser, linhas e setas e apagadores. Expõe um conjunto de APIs (para controlar qual ferramenta está ativa) e configurações básicas. |
| LiveCanvas | Uma SharedObject classe que sincroniza traços e posições de cursor de InkingManager para todos em uma sessão do Live Share. |
Exemplo:
<body>
<div id="canvas-host"></div>
</body>
import { LiveShareClient } from "@microsoft/live-share";
import { InkingManager, LiveCanvas } from "@microsoft/live-share-canvas";
import { LiveShareHost } from "@microsoft/teams-js";
// Setup the Fluid container
const host = LiveShareHost.create(host);
const liveShare = new LiveShareClient(host);
const schema = {
initialObjects: { liveCanvas: LiveCanvas },
};
const { container } = await liveShare.joinContainer(schema);
const { liveCanvas } = container.initialObjects;
// Get the canvas host element
const canvasHostElement = document.getElementById("canvas-host");
const inkingManager = new InkingManager(canvasHostElement);
// Begin synchronization for LiveCanvas
await liveCanvas.initialize(inkingManager);
inkingManager.activate();
Ferramentas de tela e cursores
Agora que a tela do Live Share está configurada e sincronizada, você pode configurar a tela para interação do usuário, como botões para selecionar uma ferramenta de caneta. Nesta seção, discutiremos quais ferramentas estão disponíveis e como usá-las.
Ferramentas de incrustação
Cada ferramenta de incrustação na tela do Live Share renderiza traços à medida que os usuários desenham. Se usar uma tela sensível ao toque ou caneta, as ferramentas também dão suporte à dinâmica de pressão, afetando a largura do traço. As configurações incluem cor do pincel, espessura, forma e uma seta final opcional.
Ferramenta de caneta
A ferramenta de caneta desenha traços sólidos que são armazenados na tela. A forma de dica padrão é um círculo.
<div>
<button id="pen">Enable Pen</button>
<label for="pen-color">Select a color:</label>
<input type="color" id="color" name="color" value="#000000" />
<button id="pen-tip-size">Increase pen size</button>
</div>
import {
InkingManager,
InkingTool,
fromCssColor,
} from "@microsoft/live-share-canvas";
// ...
// Change the selected tool to pen
document.getElementById("pen").onclick = () => {
inkingManager.tool = InkingTool.pen;
};
// Change the selected color for pen
document.getElementById("pen-color").onchange = () => {
const colorPicker = document.getElementById("color");
inkingManager.penBrush.color = fromCssColor(colorPicker.value);
};
// Increase the tip size for pen
document.getElementById("pen-tip-size").onclick = () => {
inkingManager.penBrush.tipSize = inkingManager.penBrush.tipSize + 1;
};
Ferramenta realçador
A ferramenta de realce desenha traços translúcidos armazenados na tela. A forma de dica padrão é um quadrado.
<div>
<button id="highlighter">Enable Highlighter</button><br />
<label for="highlighter-color">Select a color:</label>
<input type="color" id="highlighter-color" name="highlighter-color" value="#FFFC00" />
<button id="highlighter-tip-size">Increase tip size</button>
</div>
import {
InkingManager,
InkingTool,
fromCssColor,
} from "@microsoft/live-share-canvas";
// ...
// Change the selected tool to highlighter
document.getElementById("highlighter").onclick = () => {
inkingManager.tool = InkingTool.highlighter;
};
// Change the selected color for highlighter
document.getElementById("highlighter-color").onchange = () => {
const colorPicker = document.getElementById("highlighter-color");
inkingManager.highlighterBrush.color = fromCssColor(colorPicker.value);
};
// Increase the tip size for highlighter
document.getElementById("highlighter-tip-size").onclick = () => {
inkingManager.highlighterBrush.tipSize = inkingManager.penBrush.tipSize + 1;
};
Ferramenta borracha
A ferramenta borracha apaga traços inteiros que cruzam seu caminho.
<div>
<button id="eraser">Enable Eraser</button><br />
<button id="eraser-size">Increase eraser size</button>
</div>
import {
InkingManager,
InkingTool,
} from "@microsoft/live-share-canvas";
// ...
// Change the selected tool to eraser
document.getElementById("eraser").onclick = () => {
inkingManager.tool = InkingTool.eraser;
};
// Increase the tip size for eraser
document.getElementById("eraser-size").onclick = () => {
inkingManager.eraserSize = inkingManager.eraserSize + 1;
};
Ferramenta de borracha de ponto
A ferramenta borracha de ponto apaga pontos individuais dentro de traços que cruzam seu caminho dividindo traços existentes pela metade. Essa ferramenta é computacionalmente cara e pode resultar em taxas de quadro mais lentas para seus usuários.
Observação
A borracha de ponto compartilha o mesmo tamanho de ponto de borracha que a ferramenta de borracha regular.
<div>
<button id="point-eraser">Enable Point Eraser</button><br />
</div>
import {
InkingManager,
InkingTool,
} from "@microsoft/live-share-canvas";
// ...
// Change the selected tool to eraser
document.getElementById("point-eraser").onclick = () => {
inkingManager.tool = InkingTool.pointEraser;
};
Ponteiro laser
O ponteiro laser é exclusivo, pois a ponta do laser tem um efeito à medida que você move o mouse. Quando você desenha traços, o efeito à direita renderiza por um curto período antes que ele desapareça completamente. Essa ferramenta é perfeita para apontar informações na tela durante uma reunião, pois o apresentador não precisa alternar entre ferramentas para apagar traços.
<div>
<button id="laser">Enable Laser Pointer</button><br />
<label for="laser-color">Select a color:</label>
<input type="color" id="laser-color" name="laser-color" value="#000000" />
<button id="laser-tip-size">Increase tip size</button>
</div>
import {
InkingManager,
InkingTool,
fromCssColor,
} from "@microsoft/live-share-canvas";
// ...
// Change the selected tool to laser pointer
document.getElementById("laser").onclick = () => {
inkingManager.tool = InkingTool.laserPointer;
};
// Change the selected color for laser pointer
document.getElementById("laser-color").onchange = () => {
const colorPicker = document.getElementById("laser-color");
inkingManager.laserPointerBrush.color = fromCssColor(colorPicker.value);
};
// Increase the tip size for laser pointer
document.getElementById("laser-tip-size").onclick = () => {
inkingManager.laserPointerBrush.tipSize = inkingManager.laserPointerBrush.tipSize + 1;
};
Ferramentas de linha e seta
A ferramenta de linha permite que os usuários desenhe linhas retas de um ponto para outro, com uma seta opcional que pode ser aplicada ao final.
<div>
<button id="line">Enable Line</button><br />
<button id="line-arrow">Enable Arrow</button><br />
<input type="color" id="line-color" name="line-color" value="#000000" />
<button id="line-tip-size">Increase tip size</button>
</div>
import {
InkingManager,
InkingTool,
fromCssColor,
} from "@microsoft/live-share-canvas";
// ...
// Change the selected tool to line
document.getElementById("line").onclick = () => {
inkingManager.tool = InkingTool.line;
inkingManager.lineBrush.endArrow = "none";
};
// Change the selected tool to line
document.getElementById("line-arrow").onclick = () => {
inkingManager.tool = InkingTool.line;
inkingManager.lineBrush.endArrow = "open";
};
// Change the selected color for lineBrush
document.getElementById("line-color").onclick = () => {
const colorPicker = document.getElementById("line-color");
inkingManager.lineBrush.color = fromCssColor(colorPicker.value);
};
// Increase the tip size for lineBrush
document.getElementById("line-tip-size").onclick = () => {
inkingManager.lineBrush.tipSize = inkingManager.lineBrush.tipSize + 1;
};
Limpar todos os traços
Você pode limpar todos os traços na tela chamando inkingManager.clear(). Isso exclui todos os traços da tela.
Importar e exportar traços brutos
O Live Share Canvas dá suporte à importação e exportação de traços brutos de InkingManager, o que permite exportá-los para seu back-end para uso posterior em uma sessão futura.
// Export raw strokes
const strokes = inkingManager.exportRaw();
// Optionally clear out existing strokes, and import strokes
inkingManager.clear();
inkingManager.importRaw(strokes);
Exportar traços como um SVG
Você pode exportar todo o desenho dentro do InkingManager para um SVG (gráfico de vetor escalonável). O conteúdo SVG é retornado como uma cadeia de caracteres, que você pode armazenar no servidor como uma extensão de arquivo .svg.
// Export raw strokes
const svgText = inkingManager.exportSVG();
Cursores
Você pode habilitar cursores ao vivo em seu aplicativo para que os usuários acompanhem as posições do cursor uns dos outros na tela. Ao contrário das ferramentas de incrustação, os cursores operam inteiramente por meio da LiveCanvas classe. Opcionalmente, você pode fornecer um nome e uma imagem para identificar cada usuário. Você pode habilitar cursores separadamente ou com as ferramentas de incrustação.
// Optional. Set user display info
liveCanvas.onGetLocalUserPictureUrl = () => "YOUR USER PICTURE URI";
// Toggle Live Canvas cursor enabled state
liveCanvas.isCursorShared = !isCursorShared;
Otimização entre dispositivos
Para a maioria dos aplicativos na Web, o conteúdo é renderizado de forma diferente, dependendo do tamanho da tela ou do estado variável do aplicativo. Se InkingManager não for otimizado corretamente para seu aplicativo, isso poderá fazer com que traços e cursores apareçam de forma diferente para cada usuário. A tela Live Share dá suporte a um conjunto simples de APIs, que permite ajustar posições <canvas> de traço para se alinhar corretamente com seu conteúdo.
Por padrão, a tela do Live Share funciona muito como um aplicativo de quadro de dados, com o conteúdo sendo alinhado ao modo de exibição com um nível de zoom de 1x. Somente parte do conteúdo está sendo renderizada dentro dos limites visíveis do <canvas>. Conceitualmente, é como gravar um vídeo do modo de vista do pássaro. Enquanto o visor da câmera está gravando uma parte do mundo abaixo dela, o mundo real se estende quase infinitamente em todas as direções.
Aqui está um diagrama simples para ajudar a visualizar este conceito:
Você pode personalizar esse comportamento das seguintes maneiras:
- Alterando o ponto de referência inicial para o canto superior esquerdo da tela.
- Altere as posições de deslocamento de pixel x e y do modo de exibição.
- Altere o nível de escala do modo de exibição.
Observação
Os pontos de referência, deslocamentos e níveis de escala são locais para o cliente e não são sincronizados entre os participantes da reunião.
Exemplo:
<body>
<button id="pan-left">Pan left</button>
<button id="pan-up">Pan up</button>
<button id="pan-right">Pan right</button>
<button id="pan-down">Pan down</button>
<button id="zoom-out">Zoom out</button>
<button id="zoom-in">Zoom in</button>
<button id="change-reference">Change reference</button>
</body>
// ...
// Pan left
document.getElementById("pan-left").onclick = () => {
inkingManager.offset = {
x: inkingManager.offset.x - 10,
y: inkingManager.offset.y,
};
};
// Pan up
document.getElementById("pan-up").onclick = () => {
inkingManager.offset = {
x: inkingManager.offset.x,
y: inkingManager.offset.y - 10,
};
};
// Pan right
document.getElementById("pan-right").onclick = () => {
inkingManager.offset = {
x: inkingManager.offset.x + 10,
y: inkingManager.offset.y,
};
};
// Pan down
document.getElementById("pan-down").onclick = () => {
inkingManager.offset = {
x: inkingManager.offset.x,
y: inkingManager.offset.y + 10,
};
};
// Zoom out
document.getElementById("zoom-out").onclick = () => {
if (inkingManager.scale > 0.1) {
inkingManager.scale -= 0.1;
}
};
// Zoom in
document.getElementById("zoom-in").onclick = () => {
inkingManager.scale += 0.1;
};
// Change reference
document.getElementById("change-reference").onclick = () => {
if (inkingManager.referencePoint === "center") {
inkingManager.referencePoint = "topLeft";
} else {
inkingManager.referencePoint = "center";
}
};
Cenários ideais
Com páginas da Web chegando em todas as formas e tamanhos, não é possível fazer a tela do Live Share para dar suporte a todos os cenários. O pacote é ideal para cenários em que todos os usuários estão olhando para o mesmo conteúdo ao mesmo tempo. Embora nem todo o conteúdo precise estar visível na tela, ele deve ser o conteúdo que é dimensionado entre dispositivos linearmente.
Aqui estão alguns exemplos de cenários em que a tela do Live Share é uma ótima opção para seu aplicativo:
- Sobreponha imagens e vídeos que renderizam com a mesma proporção em todos os clientes.
- Exibindo um mapa, um modelo 3D ou um quadro de dados do mesmo ângulo de rotação.
Ambos os cenários funcionam bem porque o conteúdo pode ser exibido o mesmo em todos os dispositivos, mesmo que os usuários estejam olhando para ele com diferentes níveis de zoom e deslocamentos. Se o layout ou o conteúdo do seu aplicativo mudar dependendo do tamanho da tela e não for possível gerar uma exibição comum para todos os participantes, a tela do Live Share pode não ser uma boa opção para o seu cenário.
Exemplos de código
| Nome do exemplo | Descrição | JavaScript |
|---|---|---|
| Demonstração do Live Canvas | Aplicativo de quadro de dados simples. | Visualizar |
| Modelo de mídia de React | Desenhe um player de vídeo sincronizado. | View |
Próxima etapa
Confira também
Comentários
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulte https://aka.ms/ContentUserFeedback.
Enviar e exibir comentários de