Создание приложения для видеочата WebRTC с помощью SimpleWebRTC

 $('.submit').on('click', (event) => {
  if (!formEl.form('is valid')) {
    return false;
  }
  username = $('#username').val();
  const roomName = $('#roomName').val().toLowerCase();
  if (event.target.id === 'create-btn') {
    createRoom(roomName);
  } else {
    joinRoom(roomName);
  }
  return false;
});

Далее нам нужно объявить функции createRoomjoinRoom Поместите следующий код перед кодом обработчика кликов:

 // Register new Chat Room
const createRoom = (roomName) => {
  console.info(`Creating new room: ${roomName}`);
  webrtc.createRoom(roomName, (err, name) => {
    showChatRoom(name);
    postMessage(`${username} created chatroom`);
  });
};

// Join existing Chat Room
const joinRoom = (roomName) => {
  console.log(`Joining Room: ${roomName}`);
  webrtc.joinRoom(roomName);
  showChatRoom(roomName);
  postMessage(`${username} joined chatroom`);
};

Создать комнату или присоединиться к ней очень просто: просто используйте методы SimpleWebRTC createRoom и joinRoom .

Возможно, вы также заметили, что у нас есть функции showChatroompostMessage Давайте сделаем это сейчас, вставив следующий код перед вызывающим кодом:

 // Post Local Message
const postMessage = (message) => {
  const chatMessage = {
    username,
    message,
    postedOn: new Date().toLocaleString('en-GB'),
  };
  // Send to all peers
  webrtc.sendToAll('chat', chatMessage);
  // Update messages locally
  messages.push(chatMessage);
  $('#post-message').val('');
  updateChatMessages();
};

// Display Chat Interface
const showChatRoom = (room) => {
  // Hide form
  formEl.hide();
  const html = chatTemplate({ room });
  chatEl.html(html);
  const postForm = $('form');
  // Post Message Validation Rules
  postForm.form({
    message: 'empty',
  });
  $('#post-btn').on('click', () => {
    const message = $('#post-message').val();
    postMessage(message);
  });
  $('#post-message').on('keyup', (event) => {
    if (event.keyCode === 13) {
      const message = $('#post-message').val();
      postMessage(message);
    }
  });
};

Потратьте некоторое время на просмотр кода, чтобы понять логику. Вскоре вы столкнетесь с другой функцией, которую мы не объявили, updateChatMessages Давайте добавим это сейчас:

 // Update Chat Messages
const updateChatMessages = () => {
  const html = chatContentTemplate({ messages });
  const chatContentEl = $('#chat-content');
  chatContentEl.html(html);
  // automatically scroll downwards
  const scrollHeight = chatContentEl.prop('scrollHeight');
  chatContentEl.animate({ scrollTop: scrollHeight }, 'slow');
};

Цель этой функции — просто обновить интерфейс чата новыми сообщениями. Нам нужна еще одна функция, которая принимает сообщения от удаленных пользователей. Добавьте следующую функцию в app.js

 // Receive message from remote user
webrtc.connection.on('message', (data) => {
  if (data.type === 'chat') {
    const message = data.payload;
    messages.push(message);
    updateChatMessages();
  }
});

Вот и вся логика, необходимая для работы чата. Обновите страницу и войдите в систему:

Нажмите кнопку « Создать комнату» . Вы будете приняты к этой точке зрения. Разместите несколько сообщений, чтобы убедиться, что чат работает.

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

Удаленная видеокамера

Как упоминалось ранее, SimpleWebRTC поддерживает несколько пиров. Вот код для добавления удаленных видеопотоков, когда новый пользователь присоединяется к комнате:

 // Remote video was added
webrtc.on('videoAdded', (video, peer) => {
  const id = webrtc.getDomId(peer);
  const html = remoteVideoTemplate({ id });
  if (remoteVideosCount === 0) {
    remoteVideosEl.html(html);
  } else {
    remoteVideosEl.append(html);
  }
  $(`#${id}`).html(video);
  $(`#${id} video`).addClass('ui image medium'); // Make video element responsive
  remoteVideosCount += 1;
});

Вот и все. Извините, если вы ожидали чего-то более сложного. Мы просто добавили прослушиватель событий для videoAddedvideo Он также получает peer

К сожалению, тестирование этого кода невозможно без его запуска на сервере HTTPS. Теоретически вы можете сгенерировать самоподписанный сертификат для своего сервера Express, чтобы запустить приложение во внутренней сети. Но плохая новость заключается в том, что браузеры не позволят вам получить доступ к веб-камере, если сертификат не принадлежит доверенному органу.

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

развертывание

Этот метод, который мы собираемся выполнить, является одним из самых простых способов развертывания приложения NodeJS. Все, что нам нужно сделать, это сначала зарегистрировать аккаунт на now.sh.

Просто выберите бесплатный тариф. Вам нужно будет указать свой адрес электронной почты. Вам также необходимо подтвердить свой адрес электронной почты для активации вашей учетной записи. Затем установите now

 npm install -g now

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

 now --public

Если вы запускаете команду впервые, вас попросят ввести адрес электронной почты. Затем вы получите электронное письмо, которое понадобится вам для подтверждения вашего логина. После проверки вам нужно будет снова выполнить команду now --public Через несколько секунд ваше приложение будет запущено по указанному URL, который будет распечатан на терминале.

Если вы используете встроенный терминал VSCode, просто нажмите ALT и щелкните, чтобы открыть URL в вашем браузере.

Вам нужно разрешить странице доступ к вашей камере и микрофону. Далее создайте комнату, как и раньше. После входа в систему вам необходимо получить доступ к другому устройству — например, к другому ноутбуку или смартфону с фронтальной камерой. Вы также можете попросить друга с подключением к Интернету помочь вам в этом. Просто получите доступ к тому же URL-адресу и введите новое имя пользователя и то же имя комнаты. Удаленный пользователь должен будет нажать кнопку Присоединиться к комнате . В течение нескольких секунд оба устройства должны быть подключены к чату. Если на устройстве нет камеры, это нормально, так как функция чата все равно будет работать.

Вывод

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

Не забывайте, что код, используемый в этом руководстве, доступен на GitHub . Клонируй, делай что-нибудь классное и веселись!