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

发表于 2021-10-25 更新于 2024-11-22 分类于各种折腾 Waline：阅读次数：本文字数： 2.8k 阅读时长 ≈ 3 分钟

🚀基于浏览器 WebRTC 技术实现的实时视频通话、聊天室和屏幕共享应用🚀

什么是 MiroTalk ？

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

什么是 WebRTC ？

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

什么是 Ngrok ？

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

构建镜像

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

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

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

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" ]

解决报错经历的过程：

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

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

# 下载原代码
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/