# webrtc-demo

**Repository Path**: wang-fei-admin/webrtc-demo

## Basic Information

- **Project Name**: webrtc-demo
- **Description**: webrtc+vue2+springboot+websocket实现音视频通话
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 12
- **Forks**: 9
- **Created**: 2024-06-30
- **Last Updated**: 2025-07-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webrtc-demo

#### 介绍
webrtc+vue2+springboot+websocket实现音视频通话

实现1v1视频通话，效果：
![输入图片说明](https://foruda.gitee.com/images/1719739380310824891/2d1f1742_8032661.png "屏幕截图")

#### 软件架构
相关博客：https://blog.csdn.net/qq_46122292/article/details/137926349

#### 安装教程

1.  搭建nginx，部署证书，参考https://blog.csdn.net/qq_46122292/article/details/138136133
2.  修改文件WebSocket.js中IP地址为本机IP地址，并与nginx配置中保持一致


#### 使用说明

1.  本人nginx配置如下


```

    server {
	    listen       8090; # 监听8090端口
        server_name  192.168.148.204; # 本机Ipv4地址，只要是同一局域网都可以访问
        ssl on;
        #配置证书的路径
        ssl_certificate      cert/server.crt;
        ssl_certificate_key  cert/server.key;
        ssl_session_timeout  5m;
        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;
        
        # 普通的https请求
        location / {
             #配置转发到本机真正服务端口8089
            proxy_pass http://192.168.148.204:8089;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header X-Forwarded-Port $server_port;
        }
        
   
		
		  location /home {
             #配置转发到本机真正服务端口8089
            proxy_pass http://192.168.148.204:8088/;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header X-Forwarded-Port $server_port;
        }
        
		
		# 解决WebSocket 连接超时问题
		
		 location /webSocket/ {
            proxy_pass http://192.168.148.204:8089;
			
            proxy_http_version 1.1;

            proxy_redirect off;

            proxy_buffering off;

            proxy_set_header X-NginX-Proxy true;

            proxy_set_header Host $host;

            proxy_set_header Http-Host $http_host;

            proxy_set_header X-Real-IP $remote_addr;

            proxy_set_header REMOTE-HOST $remote_addr;

            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Upgrade $http_upgrade;

            proxy_set_header Connection  "upgrade";

    }

     
 
    }
#---------------结束-------------------


```


2.  访问地址：https://192.168.148.204:8090/home/#/
3.  ![输入图片说明](https://foruda.gitee.com/images/1719740404811672658/88394b7d_8032661.png "屏幕截图")
随便输入个ID和用户昵称，再接收人这一栏将ID填上去就可以了，点击开始对讲
![输入图片说明](https://foruda.gitee.com/images/1719740463167444147/46fa4560_8032661.png "屏幕截图")

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)