Общие сведения о Live Share - Teams

Статья
05/22/2024

Live Share — это пакет SDK, предназначенный для преобразования приложений Teams в совместные многопользовательские приложения без написания выделенного внутреннего кода. С помощью Live Share пользователи могут совместно смотреть, создавать и редактировать совместно в Microsoft Teams. Независимо от того, представляют ли ваши пользователи во время собрания или просматривают содержимое, к которому предоставлен общий доступ в чате, Live Share безопасно подключает их к общему сеансу с помощью всего нескольких строк кода.

Иногда просто недостаточно общего доступа к экрану, поэтому корпорация Майкрософт создала такие инструменты, как PowerPoint Live и доска, непосредственно в Teams. Благодаря прямому переносу веб-приложения в интерфейс собрания пользователи могут легко взаимодействовать во время собраний и звонков.

Совместная работа также не должна прекращаться после завершения собраний. Сеансы Live Share работают в контекстах чата и каналов, позволяя пользователям видеть, кто просматривает содержимое, следить друг за другом и многое другое.

Начало работы

Обзор функций

Live Share содержит три основных пакета, которые поддерживают неограниченные сценарии совместной работы. Эти пакеты предоставляют набор распределенных структур данных (DDS), включая примитивные стандартные блоки и сценарии под ключ.

Live Share легко интегрирует собрания с Fluid Framework. Fluid Framework — это набор клиентских библиотек для распространения и синхронизации общего состояния. Live Share предоставляет бесплатную, полностью управляемую и готовую к использованию службу Azure Fluid Relay, поддерживаемую безопасностью и глобальным масштабом Teams.

Live Share позволяет подключаться к специальному контейнеру Fluid Container, связанному с каждой встречей, чатом или каналом, в нескольких строках кода. Помимо структур данных, предоставляемых Fluid Framework, Live Share также поддерживает новый набор классов DDS для упрощения синхронизации состояния приложения.

Ниже перечислены функции, поддерживаемые пакетом Live Share Core.

Присоединяйтесь к сеансу Live Share с LiveShareClient для собраний, чатов или каналов.
Отслеживание присутствия и синхронизация метаданных пользователя с LivePresence.
Координировать состояние приложения, которое исчезает, когда пользователи покидают сеанс с LiveStateпомощью .
Синхронизация таймера обратного отсчета с LiveTimer.
Отправка событий в режиме реального времени другим клиентам в сеансе с помощью LiveEvent.
Представляем другим пользователям и подпишитесь на нее с помощью LiveFollowMode.
Используйте любую функцию Fluid Framework, например SharedMap и SharedString.

Дополнительные сведения об этом пакете можно найти на странице основных возможностей.

Видео и аудио являются важной частью современного мира и рабочего места. Live Share media обеспечивает синхронизацию мультимедиа для любого проигрывателя мультимедиа с несколькими строками кода. Синхронизируя мультимедиа на уровне элементов управления состоянием проигрывателя и транспортом, вы можете по отдельности атрибутировать представления, обеспечивая максимально возможное качество, доступное в приложении. Так как корпорация Майкрософт не перенаправит содержимое мультимедиа, ваши требования к лицензированию и доступу остаются неизменными.

Ниже перечислены функции, поддерживаемые мультимедиа Live Share.

Синхронизация состояния проигрывателя мультимедиа и отслеживание с помощью MediaPlayerSynchronizer.
Интеллектуальная корректировка объема мультимедиа, когда пользователи разговаривают во время собрания.
Ограничьте, какие пользователи могут изменять состояние игрока.
Приостановка и возобновление синхронизации мультимедиа на лету или в запланированных точках ожидания.

Дополнительные сведения об этом пакете можно найти на странице мультимедиа Live Share.

Примечание.

Live Share не переадресовывая передача содержимого мультимедиа. Он предназначен для использования со встроенными веб-проигрывателями, такими как HTML5 <video> или Проигрыватель мультимедиа Azure.

При совместной работе в режиме реального времени важно, чтобы пользователи могли указывать и подчеркивать содержимое на экране. Полотно Live Share упрощает добавление рукописного ввода, лазерных указателей и курсоров в приложение для эффективной совместной работы.

Функции, поддерживаемые холстом Live Share:

Добавьте совместную работу <canvas> в приложение с помощью LiveCanvas.
Добавьте идеи с помощью пера, средства выделения, линии и стрелки.
Эффективное представление с помощью лазерной указки.
Следуйте указаниям курсоров мыши в режиме реального времени.
Настройте параметры для переменных устройств и состояний просмотра.
Используйте полностью поддерживаемые входные данные мыши, сенсорного ввода и пера.

Дополнительные сведения об этом пакете можно найти на странице холста Live Share.

Создание приложений для совместной работы может быть сложным, трудоемким, дорогостоящим и включает в себя сложные требования соответствия в масштабе. Пользователи Teams тратят значительное количество времени на анализ работы с товарищами по команде, совместный просмотр видео и мозговой штурм новых идей посредством демонстрации экрана. Пакет SDK Live Share позволяет преобразовать ваше приложение в нечто более полезное для совместной работы с минимальными вложениями.

Ниже приведены некоторые основные преимущества пакета SDK Live Share.

Простое управление сессиями и безопасность.
Распределенные структуры данных с состоянием и без состояния.
Расширения мультимедиа для удобной синхронизации видео и звука.
Рукописный ввод, лазерные указатели и курсоры.
Соблюдение привилегий собрания с помощью проверки роли.
Бесплатная и полностью управляемая служба с низкой задержкой.

Чтобы понять, подходит ли Live Share для вашего сценария совместной работы, полезно понять различия между Live Share и другими платформами для совместной работы, в том числе:

Веб-сокеты
Azure Fluid Relay
Live Share

Веб-сокеты

Веб-сокеты — это повсеместные технологии для обмена данными в режиме реального времени в Интернете, и некоторые приложения могут предпочесть использовать собственную настраиваемую серверную часть веб-сокетов. В отличие от REST API, веб-сокеты поддерживают открытое подключение между сервером и клиентами в сеансе.

Как и другие пользовательские службы API, требования обычно включают в себя сеансы проверки подлинности, региональное сопоставление, обслуживание и масштабирование. Многие сценарии совместной работы также требуют поддержания состояния сеанса на сервере, что требует инфраструктуры хранилища, разрешения конфликтов и многого другого.

Используя Live Share, вы получаете все возможности веб-сокетов без каких-либо накладных расходов.

Azure Fluid Relay

Azure Fluid Relay — это управляемое предложение для Fluid Framework, которое помогает разработчикам создавать возможности для совместной работы в режиме реального времени и реплицировать состояние между подключенными клиентами JavaScript. Microsoft Whiteboard, Loop и OneNote — это примеры приложений, созданных с помощью Fluid Framework.

Как и другие службы Azure, Azure Fluid Relay предназначена для адаптации к потребностям отдельных проектов с минимальной сложностью. Требования включают в себя разработку истории проверки подлинности для контейнеров Fluid и регионального соответствия требованиям. После настройки разработчики могут сосредоточиться на обеспечении высокого качества совместной работы.

Live Share предоставляет службу "под ключ" Azure Fluid Relay, обеспечивая безопасность Microsoft Teams. Все сеансы соответствуют требованиям к размещению данных клиента, глобальным правилам и обязательствам по обеспечению безопасности. Всего в нескольких строках кода можно подключиться к контейнерам Live Share, которые доступны только участникам собрания, чата или канала.

JavaScript
TypeScript

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

Важно!

Любые данные, отправляемые или сохраненные через размещенную службу Azure Fluid Relay Пакета SDK для Live Share, доступны до 24 часов. Дополнительные сведения см. в разделе Вопросы и ответы о Live Share.

Использование настраиваемой службы Azure Fluid Relay

Хотя большинству из вас предпочтительнее использовать нашу бесплатную размещенную службу, по-прежнему существуют ситуации, когда полезно использовать собственную службу Azure Fluid Relay для приложения Live Share.

Рассмотрите возможность использования пользовательской службы, если вы:

Требуется долгосрочное хранение данных в контейнерах Fluid.
Передача конфиденциальных данных через службу, для чего требуется настраиваемая политика безопасности.
Разрабатывайте функции с помощью Fluid Framework, например , SharedMapдля приложения за пределами Teams.

Дополнительные сведения см. в руководстве по настраиваемой службе Azure Fluid Relay.

Сеансы Live Share обеспечивают удобную совместную работу на собраниях, в чатах и каналах. При подключении к сеансу через joinContainer() API Teams подключает пользователя к соответствующему контейнеру Fluid. Хотя вам не нужно писать код, зависящий от контекста, следует понимать различия в пользовательских сценариях для каждой области вкладок.

Примечание.

Сеансы Live Share, используемые в разных контекстах, должны подключаться к одному контейнеру Fluid. Если вы хотите синхронизировать данные по-разному в разных контекстах, можно создавать разные объекты распределенных данных (DDS) для каждого контекста и прослушивать изменения только для тех, которые относятся к вашему сценарию.

API пакета SDK для getContext() JavaScript для Teams сообщает, в каком FrameContexts приложении выполняется. Его можно использовать для условного включения различных функций и шаблонов пользовательского интерфейса в приложении для каждого контекста. Live Share поддерживает следующие FrameContexts контексты:

meetingStage
sidePanel
content

В следующем примере показано, как добавить в приложение функции, зависящие от контекста.

JavaScript
TypeScript

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

Контексты собраний

Как мы уже упоминали ранее, существует два контекста собрания: meetingStage и sidePanel. В следующем разделе описано, как оптимизировать эти контексты для улучшения взаимодействия с пользователем.

Сцена собрания

Контекст meetingStage позволяет пользователям предоставлять участникам собрания общий доступ к содержимому вашего приложения на этапе собрания. В этом контексте пользователи обычно ожидают совместной работы в режиме реального времени. В отличие от загрузки приложения для совместной работы, такого как Microsoft Loop или Word, в веб-браузере выступающие обычно ожидают больше контроля над взаимодействием. Например, в PowerPoint Live выступающие должны контролировать, какой слайд PowerPoint отображается для участников по умолчанию, даже если участники могут временно прекратить их следовать.

Рассмотрите возможность выполнения следующих оптимизаций для приложения meetingStage :

Поместите активный элемент управления докладчика приложения, например, управляя положением камеры для всех пользователей, просматривающих трехмерную модель.
Разрешить соответствующим пользователям управлять приложением, например управлять воспроизведением мультимедиа во время совместного просмотра видео.
Разрешить пользователям временно прекратить следить за выступающим, например показывать кнопку "Синхронизировать с выступающим", когда участник щелкает другое изображение в слайд-шоу.
Укажите параметры, предоставляющие элемент управления выступающим, например отключение возможности для других пользователей перестать следовать за ними.

Боковая панель собрания

Контекст собрания sidePanel позволяет пользователям закреплять ваше приложение как вкладку на собрании, а также вкладки по умолчанию, такие как чат. Хотя любой участник собрания может иметь возможность открыть вкладку sidePanel , каждый пользователь должен открывать ее по отдельности. Это делает его идеальным для асинхронных сценариев во время собрания, таких как поиск содержимого для предоставления общего доступа к этапу собрания. Хотя пользователи не хотят совместно смотреть, совместно создавать или редактировать полнофункционированный контент из этой области, Live Share по-прежнему может улучшить ваше sidePanel приложение.

Рассмотрите возможность выполнения следующих оптимизаций для приложения sidePanel :

Сопутствующие возможности на этапе собрания, такие как совместные видео или аудио плейлисты.
Параметры конфигурации перед предоставлением общего доступа к содержимому на этапе собрания, например отключение функции "взять под контроль".
Оптимизация производительности, например один раз трансляция нового содержимого во время запуска общего доступа, а не перезагрузка приложения.

Контексты содержимого

Контекст content предназначен для асинхронного использования содержимого приложения. Существует несколько различных поверхностей для content контекстов в чате и каналах, в том числе:

Вкладки чата и канала
Представление стадии совместной работы

Примечание.

Контекст content также используется для личных приложений, которые Live Share не поддерживает. Live Share поддерживает content только контексты в классических и веб-клиентах Teams.

Вкладки чата и канала

Вкладки чата и канала позволяют пользователям закреплять приложение в чате или канале. Вкладка, поддерживающая и sidePanel , имеет один и content тот же закрепленный URL-адрес, но варианты использования довольно разные. Для начала вкладки чата и канала обычно имеют больше горизонтального пространства для работы. Рекомендуется разрешить пользователям искать содержимое, чтобы "закрепить" на вкладке. Например, преподаватели, использующие приложение заметок, могут закреплять заметки, содержащие образовательные ресурсы для своих учащихся.

Хотя вкладки чата и канала чаще всего используются для асинхронного потребления, пользователи могут одновременно иметь одно и то же содержимое. В этом случае полезно поддерживать синхронизацию содержимого, чтобы предотвратить конфликты данных или дублирование работы. Live Share позволяет показать, какое содержимое просматривает каждый пользователь, что он делает и многое другое. Это может обеспечить социальные стимулы, которые привлекают пользователей к содержимому приложения, повышая вовлеченность и совместную работу. Мы называем это «случайной совместной работой».

Попробуйте выполнить следующие оптимизации для чата content и вкладки канала:

Покажите, какие пользователи просматривают содержимое, закрепленного на вкладке, например пользователи, активно просматривающие каждую доску.
Поддержи пользователей присоединиться к текущему сеансу совместной работы, например отображать всплывающее уведомление о присоединении к текущему стенду для приложения задачи.
Разрешите пользователям подписаться на определенного пользователя или группу пользователей, например щелкнув аватар другого подключенного пользователя, на который они хотели бы подписаться.

Представление стадии совместной работы

Когда пользователи обмениваются содержимым приложения со своими коллегами в Teams, рекомендуется использовать совместное представление стадий. В этом сценарии пользователи открывают содержимое, к которому был предоставлен общий доступ, во всплывающем окне с чатом на стороне, что позволяет пользователям взаимодействовать с вашим содержимым, продолжая поток беседы. Подобно вкладкам чата и канала, это содержимое в основном используется асинхронно. Однако если пользователи предоставляют общий доступ к содержимому с помощью адаптивной карточки, пользователи с большей вероятностью будут просматривать содержимое и общаться друг с другом, что увеличивает потребность в функциях совместной работы.

Рассмотрите возможность выполнения следующих оптимизаций для приложений stageview для совместной работы:

Показать, какие пользователи просматривают содержимое и что они делают, например отображение аватара пользователя в позиции, в которой они находятся в видео.
Разрешите пользователям подписаться на определенного пользователя или группу пользователей, например щелкнув аватар другого подключенного пользователя, на который они хотели бы подписаться.
Упростите нерегламентированное взаимодействие, например путем включения инструментов рукописного ввода и лазерных указателей в режиме выполнения.

Интеграция React

Live Share имеет выделенную интеграцию React, что упрощает интеграцию функций Live Share с приложениями React. Вместо LiveShareClient использования напрямую компонент можно использовать LiveShareProvider для присоединения к сеансу Live Share при первом подключении компонента. Каждый из них LiveDataObject имеет соответствующий перехватчик React, предназначенный для того, чтобы сделать использование Live Share невероятно простым. Дополнительные сведения см. на странице Live Share для React GitHub.

Пользовательские сценарии

Сценарий	Пример
Во время маркетинговой проверки пользователь хочет собрать отзывы о последних изменениях видео.	Пользователь предоставляет доступ к видео на стадии собрания и запускает видео. При необходимости пользователь приостанавливает видео, чтобы обсудить сцену, а участники рисуют части экрана, чтобы подчеркнуть ключевые моменты.
Руководитель проекта играет в Agile Poker со своей командой во время планирования.	Менеджер делится приложением Agile Poker на стадии собрания, что позволяет играть в игру планирования до тех пор, пока команда не будет консенсусом.
Финансовый консультант проверяет PDF-документы с клиентами перед подписанием.	Финансовый консультант предоставляет контракт в формате PDF на стадии собрания. Все участники могут видеть курсоры друг друга и выделенный текст в PDF-файле, после чего обе стороны подписывают соглашение.
Инженеры вместе просматривают трехмерную модель.	Команда разработчиков просматривает трехмерную модель, которая была предоставлена в чате. Они могут видеть позиции камеры друг друга, редактировать модель и следовать друг за другом.

Важно!

Live Share лицензируется в соответствии с лицензией microsoft Live Share SDK. Чтобы использовать эти возможности в приложении, необходимо сначала прочитать и принять эти условия.

Следующий этап

Начало работы

Поделиться через

Обзор функций

Веб-сокеты

Azure Fluid Relay

Использование настраиваемой службы Azure Fluid Relay

Контексты собраний

Сцена собрания

Боковая панель собрания

Контексты содержимого

Вкладки чата и канала

Представление стадии совместной работы

Интеграция React

Пользовательские сценарии

Следующий этап

См. также

Обратная связь

Дополнительные ресурсы

Поделиться через

Пакет SDK Live Share

Обзор функций

Ядро Live Share

Мультимедиа Live Share

Холст Live Share

Зачем создавать приложения с помощью Live Share?

Веб-сокеты

Azure Fluid Relay

Размещенная служба Live Share

Использование настраиваемой службы Azure Fluid Relay

Контексты совместной работы Live Share

Контексты собраний

Сцена собрания

Боковая панель собрания

Контексты содержимого

Вкладки чата и канала

Представление стадии совместной работы

Интеграция React

Пользовательские сценарии

Следующий этап

См. также

Обратная связь

Дополнительные ресурсы