Создание приложения видео чата, часть 2 – Доступ к камерам

На мой Twitch канал Мы продолжаем создавать наше видео чата на Azure Communication Services (ACS) Отказ

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

Как браузеры доступают к устройствам

Мы собираемся использовать SDK ACS, чтобы сделать это, но прежде чем добраться, давайте сначала поймем, как мы доступаем к камерам и микрофонам в браузере. Браузеры некоторое время имели эту функциональность сейчас, она пришла в качестве необходимости в спецификации WEBRTC, поскольку это позволяет делать то, что мы делаем, запустите видеопоток через браузер, и он работает с использованием Navigator.MediaDevices API, который заменил навигатор. GetUsermedia Отказ

Эта API обоснована, поэтому он хорошо работает с async / ждать и вернется нам MediaStream Доступно для браузера.

Хотя у пользователя есть улов, пользователь должен согласиться на предоставление доступа к устройствам, что имеет смысл, поскольку вы не хотите какого-либо случайного веб-сайта, чтобы иметь возможность получить доступ к вашей камере и микрофон, не зная об этом, вы? Пользователь увидит такую подсказку так:

В «Roam JavaScript» мы бы написали что-то подобное:

navigator.mediaDevices
    .getUserMedia({ audio: true, video: true })
    .then(function(stream) {
        /* use the stream */
    })
    .catch(function(err) {
        /* handle the error */
    });

Если пользователь отрицает запрос, то поймать обещания вызвано (или, если они ранее его отказали), иначе вы получите в MediaStream Для камеры/микрофона они выбрали. MediaStream может быть предоставлено <Видео> Элемент, и вы можете посмотреть на себя.

Доступ к устройствам с ACS

Теперь, когда мы понимаем основы, давайте посмотрим, как мы используем это в ACS SDK, чтобы сделать один шаг ближе к установлению видеозвонков.

Нам нужно добавить несколько пакетов NPM в наше UI:

npm install --save @azure/communication-calling @azure/communication-common

С этими пакетами нам понадобится четыре API, AzurecommunicaterCercredential , Callclient , CallAgent и DeviceManager Отказ

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

Определение нашего контекста

Давайте создадим файл под названием USECALLINGCONTEXT.TSX Поскольку у нас будет контекст там, а также крюк для доступа к контексту и определить наш контекст:

import {
    AudioDeviceInfo,
    CallAgent,
    CallClient,
    DeviceManager,
    VideoDeviceInfo
} from "@azure/communication-calling";
import { AzureCommunicationUserCredential } from "@azure/communication-common";
import React, { useState, useEffect, useContext } from "react";
import useToken from "./useToken";

export type CallingProps = {
    micList?: AudioDeviceInfo[];
    cameraList?: VideoDeviceInfo[];
    callAgent?: CallAgent;
    deviceManager?: DeviceManager;
};

const CallingContext = React.createContext({});

Контекст будет доступен на нем список камер и микрофонов, а также CallAgent и DeviceManager Экземпляры, так как они будут полезны позже.

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

export const CallingContextProvider = (props: {
    children: React.ReactNode;
}) => {
    return (
        
            {props.children}
        
    );
};

Наконец, мы обнаружим крючок, чтобы облегчить доступ к контексту в другом месте в приложении:

export const useCallingContext = () => useContext(CallingContext);

Отлично, мы теперь готовы реализовать контекстный поставщик.

Реализация поставщика контекста

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

export const CallingContextProvider = (props: {
  children: React.ReactNode;
}) => {
  const token = useToken();
  const [, setClient] = useState();
  const [callAgent, setCallAgent] = useState();
  const [deviceManager, setDeviceManager] = useState();
  const [cameraList, setCameraList] = useState();
  const [micList, setMicList] = useState();

Нам понадобится токен, который генерируется для пользователя в }} “> Часть 1 , и мы делаем это через пользовательский крюк:

import { useState, useEffect } from "react";

export type TokenResponse = {
    token: string;
    expiresOn: Date;
    communicationUserId: string;
};

const useToken = () => {
    const [token, setToken] = useState("");

    useEffect(() => {
        const run = async () => {
            const res = await fetch("/api/issueToken");
            const tokenResponse: TokenResponse = await res.json();

            setToken(tokenResponse.token);
        };

        run();
    }, []);

    return token;
};

export default useToken;

Тогда у нас есть еще большее состояние для разных частей ACS SDK, которую мы собираемся разоблачить, за исключением Callclient Что нам нужно только установить другие части API.

Мы будем использовать эффект крюка для настройки этого, который будет срабатывать, когда токен доступен для нас:

useEffect(() => {
    const run = async (callClient: CallClient, token: string) => {
        const tokenCredential = new AzureCommunicationUserCredential(token);
        let callAgent: CallAgent | undefined = undefined;
        try {
            callAgent = await callClient.createCallAgent(tokenCredential);
            const deviceManager = await callClient.getDeviceManager();
            const result = await deviceManager.askDevicePermission(true, true);

            if (result.audio) {
                setMicList(deviceManager.getMicrophoneList());
            }

            if (result.video) {
                setCameraList(deviceManager.getCameraList());
            }

            setCallAgent(callAgent);
            setDeviceManager(deviceManager);
        } catch {
            if (callAgent) {
                callAgent.dispose();
            }
        }
    };

    if (token) {
        const callClient = new CallClient();
        setClient(callClient);
        run(callClient, token);
    }
}, [token]);

Хорошо, это много кода, давайте сломаем его штуку по частям, начиная с дна:

if (token) {
    const callClient = new CallClient();
    setClient(callClient);
    run(callClient, token);
}

Это проверка, чтобы убедиться, что токен пользователя был выдан, и как только это было, мы собираемся позвонить в async Функция ( запустить ), потому что эффективный крюк не может принять функцию async напрямую, а Беги Функция на самом деле, где происходят вещи.

Во-первых, эта функция собирается создать учетные данные для ACS из токена.

const tokenCredential = new AzureCommunicationUserCredential(token);

Далее мы настроим попробуйте/поймать Блокируйте для доступа к устройствам и помните, что причина, по которой мы сделали это таким образом, так что если пользователь снижает запрос к устройствам доступа, мы можем изящно обрабатывать ошибку (Async / ждут Развораживает обещания поймать в поймать попробуйте/поймать блок).

Мы создадим CallAgent Использование учетных данных:

callAgent = await callClient.createCallAgent(tokenCredential);

Мы не на самом деле используя калагент Тем не менее, это то, что мы используем для подключения к звонкам, но нам нужно создать экземпляр IT до Доступ к Диспетчер устройств . Я неясен как Почему Это так, и это то, что я собираюсь поднять с командой ACS.

С нашей CallAgent Создано, сейчас время получить доступ к DeviceManager , что даст нам все устройства:

const deviceManager = await callClient.getDeviceManager();
const result = await deviceManager.askDevicePermission(true, true);

if (result.audio) {
    setMicList(deviceManager.getMicrophoneList());
}

if (result.video) {
    setCameraList(deviceManager.getCameraList());
}

От DeviceManager , который мы получаем от callclient.getdevicemanager , нам нужно запросить разрешения от пользователя доступа к своему списку устройств, используя AskdevicePermissions. . Этот метод принимает два аргумента, хотите ли вы аудио и доступ видео, а для нашего случая мы делаем. Предполагая, что разрешения предоставления пользователей, мы можем затем использовать DeviceManager.GetMicrophoneList и DeviceManager.Getcameralist Чтобы получить массивы AudiodeviceInfo. и Видеодевицинфо что мы можем представить пользователю для их выбора.

Это так же, как если бы вы позвонили Перечислитешители Метод от MediaDevices , но SDK берет свободу разделения перечисленных устройств в соответствующие типы. Что важно знать об этом, это то, что вы Должен Звоните AskDevicePermissions Во-первых, иначе вы получите массив с одним неизвестным устройством. Это потому, что Перечислитешители Это то, что используется внутри SDK, обращается к доступным устройствам без Подсказка для согласия и если согласия не было предоставлено, вы не можете получить устройства.

Заключение

Наше контекст Ractex готов к интеграции в приложение. Мы узнали, как начать использовать ACS SDK и его DeviceManager Чтобы запросить разрешение на устройства, а затем отобразить полный список их.

Если вы хотите наверстать доверять весь эпизод, а также посмотреть, как мы интегрируем это в общее приложение React, вы можете поймать запись на YouTube вместе с полный плейлист

Оригинал: “https://dev.to/azure/building-a-video-chat-app-part-2-accessing-cameras-3ol2”