基于WebRtc的实时音视频通话，支持安卓和WEB端，提供缩放、冻屏、拍照、录像等功能。

这只是一个半成品，部分功能还没有完善，后续会结合不同的要求进行改造。

能够用于点对点交流，远程检查等场景。

开源地址：基于WebRtc的实时音视频通话，支持安卓和WEB端，提供缩放、冻屏、拍照、录像等功能。

#### 直接使用

1.下载dsrc.apk,安装到手机。

2.浏览器打开：https://180.76.108.84:5100

#### 软件架构说明

1. web端：基于vue+vite+ant-design-vue+webrtc+socket.io实现
2. 安卓端：基于android+webrtc+websocket实现
3. 信令服务端：基于node.js+WebSocket实现
4. 录制服务端：基于node.js实现
5. stun/turn服务端：采用coturn

#### 安装教程

1. 环境说明：采用Ubuntu 24.04.1 LTS

   1）更新：sudo apt update

   2）配置防火墙：

```
   sudo ufw allow 3478/tcp
   sudo ufw allow 5100/tcp
   sudo ufw allow 5101/tcp
   sudo ufw allow 5173/tcp
   sudo ufw allow 5349/tcp

   sudo ufw allow 3478/udp
   sudo ufw allow 5349/udp
   sudo ufw allow 52000:52500/udp
```

2. 安装node和npm：

   下载、解压、移动、配置、生效、检验

   ```
   wget https://nodejs.org/dist/v24.8.0/node-v24.8.0-linux-x64.tar.xz
   tar -xvf node-v24.8.0-linux-x64.tar.xz
   sudo mv node-v24.8.0-linux-x64 /usr/local/node
   echo 'export PATH="/usr/local/node/bin:$PATH"' >> ~/.bashrc
   source ~/.bashrc
   node -v   
   npm -v
   ```

 
3. 安装nginx

   ```
   sudo apt install nginx
   systemctl status nginx
   ```

   
4. 安装web应用

1) 在源码目录web下编译程序：

```
   npm run build
```

 

2) 会在WEB目录下生成dist目录，内容如下：

 

   3)将dist目录下的内容全部复制到/usr/local/dsrc/web下。

   4)配置nginx

```
cd /etc/nginx
cp nginx.conf nginx.conf.bak
rm nginx.conf
nano nginx.conf
```

nginx.conf文件如下：

```
# 定义运行Nginx的用户和用户组
user www-data;
worker_processes auto; # 自动设置工作进程数，通常等于CPU核心数

# 错误日志路径和级别
error_log /var/log/nginx/error.log notice;
pid /var/run/nginx.pid;

# 事件模块配置
events {
    worker_connections 1024; # 每个工作进程的最大连接数
    use epoll; # 使用epoll事件模型（Linux）
    multi_accept on; # 允许一个工作进程同时接受多个新连接
}

# HTTP服务器配置
http {
    # MIME类型包含
    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    # 日志格式
    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';

    access_log /var/log/nginx/access.log main;

    # 基本性能优化设置
    sendfile on; # 启用sendfile系统调用
    tcp_nopush on; # 在sendfile模式下，启用TCP_CORK
    tcp_nodelay on; # 禁用Nagle算法
    keepalive_timeout 65; # 保持连接超时时间
    types_hash_max_size 2048;

    # Gzip压缩配置
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/json
        application/javascript
        application/xml+rss
        application/atom+xml
        image/svg+xml;

    # 上游服务器配置（如果有多个后端实例）
    # upstream backend {
    #     server 180.76.108.84:5101;
    # }

    # Vue3 + Vite 应用服务器配置
    server {
        # 监听5173端口并启用HTTPS
        listen 5173 ssl;
        server_name _; # 匹配所有域名，也可以替换为具体IP或域名

        # SSL证书配置 - 使用您提供的路径
        ssl_certificate /usr/local/dsrc/server/turn_cert.pem;
        ssl_certificate_key /usr/local/dsrc/server/turn_key.pem;
  
        # SSL协议和密码套件配置
        ssl_protocols TLSv1.2 TLSv1.3;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_prefer_server_ciphers on;
        ssl_session_cache shared:SSL:10m;
        ssl_session_timeout 10m;

        # 安全头设置
        add_header X-Frame-Options "SAMEORIGIN" always;
        add_header X-XSS-Protection "1; mode=block" always;
        add_header X-Content-Type-Options "nosniff" always;
        add_header Referrer-Policy "no-referrer-when-downgrade" always;
        add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'; connect-src 'self' http: https: data: blob: wss: wss://180.76.108.84:5100 'unsafe-inline';" always;

        # 前端静态资源服务 - Vue3应用
        location / {
            root /usr/local/dsrc/web; # 您的dist目录路径
            index index.html index.htm;
            try_files $uri $uri/ /index.html; # 支持Vue Router的history模式
  
            # 缓存控制
            location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
                expires 1y;
                add_header Cache-Control "public, immutable";
            }
        }

        # API请求代理配置 - 解决跨域问题
        location /api/ {
            proxy_pass http://180.76.108.84:5101/api/;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            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_cache_bypass $http_upgrade;
  
            # 超时设置
            proxy_connect_timeout 30s;
            proxy_send_timeout 30s;
            proxy_read_timeout 30s;
        }

        # 健康检查端点
        location /health {
            access_log off;
            return 200 "healthy\n";
            add_header Content-Type text/plain;
        }
    }

    # 可选的：重定向HTTP到HTTPS（如果也需要监听HTTP端口）
    # server {
    #     listen 80;
    #     server_name _;
    #     return 301 https://$server_name:5173$request_uri;
    # }
}

```

5）ctrl+X，保存退出
6）重新装载nginx

```
nginx -s reload
```

7）测试：打开浏览器，输入https://你的IP:5173

可能会出现证书不安全，因为是自签名证书，点击信任即可。

点击高级

点击继续访问即可。

5.安装信令服务器和录制服务器
1）建立目录：

```
   mkdir /usr/local/dsrc
   mkdir /user/local/dsrc/server
   mkdir /user/local/dsrc/web
```

   2）赋值文件：将signal.js和rec.js以及turn_cert.pem、turn_key.pem\package.json（在源码的server目录下）复制到/user/local/dsrc/server目录

   3）安装依赖：

```
   cd /usr/local/dsrc/server
   npm install
```

   

    4）测试运行：

```
    node signal
```

```
node rec
```

6.安装coturn

<<<<<<< HEAD
1）安装

```
sudo apt install coturn
systemctl status coturn
```

2）配置

```
sudo cp /etc/turnserver.conf /etc/turnserver.conf.backup
rm /etc/turnserver.conf
nano /etc/turnserver.conf
```

turnserver.conf内容如下：

```
# 基础配置
listening-port=3478
tls-listening-port=5349
listening-ip=0.0.0.0
#你的ip
external-ip=180.76.108.84
#设置为服务器内网IP
relay-ip=192.168.16.2
#你的IP或域名 
realm=180.76.108.84

# 认证配置
user=web1:abc123
user=zhyi:abc123
lt-cred-mech

# Nonce 相关设置（解决 438 错误）
stale-nonce=600

# 会话生命周期设置（解决会话断开）
#min-allocate-lifetime=600
max-allocate-lifetime=3600
channel-lifetime=600

# 性能优化
relay-threads=8
max-port=52500
min-port=52000

# 安全配置
cli-password=your_secure_password_here
cert=/usr/local/dsrc/server/turn_cert.pem
pkey=/usr/local/dsrc/server/turn_key.pem

# 安全配置 - 限制TLS版本和密码套件
no-tlsv1
no-tlsv1_1
```

3)重新启动

```
systemctl restart coturn
systemctl status coturn
```

4）测试

（1）手机安装apk

（2）启动WEB端

（3）查看信令服务器（在服务器上/usr/local/dsrc/server目录下运行：node signal）包含relay的地址即可，要求双向都包含relay地址，其它的地址还有Host和srflx。

至此，就全部完成了。

7.自行启动，安装PM2

nginx和coturn都能随开机自行启动，但signal和rec不行自行启动，可安装PM2

1)安装

```
npm install pm2 -g
```

2)配置

pm2 start /usr/local/dsrc/server/signal.js --name sig
pm2 start /usr/local/dsrc/server/rec.js --name rec
pm2 save

3)测试

```
pm2 logs sig
pm2 logs rec
```

#### 使用说明

1.总体功能
目前只支持点对点视频通讯，通过房间号区分，一个房间两个客户端(一个WEB，一个安卓)
安卓端是被动连接，WEB端是主动连接。

2.安卓端
1）初始页：

这里可以修改参数。

2）通话页：

（1）画面：显示当前时间、分辨率和帧率，这个是在视频中，对方也能看到。

    显示状态：包括摄像头和rtc通讯，这个是本地，对方看不到。

（2）按钮：关闭摄像头：将摄像头关闭，画面黑屏或冻住。

    切换摄像头：在前后摄像头切换。

结束通话：退出当前通话。

（3）操作：

手机旋转：支持手机旋转，只要手机旋转没有锁定，当旋转手机时，画面会跟随旋转。

手指缩放：双指触控屏幕时，会缩放本地视频。

3.WEB端

1）WEB端只给出了组件应用，具体需要结合业务场景使用

```
const param=ref({
  user: "NEWSWEB4",
  room: "100",
  ip: "180.76.108.84"
}) 

</script>

<template>
  <div>
    <videoView class="view" :param="param"/>
  </div>
</template>
```

参数：企业名称、房间号、信令服务器地址、

2）界面功能

（1）绘制工具：目前没有完整实现，只提供了两种实现

一是标记：鼠标点击视频给出一个三角形标记，二是画线：鼠标在视频移动会画一条直线，均会通过性灵服务器传送给安卓端。

清除按钮：清除当前的绘制。

（2）缩放控制按钮：

放大：通知安卓端将视频放大。

缩小：通知安卓端将视频缩小。

还原：将视频还原大小。

缩放信息会同步显示在右上角的分辨率信息栏。

（3）冻屏

状态按钮：冻屏或解除冻屏。!

（4）拍照、录像

WEB端

录制端

录制文件在/usr/local/dsrc/sever/uploads目录下，照片在photo子目录下

录制视频可以改为全程录制，录制过程可以缩放、冻屏、拍照等操作，绘制内容不会录制到视频中，如果需要可以改造。