Всем привет, сегодня мы узнаем, как создать простой индивидуальный видео / аудиочат, используя NodeJS и веб-сокеты в качестве Backend, а также API HTML5 и JavaScript в качестве Frontend. Большинство современных браузеров, таких как Mozilla Firefox, Google Chrome, Opera, поддерживают WebRTC (связь через Интернет в реальном времени). Миссия состоит в том, чтобы включить в браузеры полнофункциональные и высококачественные приложения RTC. Давайте начнем.
Как это работает?
Как правило, приложению WebRTC требуются следующие вещи:
- Аудио или видео потоки
- Сетевая информация
- Средство связи для сообщения об ошибках (если таковые имеются), о начале, остановке или завершении сеансов.
- Плеер для аудио / видео потоков
Начнем с создания веб-сервера, который обслуживает HTML и JavaScript.
const express = require('express'),
http = require('http'),
app = express();
// use express static to deliver resources HTML, CSS, JS, etc)
// from the public folder
app.use(express.static('public'));
http.createServer(options, app).listen(3355);
console.log("The HTTP server is up and running");
Здесь вы можете видеть, что мы настроили базовый http-сервер, теперь нам нужен этот сервер для обработки сеансов сокетов, поэтому мы будем использовать модуль ws для их обработки. Давайте добавим еще немного кода и объединим их оба, результат будет примерно таким.
const express = require('express'),
ws = require('ws'),
http = require('http'),
app = express();
// use express static to deliver resources HTML, CSS, JS, etc)
// from the public folder
app.use(express.static('public'));
var httpServer = http.createServer(options, app).listen(3355);
console.log("The HTTP server is up and running");
var wsServer = new ws.Server({server: httpServer});
wss.on('connection', function (client) {
console.log("A new client was connected.");
client.on('message', function (message) { // incoming client
wss.broadcast(message, client);
});
});
// Define a method to broadcast to all clients
wss.broadcast = function (data, exclude) {
var i = 0, n = this.clients ? this.clients.length : 0, client = null;
if (n < 1) return;
for (; i < n; i++) {
client = this.clients[i];
if (client === exclude) continue;
if (client.readyState === client.OPEN) client.send(data);
else console.error('Error: the client state is ' + client.readyState);
}
};
До сих пор мы научились создавать сервер. Если вы заметили код, вы увидите, что все, что получено от клиента, будет отправлено обратно другим клиентам с использованием широковещательной рассылки. Наша следующая задача - создать UI (простой UI) и javascript для обработки сообщений / данных сокета. Давайте создадим для этого базовый HTML. Нам потребуется пара тегов видео, один для собственного видео, а другой для получателя / вызывающего абонента.
<!DOCTYPE html>
<html>
<head>
<script src="webrtc.js"></script>
<title>WebRTC Simple Video-Chat</title>
</head>
<body>
<video id="remoteVideo" autoplay></video>
<video id="localVideo" autoplay muted></video>
<input id="videoCallButton" type="button" disabled value="Video Call"/>
<input id="endCallButton" type="button" disabled value="End Call"/>
<script>window.addEventListener("load", pageReady);</script>
</body>
</html>
Итак, у нас уже есть HTML и настройка сервера, теперь пора заняться магией JavaScript, и приложение будет готово. Начнем с метода page Ready,
function pageReady() {
// check browser WebRTC availability
if(navigator.getUserMedia) {
videoCallButton = document.getElementById("videoCallButton");
endCallButton = document.getElementById("endCallButton");
localVideo = document.getElementById('localVideo');
remoteVideo = document.getElementById('remoteVideo');
videoCallButton.removeAttribute("disabled");
videoCallButton.addEventListener("click", initiateCall);
endCallButton.addEventListener("click", function (evt){ wsc.send(JSON.stringify({"closeConnection": true }));
});
} else {
alert("Sorry, your browser does not support WebRTC!")
}
};
Посмотрите внимательно, мы определили две кнопки «Позвонить» и «Завершить звонок». Два видео «Локальное видео» и «Удаленное видео». Нажатие на кнопку «Вызов» инициирует вызов, а «Завершить вызов» завершает вызов. Как только соединение будет установлено, будут воспроизводиться видео. Теперь вы можете подумать, что мы не определили, как будет воспроизводиться видео, поскольку сейчас нет контента. Прежде чем мы перейдем к следующему разделу, давайте обобщим некоторые методы, названия которых различаются в зависимости от движка браузера. Взгляните на строку ниже.
navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia; window.RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; window.RTCIceCandidate = window.RTCIceCandidate || window.mozRTCIceCandidate || window.webkitRTCIceCandidate; window.RTCSessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription || window.webkitRTCSessionDescription;
Вы увидите, что у методов разные имена, но функции одинаковы. getUserMedia получает мультимедийные данные (аудио, видео) с компьютера клиента / браузера. RTCPeerConnection отвечает за сеанс между двумя удаленными узлами. RTCIceCandidate является особенным, поскольку он извлекается с определенных нами серверов ICE (см. Подробнее о ICE Server). В то время как RTCSessionDescriptor описывает связь между двумя и то, как они настроены.
Заключение
Теперь вы знаете, как интегрировать функции видеозвонков и чата с WebRTC, Node.js. Конечно, для создания приложения для видеочата доступно множество языков программирования. Однако есть определенные языки, такие как JavaScript, которые могут предоставлять точное приложение для видео / голосового чата в соответствии с ожиданиями пользователя.
На сегодняшнем крупномасштабном рынке WebRTC Node.js - идеальный выбор для создания идеального приложения для видеочата с поддержкой WebRTC. Это приложение может обеспечить пользователям огромную производительность, создает API-интерфейсы и обрабатывает параллельные запросы, а также требует масштабируемости для создания успешных приложений видео / голосового чата на Android, iOS и в Интернете.
Итак, давайте исследуем эти технологии и интегрируем функции видеочата в ваш проект, который позволяет пользователям обмениваться данными в реальном времени и передавать потоковое видео.
Первоначально опубликовано на https://rydotinfotech.com/ 16 июня 2020 г.
