Видеочат как составить

Время на прочтение
8 мин

Количество просмотров 23K

Сегодня, специально к старту нового потока по веб-разработке, поделимся с вами туториалом, из которого вы узнаете, как создать видеочат с помощью JavaScript и NodeJS. Также вы научитесь использовать PeerJS, WebRTC и Socket.io.

---

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

Подготовка к проекту

Вот что вам понадобится:

• NodeJS: посетите официальный веб-сайт Node.js, чтобы загрузить и установить Node;

• NPM: программа NPM устанавливается на ваш компьютер при установке Node.js.

Настройка проекта

Весь код этого проекта можно найти в репозитории GitHub.

1. Создайте пустой каталог с именем video-chat-app.

2. Откройте консоль, перейдите в наш новый каталог и запустите npm init.

3. Заполните необходимую информацию для инициализации нашего проекта.

4. Запустите npm install express ejs socket.io uuid peer. Команда установит все зависимости, необходимые для создания этого приложения.

5. А также в качестве dev-зависимости установите Nodemon. Нужно выполнить npm install-dev nodemon. Это установит nodemon как dev-зависимость.

6. Создайте файл server.js — в этом файле будет храниться вся ваша серверная логика.

Теперь, когда у вас настроен наш проект, вы можете приступить к созданию приложения!

Создание сервера (с Express JS)

Первое, что вам нужно сделать, — это запустить ваш сервер. Мы собираемся использовать для этого Express. Express — это минималистичный веб-фреймворк для Node.js. Express позволяет очень легко создавать и запускать веб-сервер с помощью Node.

Давайте создадим шаблонный файл начального приложения Express.

// server.js
const express = require("express");
const app = express();
const server = require(“http”).Server(app);
app.get("/", (req, res) => {
    res.status(200).send("Hello World");
});
server.listen(3030);

Теперь ваш сервер запущен, вы можете протестировать его, запустив:

> nodemon server.js

Теперь откройте свой браузер и перейдите по адресу: localhost:3000, вы должны увидеть Hello World.

Создание первой страницы

Вместо того чтобы выводить текст, когда кто-то посещает ваш корневой маршрут, вы хотели бы присылать HTML. Для этого нужно использовать EJS (встроенный JavaScript). EJS — это язык шаблонов.

Чтобы использовать EJS в Express, вам нужно настроить ваш шаблонизатор. Для настройки добавьте эту строку кода в файл server.js.

app.set('view engine', 'ejs')

Доступ к EJS по умолчанию осуществляется в каталоге views. Теперь создайте новую папку views в каталоге. В этой папке добавьте файл с именем room.ejs. Пока что думайте о нашем файле room.ejs как о HTML-файле.

Вот как выглядит ваша файловая структура:

|-- video-chat-app
   |-- views
      |-- room.ejs
   |-- package.json
   |-- server.js

Теперь добавьте HTML-код в файл room.ejs.

Как только вы скопируете приведённый выше код, нужно немного поменять app.js:

app.get(‘/’, function (req, res) {
 // OLD CODE
 res.status(200).send("Hello World");
})

Выше приведён старый код, в котором вы отправляете клиенту текст «Hello World!». Вместо этого вы хотите отправить файл room.ejs:

app.get(‘/’, function (req, res) {
 // NEW CODE
 res.render(‘room’);
})

Теперь откройте браузер и перейдите по адресу: localhost:3030, и вы увидите, что отображается файл room.ejs!

Добавление CSS

Выглядит не очень хорошо, правда? Это потому, что в вашем проекте нет стилей. Итак, добавьте немного CSS.

Нам нужно будет добавить новую папку в проект под названием public. В этой папке создайте файлы style.css и script.js. Вот ваша новая файловая структура:

|-- weather-app
   |-- views
      |-- index.ejs
   |-- public
      |-- style.css
      |-- script.js
   |-- package.json
   |-- server.js

Express не даёт доступа к этому файлу по умолчанию, поэтому вам нужно открыть его с помощью следующей строки кода:

app.use(express.static(‘public’));

Этот код позволяет вам получить доступ ко всем статическим файлам в папке “public”. Наконец, вам нужен CSS. Поскольку это не курс по CSS, я не буду вдаваться в подробности, но если вы хотите использовать мои стили, вы можете скопировать их отсюда.

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

Настройка комнат

К настоящему моменту ваш файл server.js должен выглядеть так:

У вас есть один GET-роут и запуск сервера. Однако, чтобы ваше приложение работало, нужно всякий раз, когда новый пользователь посещает ваш роут по умолчанию, перенаправлять его на уникальный URL-адрес. Следует использовать библиотеку uuid для создания случайного уникального URL-адреса для каждой комнаты.

UUID — это библиотека javascript, которая позволяет вам создавать уникальные идентификаторы. В вашем приложении вы будете использовать uuid версии 4 для создания уникального URL. Но сначала импортируйте uuid в server.js. 

const { v4: uuidv4 } = require("uuid");

Теперь нужно использовать uuid для создания случайного уникального идентификатора для каждой комнаты и перенаправлять пользователя в эту комнату.

app.get(“/”, (req, res) => {
    res.redirect(`/${uuidv4()}`);
});

И, прежде чем вы протестируете это, я также хотел добавить страницу для каждой уникальной комнаты, и вы передадите текущий URL этой странице.

app.get(“/:room”, (req, res) => {
    res.render(“room”, { roomId: req.param.room });
});

Вы передали roomId в room.ejs на этом закончили настройку ваших комнат. А теперь, если вы посетите localhost:3030, вы будете перенаправлены на уникальный URL.

Добавление видео пользователя

Вы будете работать с файлом script.js, который вы создали ранее. script.js будет содержать весь клиентский код приложения.

Итак, вот что необходимо сделать: нужно получить видеопоток, а затем добавить этот поток в элемент видео.

let myVideoStream;
const videoGrid = document.getElementById("video-grid");
const myVideo = document.createElement("video");
myVideo.muted = true;
navigator.mediaDevices.getUserMedia({
    audio: true,
    video: true,
})
.then((stream) => {
    myVideoStream = stream;
    addVideoStream(myVideo, stream);
});

Теперь создайтем функцию addVideoStream, которая добавит поток к видеоэлементу.

const addVideoStream = (video, stream) => {
    video.srcObject = stream;
    video.addEventListener("loadedmetadata", () => {
       video.play();
       videoGrid.append(video);
    });
};

Этот код добавит пользовательский поток к видеоэлементу. Вы можете проверить это, посетив localhost:3030, и вы увидите всплывающее окно с видео 

Добавление возможности разрешить другим пользователям транслировать свои видео в потоковом режиме.

Пришло время использовать Socket.io и PeerJS. Для тех, кто не знает, Socket.io позволяет взаимодействовать серверу и клиенту в режиме реального времени.  PeerJS позволяют реализовать WebRTC.

Сначала импортируйте socket.io и peerjs в server.js и прослушайте событие соединения.

// server.js
const express = require(“express”);
const app = express();
const server = require(“http”).Server(app);
const { v4: uuidv4 } = require(“uuid”);
app.set(“view engine”, “ejs”);
const io = require(“socket.io”)(server);
const { ExpressPeerServer } = require(“peer”);
const peerServer = ExpressPeerServer(server, {
    debug: true,
});
app.use(“/peerjs”, peerServer);
app.use(express.static(“public”));
app.get(“/”, (req, res) => {
    res.redirect(`/${uuidv4()}`);
});
app.get(“/:room”, (req, res) => {
    res.render(“room”, { roomId: req.param.room });
});
io.on(“connection”, (socket) => {
    socket.on(“join-room”, (roomId, userId) => {
    socket.join(roomId);
    socket.to(roomId).broadcast.emit(“user-connected”, userId);
    });
});
server.listen(3030);

Теперь ваш сервер прослушивает событие присоединения к комнате. Далее настройте ваш script.js.

// public/script.js
const socket = io(“/”);
const videoGrid = document.getElementById(“video-grid”);
const myVideo = document.createElement(“video”);
myVideo.muted = true;
var peer = new Peer(undefined, {
  path: “/peerjs”,
  host: “/”,
  port: “3030”,
});
let myVideoStream;
navigator.mediaDevices
  .getUserMedia({
  audio: true,
  video: true,
})
.then((stream) => {
  myVideoStream = stream;
  addVideoStream(myVideo, stream);
  peer.on(“call”, (call) => {
    call.answer(stream);
    const video = document.createElement(“video”);
    call.on(“stream”, (userVideoStream) => {
      addVideoStream(video, userVideoStream);
      });
    });
  socket.on(“user-connected”, (userId) => {
      connectToNewUser(userId, stream);
  });
});
const connectToNewUser = (userId, stream) => {
  const call = peer.call(userId, stream);
  const video = document.createElement(“video”);
  call.on(“stream”, (userVideoStream) => {
      addVideoStream(video, userVideoStream);
  });
};
peer.on(“open”, (id) => {
    socket.emit(“join-room”, ROOM_ID, id);
});
const addVideoStream = (video, stream) => {
  video.srcObject = stream;
  video.addEventListener(“loadedmetadata”, () => {
    video.play();
    videoGrid.append(video);
  });
};

Теперь, если в комнату войдёт новый пользователь, вы увидите его видео.

Создание пользовательского интерфейса

С видеочастью закончили. А теперь займитесь стилизацией. Но сначала добавьте контент в файл room.ejs. (Добавьте CDN font-awesome внутри тега head.)

// views/room.ejs
<body>
  <div class="header">
    <div class="logo">
      <h3>Video Chat</h2>
    </div>
  </div>
  <div class="main">
    <div class="main__left">
      <div class="videos__group">
        <div id="video-grid"></div>
      </div>
      <div class="options">
        <div class="options__left">
          <div class="options__button">
            <i class="fa fa-video-camera" aria-hidden="true"></i>
          </div>
        <div class="options__button">
            <i class="fa fa-microphone" aria-hidden="true"></i>
        </div>
       </div>
       <div class="options__right">
         <div class="options__button background__red">
           <i class="fa fa-phone" aria-hidden="true"></i>
         </div>
       </div>
     </div>
    </div>
    <div class="main__right">
      <div class="main__chat_window">
        <ul class="messages"></ul>
     </div>
     <div class="main__message_container">
       <input id="chat_message" type="text" placeholder="Type message here...">
       <div class="options__button">
         <i class="fa fa-plus" aria-hidden="true"></i>
       </div>
     </div>
    </div>
  </div>
</body>

Затем откройте файл style.css и добавьте немного CSS.

@import url(“https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
:root {
  — main-darklg: #1d2635;
  — main-dark: #161d29;
  — primary-color: #2f80ec;
  — main-light: #eeeeee;
  font-family: “Poppins”, sans-serif;
}
* {
  margin: 0;
  padding: 0;
}
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 8vh;
  width: 100%;
  background-color: var( — main-darklg);
}
.logo > h3 {
    color: var( — main-light);
}
.main {
  overflow: hidden;
  height: 92vh;
  display: flex;
}
.main__left {
  flex: 0.7;
  display: flex;
  flex-direction: column;
}
.videos__group {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  background-color: var( — main-dark);
}
video {
  height: 300px;
  border-radius: 1rem;
  margin: 0.5rem;
  width: 400px;
  object-fit: cover;
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
}
.options {
  padding: 1rem;
  display: flex;
  background-color: var( — main-darklg);
}
.options__left {
    display: flex;
}
.options__right {
    margin-left: auto;
}
.options__button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var( — primary-color);
  height: 50px;
  border-radius: 5px;
  color: var( — main-light);
  font-size: 1.2rem;
  width: 50px;
  margin: 0 0.5rem;
}
.background__red {
    background-color: #f6484a;
}
.main__right {
flex: 0.3;
    background-color: #242f41;
}
.main__chat_window {
    flex-grow: 1;
}
.main__message_container {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main__message_container > input {
  height: 50px;
  flex: 1;
  border-radius: 5px;
  padding-left: 20px;
  border: none;
}
#video-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

Вот и всё! Поздравляем, вы успешно создали видеочат! Теперь вы можете развернуть его на Heroku и показать его всему миру. Демо и исходный код.

Это лишь небольшой пример того, какие вещи может делать веб-разработчик, причем в одиночку. Сделать just for fun экспорт музыки в Spotify и получить известность, пока огромная компания долго думает над решением задачи — без проблем. За один вечер набросать и выкатить расширение для браузера, которое упростит жизнь миллионам пользователей — тоже по силам. На что еще способна веб-разработка — зависит только от фантазии программиста. Приходите учиться, чтобы освоить дзюцу веб-разработки и стать настоящим самураем интернета.

Узнайте, как прокачаться в других специальностях или освоить их с нуля:

• Профессия Fullstack-разработчик на Python

• Профессия C++ разработчик

• Профессия Java-разработчик

• Курс “Python для веб-разработки”

Другие профессии и курсы

Империи зла нередко получают лучи ненависти со стороны конечных пользователей. Не смотря на это, Uber частично оплачивает наши поездки, хоть и временно, а Google придал значительное ускорение технологии WebRTC, которая бы так и оставалась проприетарной и сильно платной софтиной для узких целей b2b, если бы не ИЗ.

После появления WebRTC, видеочаты стало делать проще. Появились различные API и сервисы, серверы и фреймворки. В данной статье мы подробно опишем еще один способ разработки видеочата между веб-браузером и нативным Android-приложением

Видеочат в браузере

Классический WebRTC видеочат между браузерами начинается с обмена SDP (session description protocol). Алиса отправляет свой SDP по сети Борису, а Борис отвечает своим. SDP, который представляет собой вот такой конфиг:

o=- 1468792194439919690 2 IN IP4 127.0.0.1
s=-
t=0 0
a=group:BUNDLE audio video
a=msid-semantic: WMS 9nKsWmxMvOQBYaz9xhRffWeWSUbCbnox6aQ4
m=audio 9 UDP/TLS/RTP/SAVPF 111 103 104 9 0 8 106 105 13 110 112 113 126
c=IN IP4 0.0.0.0
a=rtcp:9 IN IP4 0.0.0.0
a=ice-ufrag:kSrQ
a=ice-pwd:4uIyZd/mbVSVe2iMFgC1i3qn
a=fingerprint:sha-256 6B:29:2F:47:EB:38:64:F3:25:CE:BD:E6:B0:3F:A6:FA:55:57:A9:EA:44:0B:7C:45:D2:0D:F4:96:8D:B2:9F:BA
a=setup:actpass
a=mid:audio
a=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level
a=sendonly
a=rtcp-mux
a=rtpmap:111 opus/48000/2
a=rtcp-fb:111 transport-cc
a=fmtp:111 minptime=10;useinbandfec=1
a=rtpmap:103 ISAC/16000
a=rtpmap:104 ISAC/32000
a=rtpmap:9 G722/8000
a=rtpmap:0 PCMU/8000
a=rtpmap:8 PCMA/8000
a=rtpmap:106 CN/32000
a=rtpmap:105 CN/16000
a=rtpmap:13 CN/8000
a=rtpmap:110 telephone-event/48000
a=rtpmap:112 telephone-event/32000
a=rtpmap:113 telephone-event/16000
a=rtpmap:126 telephone-event/8000
a=ssrc:3525514540 cname:drYey7idt605CcEG
a=ssrc:3525514540 msid:9nKsWmxMvOQBYaz9xhRffWeWSUbCbnox6aQ4 09bdb6e7-b4b3-437b-945e-771f535052e3
a=ssrc:3525514540 mslabel:9nKsWmxMvOQBYaz9xhRffWeWSUbCbnox6aQ4
a=ssrc:3525514540 label:09bdb6e7-b4b3-437b-945e-771f535052e3
m=video 9 UDP/TLS/RTP/SAVPF 96 98 100 102 127 97 99 101 125
c=IN IP4 0.0.0.0
a=rtcp:9 IN IP4 0.0.0.0
a=ice-ufrag:kSrQ
a=ice-pwd:4uIyZd/mbVSVe2iMFgC1i3qn
a=fingerprint:sha-256 6B:29:2F:47:EB:38:64:F3:25:CE:BD:E6:B0:3F:A6:FA:55:57:A9:EA:44:0B:7C:45:D2:0D:F4:96:8D:B2:9F:BA
a=setup:actpass
a=mid:video
a=extmap:2 urn:ietf:params:rtp-hdrext:toffset
a=extmap:3 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time
a=extmap:4 urn:3gpp:video-orientation
a=extmap:5 http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01
a=extmap:6 http://www.webrtc.org/experiments/rtp-hdrext/playout-delay
a=sendonly
a=rtcp-mux
a=rtcp-rsize
a=rtpmap:96 VP8/90000
a=rtcp-fb:96 ccm fir
a=rtcp-fb:96 nack
a=rtcp-fb:96 nack pli
a=rtcp-fb:96 goog-remb
a=rtcp-fb:96 transport-cc
a=rtpmap:98 VP9/90000
a=rtcp-fb:98 ccm fir
a=rtcp-fb:98 nack
a=rtcp-fb:98 nack pli
a=rtcp-fb:98 goog-remb
a=rtcp-fb:98 transport-cc
a=rtpmap:100 H264/90000
a=rtcp-fb:100 ccm fir
a=rtcp-fb:100 nack
a=rtcp-fb:100 nack pli
a=rtcp-fb:100 goog-remb
a=rtcp-fb:100 transport-cc
a=fmtp:100 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f
a=rtpmap:102 red/90000
a=rtpmap:127 ulpfec/90000
a=rtpmap:97 rtx/90000
a=fmtp:97 apt=96
a=rtpmap:99 rtx/90000
a=fmtp:99 apt=98
a=rtpmap:101 rtx/90000
a=fmtp:101 apt=100
a=rtpmap:125 rtx/90000
a=fmtp:125 apt=102
a=ssrc-group:FID 2470936840 2969787502
a=ssrc:2470936840 cname:drYey7idt605CcEG
a=ssrc:2470936840 msid:9nKsWmxMvOQBYaz9xhRffWeWSUbCbnox6aQ4 ce9235c5-f300-466a-aadd-b969dc2f3664
a=ssrc:2470936840 mslabel:9nKsWmxMvOQBYaz9xhRffWeWSUbCbnox6aQ4
a=ssrc:2470936840 label:ce9235c5-f300-466a-aadd-b969dc2f3664
a=ssrc:2969787502 cname:drYey7idt605CcEG
a=ssrc:2969787502 msid:9nKsWmxMvOQBYaz9xhRffWeWSUbCbnox6aQ4 ce9235c5-f300-466a-aadd-b969dc2f3664
a=ssrc:2969787502 mslabel:9nKsWmxMvOQBYaz9xhRffWeWSUbCbnox6aQ4
a=ssrc:2969787502 label:ce9235c5-f300-466a-aadd-b969dc2f3664

Например из этого SDP-конфига можно сказать, что предлагается использовать кодеки H.264 и VP8, для видео и Opus для аудио. Кроме этого получить много другой полезной информации для созвона, такой как приоритет кодеков, использование фидбеков fir, nack, pli, профиль и level для кодека H.264 42e01f — Baseline 3.1, и т.д.

В процессе реализации видеочата на нативном WebRTC API желательно понимать что такое SDP, кандидаты (candidates), кодеки, ICE, STUN, TURN и много других страшных слов.

WebRTC, Websockets и SIP

Достаточно часто путаются понятия относительно WebRTC и Websocket. Иногда к этой путанице добавляется еще и SIP.

Точно можно сказать, что WebRTC не имеет прямого отношения ни к Websockets ни к SIP.

Websockets — это лишь удобная возможность передать SDP от Бориса к Алисе. Вместо Websockets мы могли бы использовать plain HTTP или отправить SDP текст по почте. Обмен SDP сообщениями является сигнальной информацией и эти данные могут быть переданы по какому угодно протоколу. Для браузеров дефолтные протоколы передачи данных это: Websockets и HTTP. Поэтому используется Websockets, как более реалтаймовый вариант по сравнению с HTTP. Через Websockets не передается аудио и видео. Только сигнальная информация: текст и команды.

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

С другой стороны, когда мы говорим, например SIP-телефон, мы имеем в виду устройство, которое наряду с протоколом SIP (RFC3261) поддерживает еще десяток другой сетевых спецификаций и протоколов: RTP, SDP, AVPF, и т.д.

Действительно, WebRTC на сетевом уровне использует похожие строительные блоки с теми, что использует SIP-телефон (SRTP, STUN, и.т.д.). Поэтому можно сказать что и WebRTC и SIP-устройства / ПО используют схожую базу технологий. Но называть WebRTC, SIP-ом в браузере было бы некорректно, хотя бы потому, что SIP-а в браузерах из-коробки нет.

WebRTC — это технология, которая имеет три основных функции в части передачи аудио / видео:

• Захват, кодирование и отправка
• Прием декодирование и воспроизведение
• Преодоление NAT и Firewall

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

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

Кроме обмена SDP может потребоваться TURN-сервер, который будет пропускать через себя видеотрафик в том случае если соединение Peer-to-Peer не будет установлено, например если у Алисы или у Бориса выявился достаточно недружелюбный (например симметричный) NAT.

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

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

Подобные задачи, такие как

• подключение трех и более участников
• подключение дополнительных зрителей видеочата
• запись видеочата

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

Как было упомянуто выше, существуют сервисы и серверы, удобные и неудобные API поверх WebRTC API, которые позволяют ускорить разработку видеочатов и работать с более удобными абстракциями, например видеопоток (Stream), комната (Room), публикующий (Publisher), зритель (Subscriber), и т.д.

Например, для создания самого простого видеочата было бы достаточно обменяться названиями потоков. Борис знает поток Алисы. Алиса знает поток Бориса — и видеочат готов:

Пример видеочата в браузере

В этой статье мы покажем как работает Streaming API с Web Call Server 5 — WebRTC сервером для видеочатов и онлайн-трансляций.

Видеочат в действии можно проиллюстрировать в двух следующих скриншотах. Первый участник Alice будет видеть видеочат так:

Второй участник Edward будет видеть видеочат так:

В данном примере происходит следующее:

1. Alice отправила на сервер видеопоток из браузера с именем Alice.
2. Edward отправил на сервер видеопоток из браузера с именем Edward.
3. Alice забрала и проиграла видеопоток с именем Edward.
4. Edward забрал и проиграл видеопоток с именем Alice.

Как видно из этого примера, мы построили видеочат, основываясь лишь на том, что Alice и Edward знают имена потоков друг друга. Нам не пришлось работать напрямую с SDP, PeerConnection, NAT, TURN, и т.д.

Таким образом, видеочат можно реализовать просто передавая имена потоков тем, кто должен их проиграть.

В этой простой концепции вы можете использовать любые front-end и back-end технологии, такие как Jquery, Bootstrap, React, Angular, PHP, Java, .Net, и т.д. И хорошая новость в том, что встраивание поддержки видеопотоков и видеочата никак не влияет на существующее веб-приложение. Вы управляете вашим видеочатом, просто позволяя (или не позволяя) его участникам играть нужные видеопотоки.

Код видеочата в браузере

Теперь покажем как это выглядит в коде. HTML-страница с видеочатом содержит два основных div-элемента:

• localVideo — видео, которое захватывается с веб-камеры
• remoteVideo — видео, которое воспроизводится с сервера

Можно дать этим элементам любые произвольные идентификаторы, например id=»captureVideo» или id=»playbackVideo», но важно, чтобы эти элементы присутствовали на странице.

Рабочая HTML-страница с блоками localVideo и remoteVideo выглядит так:

<html>
<head>
    <script language="javascript" src="https://flashphoner.com/downloads/builds/flashphoner_client/wcs_api-2.0/current/flashphoner.js"></script>
    <script language="javascript" src="video-chat.js"></script>
</head>
<body onLoad="init()">
<h1>Video Chat</h1>
<div id="localVideo" style="width:320px;height:240px;border: 1px solid"></div>
<div id="remoteVideo" style="width:320px;height:240px;border: 1px solid"></div>
<input type="button" value="connect" onClick="connect()"/>
<input type="button" value="publish" onClick="publish('Alice')"/>
<input type="button" value="play" onClick="play('Edward')"/>
<p id="status"></p>
</body>
</html>

Теперь приведем код, который отвечает непосредственно за отправку и воспроизведение видео.

Отправка потока с вебкамеры

При отправке мы используем метод API session.createStream().publish() и указываем для этого потока HTML div-элемент, в котором будет отображаться захваченное с камеры видео localVideo, а также название видеопотока Alice, зная которое можно будет воспроизвести этот видеопоток другим подключившимся клиентом.

session.createStream({
        name: "Alice",
        display: localVideo,
        cacheLocalResources: true,
        receiveVideo: false,
        receiveAudio: false
    }).on(Flashphoner.constants.STREAM_STATUS.PUBLISHING, function (publishStream) {
        setStatus(Flashphoner.constants.STREAM_STATUS.PUBLISHING);
    }).on(Flashphoner.constants.STREAM_STATUS.UNPUBLISHED, function () {
        setStatus(Flashphoner.constants.STREAM_STATUS.UNPUBLISHED);
    }).on(Flashphoner.constants.STREAM_STATUS.FAILED, function () {
        setStatus(Flashphoner.constants.STREAM_STATUS.FAILED);
    }).publish();

Воспроизведение видеопотока с сервера

При воспроизведении мы указываем название потока, который будем воспроизводить и HTML div-элемент remoteVideo, в котором будет идти воспроизведение потока, полученного с сервера. Используется метод API session.createStream().play().

    session.createStream({
        name: "Edward",
        display: remoteVideo,
        cacheLocalResources: true,
        receiveVideo: true,
        receiveAudio: true
    }).on(Flashphoner.constants.STREAM_STATUS.PLAYING, function (playStream) {
        setStatus(Flashphoner.constants.STREAM_STATUS.PLAYING);
    }).on(Flashphoner.constants.STREAM_STATUS.STOPPED, function () {
        setStatus(Flashphoner.constants.STREAM_STATUS.STOPPED);
    }).on(Flashphoner.constants.STREAM_STATUS.FAILED, function () {
        setStatus(Flashphoner.constants.STREAM_STATUS.FAILED);
    }).play();

Во время работы с сервером, HTML-страница будет получать различные статусы, например PLAYING, STOPPED для воспроизведения и PUBLISHING, UNPUBLISHED для публикации потока.

Таким образом, основное, что требуется для работы видеочата — это расположить на веб-странице два div-блока и подключить соответствующие скрипты, которые выполняют stream.play() и stream.publish() по названию потока.

Полный исходный код примера Two Way Streaming доступен для скачивания здесь.

Пример WebRTC видеочата в приложении под Android

Видеочат для Android будет работать в точности по тем же принципам, что и видеочат в браузере. Приложение будет устанавливать соединение с сервером, отправлять видеопоток с камеры Android-устройства,принимать и воспроизводить другой видеопоток с сервера.

Ниже показано как выглядит Android-приложение Streaming Min (аналог примера Two Way Streaming для видеочата в браузере), которое позволяет обмениваться видеопотоками.

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

Код видеочата для приложения под Android

Если для создания видеочата для браузера мы использовали Web SDK, включающее в себя скрипт API flashphoner.js, то для создания полноценного нативного приложения под Android нужно импортировать aar-файл Android SDK в проект.

Чтобы разобраться как это работает, проще всего собрать и запустить пример Streaming Min на базе Android SDK. Все примеры доступны в репозитории github.

1. Скачиваем все примеры

git clone https://github.com/flashphoner/wcs-android-sdk-samples.git

2. Скачиваем SDK

wget https://flashphoner.com/downloads/builds/flashphoner_client/wcs-android-sdk/aar/wcs-android-sdk-1.0.1.25.aar

3. Подцепляем SDK в виде aar-файла к примерам.

cd export
./export.sh /tmp/wcs-android-sdk-1.0.1.25.aar

Обратите внимание, что мы указали скрипту export.sh путь к скачанному файлу wcs-android-sdk-1.0.1.25.aar — Android SDK

В результате в папке export/output будет полностью сконфигурированный проект, который можно открыть в Android Studio

Осталось только собрать примеры с помощью gradle.

1 — Создаём конфигурацию запуска

2 — Выбираем Gradle скрипт

3 — Запускаем сборку

В результате сборки мы должны получить apk-файлы, которые уже можно устанавливать на Android устройство.

В этом примере мы обменялись видеопотоками с браузером. Видеопоток test33 был отправлен с Android устройства на сервер и воспроизведен в браузере. Видеопоток 8880 был отправлен браузером и воспроизведен на Android — устройстве. Таким образом мы получили двухстороннюю аудио и видеосвязь между браузером и приложением для Android.

Если в Web-версии видеочата мы использовали HTML div-элементы для видео, то в Android мы используем рендереры

private SurfaceViewRenderer localRender;
private SurfaceViewRenderer remoteRender;

В localRenderer отображается видео, захваченное с камеры Android-устройства. В remoteRenderer отображается видео, которое пришло с сервера.

1. Создаем подключение к серверу и указываем, что будут использоваться рендереры.

sessionOptions = new SessionOptions(mWcsUrlView.getText().toString());
sessionOptions.setLocalRenderer(localRender);
sessionOptions.setRemoteRenderer(remoteRender);
...
session = Flashphoner.createSession(sessionOptions);
…
session.connect(new Connection());

2. Создаем поток с произвольным именем и публикуем поток на сервер.

StreamOptions streamOptions = new StreamOptions(mPublishStreamView.getText().toString());
publishStream = session.createStream(streamOptions);
...
publishStream.publish();

3. Указываем имя потока при воспроизведении и забираем поток с сервера.

StreamOptions streamOptions = new StreamOptions(mPlayStreamView.getText().toString());
playStream = session.createStream(streamOptions);
...
playStream.play();

Полный код класса StreamingMinActivity.java доступен здесь. А код всего примера Streaming Min для Android доступен в репозитории по этой ссылке.

Web Call Server

В результате мы показали как организовать простой обмен видеопотоками между HTML-страницей в браузере и приложением под Android.

Видеопотоки проходят через Web Call Server, который является одновременно сигналинг-сервером и проксирует через себя аудио и видео трафик.

Web Call Server — это серверный софт, который может быть установлен на Linux — системе на виртуальном сервере или физическом (dedicated) сервере. WCS является WebRTC сервером потокового видео и может обслуживать видеопотоки с браузеров, iOS и Android устройств.

Ссылки

Технологии и протоколы

WebRTC — технология WebRTC
SDP — Session description protocol, RFC
Websocket — Websocket протокол, RFC

Сервер и API для разработки видеочата

Web Call Server — WebRTC сервер потокового видео для видеочатов
Download Web Call Server — установка сервера
Web Call Server on EC2 — запуск образа сервера на Amazon EC2
Web SDK — Web SDK для разработки видеочатов с поддержкой WebRTC
Android SDK — Android SDK для разработки видеочатов с поддержкой WebRTC

Рабочие примеры

Web Two Way Streaming — пример обмена видеопотоками для Web
Android Two Way Streaming — пример приложения обмена видеопотоками для Android

Исходный код примеров

Web Two Way Streaming — код примера обмена видеопотоками для Web
Android Two Way Streaming — код примера обмена видеопотоками для Android

Чем мне больше всего нравится Телеграм, так это постоянным появлением новых полезных функций.

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

И еще в нем внедряют такие возможности, которые не являются для него основными, но реализуют их качественно. А учитывая, что все возможности Телеграма бесплатны (по крайней мере, пока), получается вообще шикардос.

Вот, в конце июля расширили возможности групповых видеозвонков (видеочатов). Теперь смотреть трансляцию может до 1000 зрителей. А 30 участников могут выступать, все зрители будут их видеть и слышать.

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

Тем самым Телеграм зашел на поляну таких сервисов для видеоконференций как Zoom и Microsoft Teams.

Чтобы начать видеочат, сначала нужно создать группу как минимум из двух участников. Для этого нажимаем на «сэндвич» (иконка из трех горизонтальных полосок), выбираем «Создать группу» и добавляем в нее участников из списка своих контактов:

Созданная группа появится в списке чатов. Надо в нее зайти и открыть профиль группы (нажать на ее название), дальше нажать на иконку «три точки» и выбрать «Start voice chat» (начать голосовой чат):

Все участники группы получат приглашение присоединиться к голосовому чату.

В этом режиме участники чата могут общаться друг с другом голосом, как будто они находятся в одной комнате.

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

Или же можно нажать на три точки (2) и выбрать «Транслировать экран», чтобы другие участники чата увидели экран вашего устройства:

Другие участники беседы (напоминаю, не более 30 одновременно) могут сделать то же самое, и все другие будут видеть их самих или их экраны.

Звучит, может быть, немного сложно, но работает очень просто.

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

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

Для этого при просмотре видео нужно нажать на три точки, нажать на «Speed» (скорость) и выбрать нужное значение: 0.2х, 0.5х, 1х, 1.5х, 2х:

Если пригодилось, поставьте лайк.
Интересуетесь технологиями? Подпишитесь на канал!

#телеграм #telegram #видеочат #видеозвонки #видеоконференция #групповое видео

На рынке процветает количество приложений для видеочата. Если вы хотите узнать, как создать альтернативу Chatroulette, вам следует прочитать руководство и выполнить простые шаги.

Важность приложений для видеозвонков и способы их разработки

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

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

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

источник: https://unsplash.com/photos/HJgaV1qjHS0

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

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

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

3 лучших типа приложений для видеочата

Основная цель приложений для видеочата — транслировать видео участникам онлайн-чата с помощью передней или задней камеры.

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

Рынок может предложить широкий спектр приложений для видеозвонков для нескольких целей. Это удобный инструмент, который делает онлайн-общение эффективным.

Создайте платформу видеочата с легкостью

Как сделать видеочат? Прочитав об использовании и типах приложений для видеочата, вы можете задаться вопросом, как создать альтернативу. Это не простой процесс. Если вы хотите создать приложение для видеочата с нуля, необходим комплексный и ответственный подход к процессу.

Исследуйте аудиторию

Как сделать приложение для видеочата? Любой проект всегда начинается с глубокого исследования. Чтобы создать приложение и понять потребности рынка, необходим четкий анализ целевой аудитории. Кто будет использовать приложение? Каков основной клиент инструмента? Если вы хотите, чтобы ваше приложение было полезным для пользователей, начните с анализа аудитории.

Рассчитать бюджет

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

Разработайте стратегию

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

Создать дизайн для приложения

Как сделать приложение для видеочата? То, как выглядит приложение, может многое значить. Если у приложения нет привлекательного и модного дизайна, вряд ли найдутся пользователи, которые его установят или купят. Следовательно, аспект дизайна должен быть приоритетным. Необходимо выбрать тип дизайна, разработать цветовую схему и добавить необходимую анимацию.

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

источник: https://unsplash.com/photos/8HPLpr3hebU

Работа над технической стороной

Дизайн приложения много значит. Одной из основных целей онлайн-приложения является простота и удобство использования. Задача дизайнера UX/UI — разработать эффективную организацию приложения, чтобы сделать пользовательский опыт плодотворным. Однако аспект дизайна не может обойтись без соответствующих технических разработок.

Пользователям нужна простота при работе с задачами. Аспект UX/UI должен сочетаться с эффективной технической организацией приложения. Это сделает пользовательский опыт еще более приятным и полезным.

Заключение

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

Эта статья включена в нашу книгу « 6 проектов JavaScript» . Создавайте проекты, которые познакомят вас с разработкой Modern JavaScript.

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

Если вам нужно немного опыта относительно WebRTC и одноранговой связи, я рекомендую прочитать «Рассвет WebRTC» и « Введение в API getUserMedia» .

Что такое SimpleWebRTC

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

SimpleWebRTC действует как оболочка для реализации WebRTC в браузере. Как вы, возможно, уже знаете, производители браузеров не совсем согласны с одним способом реализации различных функций, а это означает, что для каждого браузера есть своя реализация для WebRTC. Как разработчик, вам придется писать разные коды для каждого браузера, который вы планируете поддерживать. SimpleWebRT действует как оболочка для этого кода. Предоставляемый им API-интерфейс прост в использовании и понимании, что делает его действительно хорошим кандидатом для реализации кросс-браузерного WebRTC.

Создание приложения для видеочата WebRTC

Теперь пришло время испачкать руки, создав приложение. Мы создадим одностраничное приложение, которое будет работать поверх сервера Express.

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

• Установите несколько версий Node.js, используя nvm
• Руководство для начинающих по npm — менеджер пакетов Node

Вам также нужен ПК или ноутбук с веб-камерой. Если нет, вам понадобится веб-камера USB, которую можно прикрепить к верхней части монитора. Вам, вероятно, понадобится друг или второе устройство для проверки удаленных подключений.

зависимости

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

• SimpleWebRTC — библиотека WebRTC
• Semantic UI CSS — элегантный CSS-фреймворк
• jQuery — используется для выбора элементов на странице и обработки событий.
• Handlebars — библиотека шаблонов JavaScript, которую мы будем использовать для генерации HTML для сообщений.
• Экспресс — сервер NodeJS.

Настройка проекта

Зайдите в рабочее пространство и создайте папку simplewebrtc-messenger Откройте папку в VSCode или вашем любимом редакторе и создайте следующие файлы и структуру папок:

 simplewebrtc-messenger
├── public
│   ├── images
│   │   └── image.png
│   ├── index.html
│   └── js
│       └── app.js
├── README.md
└── server.js

Или, если хотите, сделайте то же самое через командную строку:

 mkdir -p simplewebrtc-messenger/public/{images,js}
cd simplewebrtc-messenger
touch public/js/app.js public/index.html .gitignore README.md server.js

Откройте README.md

 # Simple WebRTC Messenger

A tutorial on building a WebRTC video chat app using SimpleWebRTC.

Добавьте строку node_modules.gitignore Создайте файл package.json

 npm init -y

Вы должны получить следующий вывод: