原文地址:https://alphahinex.github.io/2023/04/09/openvidu/
description: "本文旨在本地內(nèi)網(wǎng)中,搭建一套最小可用的 OpenVidu 體驗(yàn)環(huán)境,支持多方視頻會(huì)議"
date: 2023.04.09 10:26
categories:
- Web
tags: [WebRTC]
keywords: WebRTC, OpenVidu, OpenVidu Call, video conference
OpenVidu
OpenVidu 是一個(gè)基于 Apache 2.0 協(xié)議的開(kāi)源 WebRTC 視頻會(huì)議平臺(tái),主倉(cāng)庫(kù)地址:https://github.com/OpenVidu/openvidu 。
OpenVidu 提供一套簡(jiǎn)單、高效、易于使用的 API 接口,將 WebRTC 的底層操作進(jìn)行了封裝及屏蔽,只需引入 OpenVidu 的服務(wù)端和客戶端處理媒體流,兼容多種平臺(tái)、前后端框架,并配有豐富的文檔、教程及示例應(yīng)用。
OpenVidu 有 CE、Pro、Enterprise 三個(gè)版本,CE 版本是開(kāi)源并免費(fèi)使用的,可以使用大部分 OpenVidu 的重要特性:
Architecture
任何 OpenVidu 應(yīng)用都包含三個(gè)部分:
- OpenVidu 部署(OpenVidu deployment):可以是 OpenVidu CE、Pro、Enterprise 任意版本的部署;
- 應(yīng)用服務(wù)端(Application server):調(diào)用 OpenVidu 部署提供的 REST API,為應(yīng)用客戶端提供服務(wù);
- 應(yīng)用客戶端(Aplication client):可以是瀏覽器、移動(dòng)端或桌面應(yīng)用,使用
openvidu-browser.jsSDK 與 OpenVidu 部署通信。
OpenVidu 支持在云平臺(tái)及自有硬件中部署,Deploying OpenVidu CE on premises 有在自有硬件中部署生產(chǎn)環(huán)境可用的 OpenVidu 的完整文檔。
一套完整的 OpenVidu 部署包括 以下服務(wù):
-
OpenVidu Server (openvidu-server):OpenVidu 平臺(tái)的大腦,負(fù)責(zé)信號(hào)面; -
Kurento Media Server (kms):OpenVidu 平臺(tái)的心臟,負(fù)責(zé)媒體面; -
Coturn (coturn):用于在某些特殊網(wǎng)絡(luò)中允許媒體通信的服務(wù)器; -
Redis (redis): 管理 Coturn 服務(wù)中用戶的數(shù)據(jù)庫(kù); -
Nginx (nginx): 配置 SSL 證書(shū)的反向代理,以允許 OpenVidu Server 和應(yīng)用都可以通過(guò)標(biāo)準(zhǔn)的 https 端口(443)提供服務(wù); -
Videoconference Application (app): OpenVidu Call 應(yīng)用或其他應(yīng)用,可選。
本文旨在本地內(nèi)網(wǎng)中,搭建一套最小可用的 OpenVidu 體驗(yàn)環(huán)境,支持多方視頻會(huì)議,故縮減上述完整部署中的 Coturn 和 Redis 服務(wù),使用包含了 OpenVidu Server 和 Kurento Media Server 的單容器鏡像 openvidu/openvidu-dev:2.26.0 部署,并使用 OpenVidu Call 應(yīng)用通過(guò) https://IP 體驗(yàn)多方視頻通話。
僅使用 localhost 或 127.0.0.1 的本地開(kāi)發(fā)環(huán)境,可以直接使用 HTTP,但在需要通過(guò) IP 或域名訪問(wèn)的場(chǎng)景下,WebRTC 需要安全連接才能工作,故部署結(jié)構(gòu)中需增加一個(gè)反向代理組件,變?yōu)槿?下圖 所示:
部署
接下來(lái)就按上圖進(jìn)行本地體驗(yàn)環(huán)境部署。
OpenVidu deployment
要在本機(jī)外環(huán)境訪問(wèn) OpenVidu Server,需要在啟動(dòng)時(shí) 指定 IP 地址:
- Linux:
ip -4 -oneline route get 1.0.0.0 | grep -Po 'src \K\S+' - MacOS:
ipconfig getifaddr "$(route -n get 1.0.0.0 | grep 'interface' | awk '{print $2}')"
以 MacOS 環(huán)境為例,可使用如下命令啟動(dòng)包含 OpenVidu Server 和 Kurento Media Server 的 openvidu-dev 容器,完成 OpenVidu deployment 組件的部署:
# Run OpenVidu deployment container with new env variable
# WARNING: this container is not suitable for production deployments of OpenVidu
# Visit https://docs.openvidu.io/en/stable/deployment
docker run -p 4443:4443 --rm \
-e OPENVIDU_SECRET=MY_SECRET \
-e DOMAIN_OR_PUBLIC_IP=$(ipconfig getifaddr "$(route -n get 1.0.0.0 | grep 'interface' | awk '{print $2}')") \
-e SERVER_PORT=4443 \
-e HTTPS_PORT=443 \
-e FORCE_PLAIN_HTTP=false \
-d \
openvidu/openvidu-dev:2.26.0
其他相關(guān)操作:
# 查看日志
docker logs -f $(docker ps -a | grep openvidu-dev | awk '{print $1}')
# 停止并刪除容器
docker rm -f $(docker ps -a | grep openvidu-dev | awk '{print $1}')
Application server & client
可通過(guò) OpenVidu Call 應(yīng)用來(lái)驗(yàn)證 OpenVidu 服務(wù)部署結(jié)果。
openvidu/openvidu-call:2.26.0 鏡像中包含了 Node 版的前后端應(yīng)用,可一步完成部署架構(gòu)圖中的 Application server 和 Application client 組件部署。
docker run -p 5000:5000 --rm \
-e OPENVIDU_URL=https://$(ipconfig getifaddr "$(route -n get 1.0.0.0 | grep 'interface' | awk '{print $2}')") \
-e OPENVIDU_SECRET=MY_SECRET \
-d \
openvidu/openvidu-call:2.26.0
此時(shí),可以通過(guò) http://IP:5000 訪問(wèn)到 OpenVidu Call 應(yīng)用界面。WebRTC 相關(guān)的語(yǔ)音、視頻等功能需部署 Proxy 組件后通過(guò) HTTPS 協(xié)議訪問(wèn)才能正常使用。
其他相關(guān)操作:
# 查看日志
docker logs -f $(docker ps -a | grep openvidu-call | awk '{print $1}')
# 停止并刪除容器
docker rm -f $(docker ps -a | grep openvidu-call | awk '{print $1}')
Proxy
Proxy 組件的作用,是允許通過(guò) HTTPS 訪問(wèn)應(yīng)用。本地環(huán)境可以借助 openvidu-tutorials/certs 中提供的證書(shū),以及將 openvidu-tutorials/openvidu-angular/nginx.conf 第 12 行 端口由 4200 修改為 5000:
upstream client-application {
server host.docker.internal:5000;
}
將證書(shū)文件放在 certs 路徑下,并在同級(jí)路徑放置調(diào)整后的 nginx.conf 文件后,可使用如下命令完成 Proxy 組件部署:
# At the root path of the tutorial
# For example: /home/user/openvidu-tutorials/openvidu-hello-world
docker run --rm -p 443:443 \
--add-host=host.docker.internal:host-gateway \
-v $PWD/nginx.conf:/etc/nginx/nginx.conf:ro \
-v $PWD/certs:/etc/nginx/certs:ro \
-d \
nginx
如果 docker 版本小于 20.x,執(zhí)行上述命令時(shí)可能會(huì)遇到 Error response from daemon: invalid IP address in add-host: "host-gateway". 的報(bào)錯(cuò),此時(shí)可參照 #2664 中方式為 host.docker.internal 域名設(shè)置對(duì)應(yīng)的 IP,如:
# At the root path of the tutorial
# For example: /home/user/openvidu-tutorials/openvidu-hello-world
docker run --rm -p 443:443 \
--add-host=host.docker.internal:$(ipconfig getifaddr "$(route -n get 1.0.0.0 | grep 'interface' | awk '{print $2}')") \
-v $PWD/nginx.conf:/etc/nginx/nginx.conf:ro \
-v $PWD/certs:/etc/nginx/certs:ro \
-d \
nginx
其他相關(guān)操作:
# 查看日志
docker logs -f $(docker ps -a | grep nginx | awk '{print $1}')
# 停止并刪除容器
docker rm -f $(docker ps -a | grep nginx | awk '{print $1}')
實(shí)際效果
完成所有組件部署后,可通過(guò) https://IP 來(lái)訪問(wèn) OpenVidu Call 應(yīng)用,登錄用戶名 admin,密碼為上面啟動(dòng) docker 容器傳入的 OPENVIDU_SECRET 環(huán)境變量的值 —— MY_SECRET:
附錄
附可直接使用的完整 nginx.conf 內(nèi)容:
events {
worker_connections 512;
}
http {
upstream openvidu-deployment {
server host.docker.internal:4443;
}
upstream server-application {
server host.docker.internal:5000;
}
upstream client-application {
server host.docker.internal:5000;
}
server {
listen 443 ssl;
ssl_certificate /etc/nginx/certs/cert.pem;
ssl_certificate_key /etc/nginx/certs/key.pem;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Proto https;
proxy_headers_hash_bucket_size 512;
proxy_redirect off;
# Websockets
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
# OpenVidu deployment API
location /openvidu/api {
proxy_pass http://openvidu-deployment;
}
# OpenVidu WebSocket
location ~ /openvidu$ {
proxy_pass http://openvidu-deployment;
}
# Server application requests
location /api/ {
proxy_pass http://server-application;
}
# Client application requests
location / {
proxy_pass http://client-application;
}
}
}