webrtc视频会议学习(三)

文章目录

关联:

webrtcP2P音视频通话(一)

webrtcP2P音视频通话(二)

webrtc视频会议学习(三)

源码

  • WebRTC视频 - B站

  • 源码:video-meeting 在gitee的代码

  • vite + vue3本地测试配置ssl自签名证书,开启https,并可以开启ws,才知道这样可以同时转发本地的https和wss请求

  • 实现在两个PC之间在公网上通过浏览器视频会议,需要搭建coturn服务器,测试手机浏览器暂不可用。

搭建

coturn服务器

  1. 在服务器上,搭建coturn服务器,参考:WebRTC实现双端音视频聊天(Vue3 + SpringBoot)

    下载coturn的源码

    解压,
    /configure --prefix=/usr/local/coturn
    make && make install

    使用下面的配置文件完全替换掉/usr/local/coturn/etc/turnserver.conf配置文件

    java 复制代码
    # 网卡名
    relay-device=eth0
    #内网IP
    listening-ip=172.17.23.234
    listening-port=3478
    #内网IP,加密访问配置
    relay-ip=172.17.23.234
    tls-listening-port=5349
    # 外网IP
    external-ip=119.23.61.24
    relay-threads=500
    #打开密码验证
    lt-cred-mech
    cert=/usr/local/coturn/etc/turn_server_cert.pem
    pkey=/usr/local/coturn/etc/turn_server_pkey.pem
    min-port=49152
    max-port=65535
    #设置用户名和密码,创建IceServer时使用
    user=user:123456
    # 外网IP绑定的域名
    realm=119.23.61.24
    # 服务器名称,用于OAuth认证,默认和realm相同,部分浏览器本段不设可能会引发cors错误。
    server-name=119.23.61.24
    # 认证密码,和前面设置的密码保持一致
    cli-password=123456
  2. 启动coturn:./turnserver -o -a -f -c ../etc/turnserver.conf

  3. 测试coturn:Trickle ICE 测试页,出现srflx和relay就表示成功了

nginx配置

nginx需要配置证书,使用https才能调用浏览器提供的webrtc接口,生成过程参考:docker&dockerfile&docker-compose操作&nginx,这里配置的是自签名证书,所以会有不安全的提示。

conf 复制代码
worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;
    
    client_max_body_size     50m;
    client_body_buffer_size  10m; 	  
    client_header_timeout    1m;
    client_body_timeout      1m;
    
    gzip on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_comp_level  4;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    
    
    server {
        listen       80;
        server_name  localhost;
        rewrite ^(.*)$	https://$host$1	permanent;
    }
    
    # HTTPS server
    server {
        listen       443 ssl;
        server_name  localhost;

        ssl_certificate      /usr/local/nginx/cert/server.crt;
        ssl_certificate_key  /usr/local/nginx/cert/server.key;

        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;

        location / {
            root   /usr/local/nginx/html/meeting/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        
        location ^~ /api/ {
            proxy_pass http://119.23.61.24:9090;
            proxy_set_header   Host             $host;
            proxy_set_header   X-Real-IP        $remote_addr;
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        }
       
        location /api/websocket/ {
       
           proxy_redirect off;
           
           # 如果location那里使用了正则表达式,则这里就不能写uri路径,就是端口后面不能写其它的了,否则校验不通过  
           proxy_pass http://119.23.61.24:9090;
           
           proxy_http_version 1.1;
           # 如果不配置这个 如果客户端一直不发送消息过来,经测试默认1分钟之后连接会关闭。所以需要心跳机制。
           proxy_read_timeout 36000s;
           proxy_send_timeout 36000s;
           
           # 升级协议头 websocket
           # 浏览器会携带Connection头: Upgrade;Upgrade头: websocket;
           proxy_set_header Connection "Upgrade";
           proxy_set_header Upgrade $http_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; 
       }
        
    }
}

ice配置

js 复制代码
const iceConfig = {
  "iceServers": [
      {
          "urls": [
              "stun:119.23.61.24:3478"
          ],
          "username": "",
          "credential": ""
      },
      {
          "urls": [
              "turn:119.23.61.24:3478"
          ],
          "username": "user",
          "credential": "123456"
      }
  ],
  "iceTransportPolicy": "all"
}

需服务器要开放的端口

注意3478的tcp和udp都需要放开

效果

相关推荐
简离13 天前
前端调试实战:基于 chrome://webrtc-internals/ 高效排查WebRTC问题
前端·chrome·webrtc
西岸行者14 天前
学习笔记:SKILLS 能帮助更好的vibe coding
笔记·学习
悠哉悠哉愿意14 天前
【单片机学习笔记】串口、超声波、NE555的同时使用
笔记·单片机·学习
别催小唐敲代码14 天前
嵌入式学习路线
学习
毛小茛14 天前
计算机系统概论——校验码
学习
babe小鑫14 天前
大专经济信息管理专业学习数据分析的必要性
学习·数据挖掘·数据分析
winfreedoms14 天前
ROS2知识大白话
笔记·学习·ros2
在这habit之下14 天前
Linux Virtual Server(LVS)学习总结
linux·学习·lvs
我想我不够好。14 天前
2026.2.25监控学习
学习
im_AMBER14 天前
Leetcode 127 删除有序数组中的重复项 | 删除有序数组中的重复项 II
数据结构·学习·算法·leetcode