MiroTalk基于浏览器的实时视频通话程序

什么是 MiroTalk ?

MiroTalk 是基于浏览器 WebRTC 技术实现的实时视频通话、聊天室和屏幕共享软件,是 100% 免费和开源的 github 项目。

什么是 WebRTC ?

WebRTC 名称源自网页即时通信(英语:Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的 API 。它于 2011 年 6 月 1 日开源并在 GoogleMozillaOpera 支持下被纳入万维网联盟的 W3C 推荐标准。【百度百科】

什么是 Ngrok ?

ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。服务器根据客户端的请求,从其关系的一组或多组后端服务器(如 Web 服务器)上获取资源,然后再将这些资源返回给客户端,客户端只会得知反向代理的 IP 地址,而不知道在代理服务器后面的服务器集群的存在。【百度百科】

构建镜像

如果你不想自己构建,可以跳过,直接阅读下一章节

官网提供了 Dockerfiledocker-compose.yml,从 docker-compose.yml 看是可以直接运行而不用预先构建

Dockerfile 在构建过程中各种报错,应该是跟网络有关

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
FROM node:14-alpine 
# https://hub.docker.com/_/node

WORKDIR /usr/src/app

# 尝试使用 https 而不是 http
RUN sed -i -e 's/http:/https:/' /etc/apk/repositories

# 使用阿里镜像 https://mirrors.aliyun.com
#RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories

RUN apk add --no-cache \
bash \
vim

COPY package*.json ./
COPY .env.template ./.env

RUN npm install

COPY . .

EXPOSE 3000

CMD [ "npm", "start" ]

解决报错经历的过程:

  1. Dockerfile 中增加 RUN sed -i -e 's/http:/https:/' /etc/apk/repositories,尝试使用 https 而不是 http,问题依旧;
  2. Dockerfile 中增加 RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories,将源更换为阿里,问题依旧;
  3. 构建时增加 --network=host,变成 docker build -t wbsu2003/mirotalk:v1 . --network=host,不再报错,顺利完成构建

构建镜像和容器运行的基本命令如下👇

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 下载原代码
git clone https://github.com/miroslavpejic85/mirotalk.git

# 如果 github 慢或者访问不了
git clone https://hub.fastgit.org/miroslavpejic85/mirotalk.git

# 进入目录
cd mirotalk

# 构建镜像
docker build -t wbsu2003/mirotalk:v1 . --network=host

# 生成容器(使用ngrok)
docker run -it --name=mirotalk \
-p 3330:3000 \
-e NGROK_ENABLED=true \
-e NGROK_AUTH_TOKEN=<Your ngrok Authtoken> \ # 你的 ngrok Authtoken
wbsu2003/mirotalk:v1

ngrok

前期准备

镜像中内置了 ngrok,打开 https://ngrok.com ,如果没有账号可以注册一个,然后点 Get started for free

获取你的 Authtoken

安装

在群晖上以 Docker 方式安装。

在注册表中搜索 mirotalk ,选择第二个 wbsu2003/mirotalk,版本选择 latest

端口

端口不冲突就行

本地端口 容器端口
3330 3000

环境

可变
NGROK_ENABLED 是否启用 ngrok
NGROK_AUTH_TOKEN ngrok 获取的 Authtoken
API_KEY_SECRET 默认为 mirotalk_default_secret

运行

打开日志,找到 server_tunnel 后面的地址

在浏览器中打开这个地址就能看到主界面

TRY NOW 新建一个呼叫

默认房间号是随机生成的,你可以自己起名字

需要 https 协议才能让浏览器使用音视频设备,如果你用 http://群晖IP:3330 访问会一直卡在 Loading,浏览器中的错误是 net::ERR_CERT_COMMON_NAME_INVALID

允许,否则不会有图像和声音

给自己取个名字,然后 Join meeting

接下来就可以邀请别人入会了

用另外一台机器打开发送的链接

分享支持 整个屏幕窗口Chrome 标签页

屏幕共享

白板

录像成功

停止时会自动下载,格式是 webm

会议需要的常用功能都能在 MiroTalk 找到,让老苏很意外的是居然还有游戏

大家可以自己安装体验一下,如果不想安装又想体验,可以去官方提供的地址👇

  • https://mirotalk.herokuapp.com
  • https://mirotalk.up.railway.app

遗留问题

ngrok 免费版在 docker 每次重启之后,生成的域名是变化的,所以老苏尝试用 frp 来做反代,但是非常奇怪的卡死在 Loading

其实老苏在用 frp 之前一直用的就是 ngrok

看了一下浏览器中的错误是 net::ERR_CONNECTION_REFUSED

老苏的域名没有备案,所以是需要 域名+端口 访问的

但是 MiroTalk 会吃掉后面的端口,不清楚导致的原因,所以只能先这么地了

还可以考虑一键部署到 Heroku 或者 Railway

参考文档

miroslavpejic85/mirotalk: 🚀 Powered by WebRTC, Real-time video call, chat room and screen sharing entirely browser based 🚀
地址:https://github.com/miroslavpejic85/mirotalk

Numb STUN/TURN Server
地址:https://numb.viagenie.ca/