Революция в приложениях для видеочата: создание высококачественных аудио- и видеофункций с помощью Dolby.i

Введение

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

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

Обзор статьи

В статье рассматривается включение высококачественных аудио и видео функций Dolby.io в Svelte, структуру веб-приложений, для улучшения приложений для видеочата. В нем объясняется, как сочетание этих двух технологий может улучшить взаимодействие с пользователем, обеспечивая четкое, четкое и иммерсивное аудио и видео.

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

Понимание технологии Dolby.io

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

Основными преимуществами технологии Dolby.io являются шумоподавление, четкость речи, объемный звук и совместимость со многими платформами и устройствами. Технология Dolby.io широко используется в различных приложениях, включая музыку, фильмы, игры, видеоконференции и прямые трансляции, и стала стандартом для высококачественного аудио и видео. Dolby.io продолжает лидировать в разработке передовых решений для повышения качества и воздействия аудио- и визуального контента с помощью своих творческих и передовых технологий.

Преимущества использования Dolby.io в приложениях для видеочата

Dolby.io имеет различные преимущества, улучшающие качество, четкость и реалистичность аудио- и видеоинформации, и существует несколько подходов к использованию технологии Dolby.io для улучшения качества звука и видео в приложениях видеочата. Вот несколько примеров:

• Шумоподавление: технология шумоподавления от Dolby.io может использоваться для удаления нежелательного фонового шума из приложений видеочата. Это может значительно повысить четкость и качество звука, облегчая слышимость и понимание того, о чем идет речь.
• Четкость голоса: технология обработки голоса, разработанная Dolby.io, может использоваться для улучшения четкости и разборчивости речи в приложениях видеочата. Это особенно удобно при работе с некачественными микрофонами или в шумной обстановке.
• Высококачественный звук: технологию Dolby.io можно использовать для создания высококачественного звука с повышенной точностью, динамическим диапазоном и объемностью. Это может предоставить пользователям приложений для видеочата более приятное и захватывающее прослушивание.

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

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

Чтобы начать использовать Svelte, достаточно обратиться к официальной документации. Однако, если вы используете простой JavaScript или React, вам не составит труда, потому что все отображается без проблем и выглядит как наш типичный стандартный JavaScript.

Обзор фреймворка Svelte и его преимуществ

Разработчики могут создавать адаптивные пользовательские интерфейсы (UI) для Интернета, используя популярную среду веб-приложений Svelte. Svelte отличается от конкурирующих фреймворков своим отличительным методом разработки пользовательского интерфейса, который влечет за собой компиляцию кода во время сборки, а не во время выполнения, создавая более быстрый и эффективный код.

Некоторые преимущества использования Svelte включают:

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

Создание среды разработки для создания приложений видеочата с использованием Svelte.

В этой части мы рассмотрим, как настроить среду разработки для приложения видеочата Svelte. Мы можем легко получить доступ к репозиторию GitHub, содержащему первый шаблон, потому что я уже подготовил StarterTemplate, который будет использоваться для создания этого проекта из-за нехватки времени. Нажмите здесь, чтобы получить доступ к репозиторию.

Теперь, когда вы получили доступ к GitHub, давайте клонируем файлы и используем терминал для запуска их в нашем браузере. Чтобы убедиться, что мы можем успешно выполнить это задание вместе, убедитесь, что на вашем компьютере установлен Node.js. Чтобы клонировать репозиторий, введите в терминале следующую команду:

git clone https://github.com/GabrielDelight/svelte-video-chat-application.git

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

npm install

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

npm run dev

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

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

Основные компоненты нашей структуры приложения Svelte.

В этом разделе мы поговорим о компонентах Svelte, которые мы разработали для приложения видеочата. После клонирования репозитория есть папка маршрутов, которую мы будем использовать для работы над проектом. В папке маршрутов есть несколько файлов, но мы будем использовать Header.svelte, Footer.svelte и +page.svelte. Объяснение того, что делает каждый файл в проекте, можно найти ниже:

Header.svelte: состоит из раздела заголовка проекта, который включает в себя форму, для которой требуется токен доступа, сгенерированный из нашей Dolby.io Dashboard. Однако мы рассмотрим это подробнее в разделе урока, в котором объясняется, как создать учетную запись и получить код доступа.

Но имейте в виду, что для использования API Dolby.io требуется только токен доступа.

Footer.svelte:содержит часть нижнего колонтитула страницы, которая содержит кнопки присоединения, выхода и приглашения для нашего приложения. Когда мы начнем писать коды API Dolby.io, чтобы приложение видеочата функционировало должным образом, эти кнопки будут нацелены, поскольку им был присвоен специальный идентификатор.

Файл Svelte с именем +page.svelte содержит основное содержимое программного обеспечения для видеочата, которое будет отображать два видео — одно для разработчика, а другое для гостя. Компонент заголовка был импортирован и использовался вверху, а компонент нижнего колонтитула — внизу. Часть тела, расположенная посередине этих компонентов, показана на следующем изображении для визуального представления:

Интеграция API Dolby.io со Svelte

В этом разделе мы интегрируем Dolby.io API со Svelte. Поскольку у нас уже есть начальный шаблон, созданный с помощью Svelte, интеграция API будет быстрее и проще.

Описание процесса объединения API-интерфейсов Dolby.io со Svelte

Мы используем Web SDK, который применяется ко всем интерфейсным платформам, использующим JavaScript, включая Svelte, что упрощает интеграцию API Dolby.io со Svelte. CDN с веб-SDK будет использоваться для создания проекта. Мы рассмотрим, как использовать этот CDN в нашем коде Svelte; это простая процедура. Чтобы убедиться, что все работает правильно, в процессе разработки будут проведены многочисленные тесты.

API, которые мы будем использовать, полностью состоят из JavaScript. Важно помнить, что без CDN код, который мы пишем, не будет работать. Наконец, все, что нам нужно для использования приложения чата Dolby.io в нашем веб-проекте, — это ключ доступа. В следующем разделе эта тема будет рассмотрена более подробно.

Создание учетной записи Dolby.io и получение необходимых учетных данных.

Чтобы получить токен доступа для тестирования приложения видеочата, следуйте инструкциям в этом разделе о том, как создать свою учетную запись Dolby.io.

Шаг 1. Создание учетной записи

Если у вас еще нет учетной записи Dolby.io, первым шагом будет ее создание. Чтобы получить доступ к Личному кабинету, войдите в систему, если у вас уже есть учетная запись. Мы рекомендуем использовать Google, потому что это быстрый способ зарегистрироваться или войти.

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

Шаг 2. Создание приложения

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

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

Как только вы нажмете кнопку «плюс», появится модальное окно с просьбой дать проекту имя. В нашем случае мы просто назвали его «Демонстрационное приложение», но вы можете называть свой проект как угодно, и это не повлияет на базу кода статьи. Выбрав кнопку «СОЗДАТЬ», вы сможете быстро создать свое приложение:

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

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

Это завершает наше обсуждение; мы вернемся к этой функции панели мониторинга после разработки API-интерфейсов Dolby.io, чтобы скопировать токен доступа и протестировать наше приложение с его использованием.

Разработка необходимого кода для интеграции API-интерфейсов Dolby.io со Svelte.

В этом разделе объясняются шаги по использованию Dolby.io API с приложением Svelte. Процесс не сложный, но важно внимательно следовать шагам. Чтобы упростить понимание, мы разобьем процесс на несколько частей. Так вы сможете лучше понять этот раздел.

Добавление веб-SDK. через CDN

Согласно инструкциям Dolby.io Web SDK, мы будем использовать CDN. Чтобы использовать этот CDN, мы должны найти способ заставить его работать правильно. Для этого все, что нам нужно сделать, это использовать тег svelte:head, который можно использовать для помещения элементов в раздел head кода. Файл +page.svelte будет содержать следующий код, который будет использоваться для включения CDN в наш проект:

<svelte:head>
  <script
    type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/@voxeet/voxeet-web-sdk/dist/voxeet-sdk.js"
  ></script>
  <script
    type="text/javascript"
    src="https://developer.Dolby.io.io/demos/comms-sdk-web-getting-started/util/Dolby.ioio-auth-helper.js"
  ></script>
  <script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"
  ></script>
</svelte:head>;

В приведенном выше коде мы добавили загрузочную CDN в дополнение к CDN SDK, которая будет использоваться для изменения пользовательского интерфейса кода. Этот код также показывает, что внутри тега svelte:head могут поместиться любые дополнительные элементы или CDN. Расположение вышеупомянутого кода в наших проектах показано на рисунке ниже:

Интеграция Dolby.io API

Эта часть будет посвящена интеграции Dolby.io API в наш проект и запуску нашего приложения для видеочата. Вы можете скопировать и вставить код в файл «page.svelte», и мы рассмотрим его сразу под блоком кода. Где вставить фактический код, показано ниже:

Пожалуйста, скопируйте следующий код и вставьте его в тег скрипта:

import { onMount } from "svelte";
onMount(async () => {
  const shareMessage = (message) => {
    document.getElementById("message").value = message;
  };
  // Step 1: Define initializeToken() Here
  const initializeToken = () => {
    const token = Dolby.ioio.getAccessToken();
    VoxeetSDK.initializeToken(
      token,
      () => new Promise((resolve) => resolve(token))
    );
    shareMessage("Step 1: Web SDK initialized.");
    document.getElementById("statusBtn").textContent = "Opened";
    document.querySelector(".round").style.backgroundColor = "green";
    return token;
  };
  // Step 2: Define openSession() Here
  const openSession = async (sessionName) => {
    try {
      await VoxeetSDK.session.open({ name: sessionName });
      shareMessage("Step 2: Session opened.");
    } catch (error) {
      shareMessage(
        "Error: Make sure you have a valid Dolby.io.io Client Token"
      );
    }
  };
  // Step 3: Define createAndJoinConference() Here
  const createAndJoinConference = async (conferenceAlias, participantName) => {
    if (!VoxeetSDK.session.isOpen()) {
      await openSession(participantName);
    }
    const conferenceOptions = {
      alias: conferenceAlias,
    };
    const joinOptions = {
      constraints: { audio: true, video: true },
    };
    try {
      const conference = await VoxeetSDK.conference.create(conferenceOptions);
      await VoxeetSDK.conference.join(conference, joinOptions);
      shareMessage(
        `Step 3: Conference '${conferenceAlias}' created and joined.`
      );
    } catch (error) {
      console.error(error);
    }
  };
  // Step 4: Define handleConferenceFlow() Here
  const handleConferenceFlow = () => {
    VoxeetSDK.conference.on("streamAdded", (participant, stream) => {
      if (stream.type === "Camera") {
        shareVideo(participant, stream);
      }
    });
    VoxeetSDK.conference.on("streamUpdated", (participant, stream) => {
      if (stream.type === "Camera" && stream.getVideoTracks().length) {
        shareVideo(participant, stream);
      }
    });
    // Step 6: Later in step 6 we will define leave handlers here
    VoxeetSDK.conference.on("streamRemoved", (participant, stream) => {
      const videoNode = document.getElementById(`video-${participant.id}`);
      if (videoNode) {
        videoNode.parentNode.removeChild(videoNode);
      }
    });
    VoxeetSDK.conference.on("left", async () => {
      await VoxeetSDK.session.close();
    });
  };
  // Step 4: Define shareVideo() Here
  const shareVideo = async (participant, stream) => {
    let perspective = "self-view";
    if (VoxeetSDK.session.participant.id !== participant.id) {
      perspective = "remote-view";
    }
    let videoNode = document.getElementById(`video-${participant.id}`);
    if (!videoNode) {
      videoNode = document.createElement("video");
      videoNode.setAttribute("id", `video-${participant.id}`);
      videoNode.setAttribute("height", "100%");
      videoNode.setAttribute("width", "100%");
      videoNode.muted = true;
      videoNode.autoplay = true;
      videoNode.playsinline = true;
      console.log(videoNode);
      const videoContainer = document.getElementById(perspective);
      videoContainer.lastElementChild.replaceWith(videoNode);
      videoContainer.firstElementChild.innerText = participant.info.name;
    }
    navigator.attachMediaStream(videoNode, stream);
    shareMessage(
      `Step 4: Video of participant '${participant.info.name}' started.`
    );
  };
  // Step 6: Define leaveConference() Here
  const leaveConference = async () => {
    try {
      await VoxeetSDK.conference.leave();
      shareMessage("Getting Started: Conference has ended.");
    } catch (error) {
      console.error(error);
    }
  };
  const main = async () => {
    // Configure the application from query parameter values
    const queryParams = new URLSearchParams(window.location.search);
    const name = queryParams.get("name") || "developer";
    const alias = queryParams.get("alias") || "web-sdk-starter";
    // Step 1: Call initializeToken() Here
    const token = await initializeToken();
    // Step 2: Call openSession() Here
    await openSession(name);
    // Step 3: Call createAndJoinConference() Here
    document.getElementById("btn-join").onclick = async () => {
      await createAndJoinConference(alias, name);
    };
    // Step 4: Call handleConferenceFlow() Here
    handleConferenceFlow();
    // Step 5: Create Invite link Here
    document.getElementById("btn-invite").onclick = () => {
      const url = `https://developer.Dolby.io.io/demos/comms-sdk-web-getting-started/index.html?token=${token}&alias=${alias}&name=guest`;
      navigator.clipboard.writeText(url);
      shareMessage(`Share the URL copied to your browser clipboard: ${url}`);
    };
    // Step 6: Call leaveConference() Here
    document.getElementById("btn-leave").onclick = async () => {
      await leaveConference();
    };
  };
  main();
});

Четкое объяснение вышеупомянутого кода

Коммуникационный SDK Dolby.io.io используется приведенным выше кодом JavaScript для запуска видеоконференций и присоединения к ним. Этапы, составляющие код, перечислены ниже.

Шаг 1. Создайте функцию initializeToken() и импортируйте библиотечный модуль onMount Svelte. Эта функция извлекает токен доступа из Dolby.io.io и использует его для инициализации SDK. Изменяя сообщение и цвет элементов пользовательского интерфейса, функция обновляет статус приложения:

const shareMessage = (message) => {
  document.getElementById("message").value = message;
};
const initializeToken = () => {
  const token = Dolby.ioio.getAccessToken();
  VoxeetSDK.initializeToken(
    token,
    () => new Promise((resolve) => resolve(token))
  );
  shareMessage("Step 1: Web SDK initialized.");
  document.getElementById("statusBtn").textContent = "Opened";
  document.querySelector(".round").style.backgroundColor = "green";
  return token;
};

Шаг 2. Определите функцию openSession() . Эта функция открывает уже открытую сессию или запускает новую. Он просто открывает существующий сеанс, если он уже существует. Если нет, создается новый сеанс с указанным именем сеанса:

const openSession = async (sessionName) => {
  try {
    await VoxeetSDK.session.open({ name: sessionName });
    shareMessage("Step 2: Session opened.");
  } catch (error) {
    shareMessage("Error: Make sure you have a valid Dolby.io.io Client Token");
  }
};

Шаг 3. Определите функцию createAndJoinConference() . С помощью этой функции создается новая конференция и в нее добавляется участник. Сначала он открывает сеанс, если он еще не открыт:

const createAndJoinConference = async (conferenceAlias, participantName) => {
  if (!VoxeetSDK.session.isOpen()) {
    await openSession(participantName);
  }
  const conferenceOptions = {
    alias: conferenceAlias,
  };
  const joinOptions = {
    constraints: { audio: true, video: true },
  };
  try {
    const conference = await VoxeetSDK.conference.create(conferenceOptions);
    await VoxeetSDK.conference.join(conference, joinOptions);
    shareMessage(`Step 3: Conference '${conferenceAlias}' created and joined.`);
  } catch (error) {
    console.error(error);
  }
};

Шаг 4. Определите функцию handleConferenceFlow() . Этот метод управляет ходом конференции, отслеживая различные события, такие как streamAdded, streamUpdated, streamRemoved и left. Для отображения видео участников конференции вызывает функцию shareVideo() :

const handleConferenceFlow = () => {
  VoxeetSDK.conference.on("streamAdded", (participant, stream) => {
    if (stream.type === "Camera") {
      shareVideo(participant, stream);
    }
  });
  VoxeetSDK.conference.on("streamUpdated", (participant, stream) => {
    if (stream.type === "Camera" && stream.getVideoTracks().length) {
      shareVideo(participant, stream);
    }
  });
  // Step 6: Later in step 6 we will define leave handlers here
  VoxeetSDK.conference.on("streamRemoved", (participant, stream) => {
    const videoNode = document.getElementById(`video-${participant.id}`);
    if (videoNode) {
      videoNode.parentNode.removeChild(videoNode);
    }
  });
  VoxeetSDK.conference.on("left", async () => {
    await VoxeetSDK.session.close();
  });
};

Шаг 5. Аргументы участника и потока учитываются функцией JavaScript shareVideo(), которая определена в приведенном ниже коде. Эта функция отвечает за показ видео конкретного участника на экране во время видеоконференции или приложения для прямой трансляции. Когда требуется новый видеоэлемент, а его еще нет, функция сначала проверяет, принадлежит ли отображаемое видео текущему участнику или другому участнику. Затем функция прикрепляет поток к новому видеоэлементу, заменяя любые существующие (если они есть) новыми. Наконец, отображается сообщение, объявляющее о начале видео:

const shareVideo = async (participant, stream) => {
  let perspective = "self-view";
  if (VoxeetSDK.session.participant.id !== participant.id) {
    perspective = "remote-view";
  }
  let videoNode = document.getElementById(`video-${participant.id}`);
  if (!videoNode) {
    videoNode = document.createElement("video");
    videoNode.setAttribute("id", `video-${participant.id}`);
    videoNode.setAttribute("height", "100%");
    videoNode.setAttribute("width", "100%");
    videoNode.muted = true;
    videoNode.autoplay = true;
    videoNode.playsinline = true;
    console.log(videoNode);
    const videoContainer = document.getElementById(perspective);
    videoContainer.lastElementChild.replaceWith(videoNode);
    videoContainer.firstElementChild.innerText = participant.info.name;
  }
  navigator.attachMediaStream(videoNode, stream);
  shareMessage(
    `Step 4: Video of participant '${participant.info.name}' started.`
  );
};

Шаг 6. Создайте функцию leaveConference() . Эта функция вызывается, когда участник нажимает кнопку «Выйти». Он останавливает собрание и завершает сеанс:

const leaveConference = async () => {
  try {
    await VoxeetSDK.conference.leave();
    shareMessage("Getting Started: Conference has ended.");
  } catch (error) {
    console.error(error);
  }
};

Шаг 7. Основная функция кода открывает сеанс и изначально инициализирует токен. Кнопки «Присоединиться», «Пригласить» и «Выйти» получают собственные прослушиватели событий. Участник создается и добавляется в конференцию при нажатии кнопки Присоединиться. Кнопка «Пригласить» создает ссылку-приглашение при нажатии на нее. Он выходит из собрания, когда нажимается кнопка «Покинуть». Для управления потоком конференции в конце вызывается функция handleConferenceFlow() :

const main = async () => {
  // Configure the application from query parameter values
  const queryParams = new URLSearchParams(window.location.search);
  const name = queryParams.get("name") || "developer";
  const alias = queryParams.get("alias") || "web-sdk-starter";
  // Step 1: Call initializeToken() Here
  const token = await initializeToken();
  // Step 2: Call openSession() Here
  await openSession(name);
  // Step 3: Call createAndJoinConference() Here
  document.getElementById("btn-join").onclick = async () => {
    await createAndJoinConference(alias, name);
  };
  // Step 4: Call handleConferenceFlow() Here
  handleConferenceFlow();
  // Step 5: Create Invite link Here
  document.getElementById("btn-invite").onclick = () => {
    const url = `https://developer.Dolby.io.io/demos/comms-sdk-web-getting-started/index.html?token=${token}&alias=${alias}&name=guest`;
    navigator.clipboard.writeText(url);
    shareMessage(`Share the URL copied to your browser clipboard: ${url}`);
  };
  // Step 6: Call leaveConference() Here
  document.getElementById("btn-leave").onclick = async () => {
    await leaveConference();
  };
};
main();

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

Тестирование и отладка

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

Тестирование приложения

Чтобы протестировать приложение видеочата, нам нужно убедиться, что у нас есть токен доступа Dolby.io. Чтобы получить этот токен, зайдите в свою панель инструментов и введите токен доступа, как мы обсуждали ранее в этой статье. Получив токен, вставьте его в поле ввода, расположенное в верхнем заголовке приложения видеочата. После вставки токена нажмите кнопку Аутентификация, чтобы предоставить приложению доступ к веб-SDK, который подготовит его к совместному использованию потоков. На следующем изображении показано, куда вводить токен доступа:

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

https://youtu.be/k3OTRMnJM_s

Объяснение важности тестирования и отладки приложений видеочата

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

• Обеспечение стабильности и надежности приложения: тестирование помогает выявить проблемы с приложением до его развертывания для конечных пользователей, гарантируя его стабильность и надежность. Когда приложение видеочата дает сбой или дает сбой во время использования, пользователь может расстроиться и с меньшей вероятностью будет использовать его в будущем.
• Улучшение взаимодействия с пользователем. Тестирование может выявить проблемы с удобством использования, которые могут ухудшить общее впечатление от приложения. Например, низкое качество видео или звука может затруднить общение пользователей друг с другом, что отрицательно скажется на их опыте.
• Обеспечение совместимости: тестирование помогает убедиться, что программа подходит для различного оборудования, программного обеспечения и браузеров. Пользователям может быть сложно или невозможно участвовать в видеоразговорах из-за проблем совместимости, которые вызывают ошибки или трудности.
• Безопасность: Тестирование помогает выявить потенциальные недостатки безопасности в программе, обеспечивая конфиденциальность пользовательских данных и коммуникаций.
• Экономия затрат. Обнаружение и решение проблем на ранних этапах процесса разработки может в конечном итоге сэкономить время и деньги. Исправлять проблемы после того, как они были выпущены, намного дороже, чем делать это в процессе разработки.

Инструменты и методы для тестирования и отладки приложений видеочата

Существует несколько инструментов и методов, которые вы можете использовать при тестировании и отладке приложений видеочата, созданных с использованием Dolby.io и Svelte, чтобы убедиться, что ваша программа работает правильно. Вот несколько идей:

• Инструменты разработчика браузера: Изучите DOM, сообщения журнала консоли и сетевую активность с помощью инструментов разработчика браузера. Эти инструменты можно использовать для отладки и поиска проблем в коде.
• Среды тестирования: чтобы автоматизировать тестирование и убедиться, что ваше приложение работает должным образом, используйте такие среды тестирования, как Jest, Cypress или Selenium. Вы можете использовать эти фреймворки, чтобы проверить наличие ошибок и убедиться, что ваш код работает правильно.
• Svelte REPL: Для тестирования и отладки компонентов Svelte используйте Svelte REPL. Вы можете поиграть со своим кодом и сразу просмотреть результаты с помощью REPL.
• Инструменты отладки. Чтобы найти и исправить ошибки в коде, используйте инструменты отладки, такие как Chrome DevTools или Visual Studio Code. С помощью этих инструментов вы можете выполнять свой код и мгновенно проверять переменные и объекты.

Заключение

Поздравляем! Было очень приятно, что вы прочитали эту статью. В этой статье мы рассмотрели важность высококачественных аудио и визуальных функций в системах видеочата. В нашем обсуждении мы также затронули важную тему о том, как функционируют Svelte и Dolby.io. Мы обсудили, как использовать Dolby.io Web SDK и API в нашем проекте Svelte. В этой статье содержится большой объем информации, необходимой для создания приложения для видеочата с первоклассными аудио- и видеофункциями. Чтобы проверить или развить свои навыки, чтобы расширить свои знания о Dolby.io, я советую применить то, что вы узнали, для создания более простой или сложной программы видеочата.

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .