webrtc视频会议学习(三)

文章目录

    • 关联:
    • 源码
    • 搭建
      • coturn服务器
      • nginx配置
      • ice配置
      • 需服务器要开放的端口
    • 效果

关联:

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配置文件

    
    # 网卡名
    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,这里配置的是自签名证书,所以会有不安全的提示。
在这里插入图片描述

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配置

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都需要放开
在这里插入图片描述

效果

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/923420.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【从零开始的LeetCode-算法】43. 网络延迟时间

有 n 个网络节点,标记为 1 到 n。 给你一个列表 times,表示信号经过 有向 边的传递时间。 times[i] (ui, vi, wi),其中 ui 是源节点,vi 是目标节点, wi 是一个信号从源节点传递到目标节点的时间。 现在,…

数据结构--AVL树(平衡二叉树)

✅博客主页:爆打维c-CSDN博客​​​​​​ 🐾 🔹分享c、c知识及代码 🐾 🔹Gitee代码仓库 五彩斑斓黑1 (colorful-black-1) - Gitee.com 一、AVL树是什么?(含义、性质) 1.AVL树的概念 AVL树是最…

sunshine和moonlight串流网络丢失帧高的问题(局域网)

注:此贴结果仅供参考 场景环境:单身公寓 路由器:2016年的路由器 开始:电脑安装sunshine软件,手机安装moonlight软件开始串流发现网络丢失帧发现巨高 一开始怀疑就是路由器问题,因为是局域网,而…

STM32F103外部中断配置

一、外部中断 在上一节我们介绍了STM32f103的嵌套向量中断控制器,其中包括中断的使能、失能、中断优先级分组以及中断优先级配置等内容。 1.1 外部中断/事件控制器 在STM32f103支持的60个可屏蔽中断中,有一些比较特殊的中断: 中断编号13 EXTI…

解决SSL VPN客户端一直提示无法连接服务器的问题

近期服务器更新VPN后,我的win10电脑一致无法连接到VPN服务器, SSL VPN客户端总是提示无法连接到服务端。网上百度尝试了各种方法后,终于通过以下设置方式解决了问题: 1、首先,在控制面板中打开“网络和共享中心”窗口&…

从零开始:Linux 环境下的 C/C++ 编译教程

个人主页:chian-ocean 文章专栏 前言: GCC(GNU Compiler Collection)是一个功能强大的编译器集合,支持多种语言,包括 C 和 C。其中 gcc 用于 C 语言编译,g 专用于 C 编译。 Linux GCC or G的安…

小程序-基于java+SpringBoot+Vue的网上花店微信小程序设计与实现

项目运行 1.运行环境:最好是java jdk 1.8,我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境:IDEA,Eclipse,Myeclipse都可以。推荐IDEA; 3.tomcat环境:Tomcat 7.x,8.x,9.x版本均可 4.硬件环境&#xff1a…

Transformer:一种革命性的序列到序列学习框架

目录 ​编辑 引言 Transformer模型的基本结构 1. 自注意力机制 2. 前馈神经网络 3. 位置编码 Transformer的工作原理 Transformer的应用 机器翻译 文本摘要 问答系统 文本分类 语音识别 图像识别 结论 引言 Transformer模型,自2017年由Vaswani等人提…

轮转数组(java)

题目描述 给定一个整数数组 nums,将数组中的元素向右轮转 k 个位置,其中 k 是非负数 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7,1,2,3,4,5] 向右轮转 3 步: [5,6,7,…

【vue3实现微信小程序】每日专题与分页跳转的初步实现

快速跳转: 我的个人博客主页👉:Reuuse博客 新开专栏👉:Vue3专栏 参考文献👉:uniapp官网 免费图标👉:阿里巴巴矢量图标库 ❀ 感谢支持!☀ 前情提要 &#x…

【优先算法学习】双指针--结合题目讲解学习

目录 1.有效三角形的个数 1.2题目解题思路 1.3代码实现 2.和为s的两个数 2.1刷题链接-> 2.2题目解题思路 2.3代码实现 1.有效三角形的个数 1.1刷题链接-> 力扣-有效三角形的个数https://leetcode.cn/problems/valid-triangle-number/description/ 1.2题目解…

云服务器部署WebSocket项目

WebSocket是一种在单个TCP连接上进行全双工通信的协议,其设计的目的是在Web浏览器和Web服务器之间进行实时通信(实时Web) WebSocket协议的优点包括: 1. 更高效的网络利用率:与HTTP相比,WebSocket的握手只…

前端---HTML(一)

HTML_网络的三大基石和html普通文本标签 1.我们要访问网络,需不需要知道,网络上的东西在哪? 为什么我们写,www.baidu.com就能找到百度了呢? 我一拼ping www.baidu.com 就拼到了ip地址: [119.75.218.70]…

网络基础 - IP 隧道篇

在一个如图所示的网络环境里,网络 A、B 使用 IPv6,如果处于中间位置的网络 C 支持使用 IPv4 的话,网络 A 与网络 B 之间将无法直接进行通信,为了让它们之间正常通信,这时必须得采用 IP 隧道的功能,IP 隧道中…

1.1、Python 安装与开发环境设置指南

作为你的 Python 导师,我将带领你一步步完成 Python 的安装和开发环境的设置,让你顺利开启 Python 学习之旅。 1. Python 安装 1.1 下载 Python 安装包 首先,我们需要从 Python 官网下载 Python 的安装包。 打开你的浏览器,访…

【Redis篇】String类型命令详讲以及它的使用场景

目录 前言: 基本命令: setnx/setxx FLUSHALL mest mget 计数命令 INCR / INCRBY DECR/DECYBY INCRBYFLOAT 其他命令 APPEND GETRANGE SETRANGE STRLEN String的典型使用场景 缓存(Cache)功能 计数(…

【2024】前端学习笔记19-ref和reactive使用

学习笔记 1.ref2.reactive3.总结 1.ref ref是 Vue 3 中用来创建响应式引用的一个函数,通常用于基本数据类型(如字符串、数字、布尔值等)或对象/数组的单一值。 ref特点: ref 可以用来创建单个响应式对象对于 ref 包裹的值&…

构造函数的相关

文章目录 一、构造函数 今天我们要来讲解类的默认成员函数之一的构造函数。 一、构造函数 构造函数是特殊的成员函数,需要注意的是,构造函数虽然名称叫构造,但是构造函数的主要任务并不是开空间创建对象(我们常使用的局部对象是栈帧创建时&…

C嘎嘎探索篇:栈与队列的交响:C++中的结构艺术

C嘎嘎探索篇:栈与队列的交响:C中的结构艺术 前言: 小编在之前刚完成了C中栈和队列(stack和queue)的讲解,忘记的小伙伴可以去我上一篇文章看一眼的,今天小编将会带领大家吹奏栈和队列的交响&am…

Xcode15(iOS17.4)打包的项目在 iOS12 系统上启动崩溃

0x00 启动崩溃 崩溃日志,只有 2 行,看不出啥来。 0x01 默认配置 由于我开发时,使用的 Xcode 14.1,打包在另外一台电脑 Xcode 15.3 Xcode 14.1 Build Settings -> Asset Catalog Compliter - Options Xcode 15.3 Build S…