# Web-monitor

**Repository Path**: skyqi/web-monitor

## Basic Information

- **Project Name**: Web-monitor
- **Description**: WebRTC 实战: P2P 音视频通话解决方案
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-09
- **Last Updated**: 2024-08-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

WebRTC（Web Real-Time Communication）是一种支持网页浏览器进行实时语音对话或视频聊天的技术，而P2P（Peer-to-Peer）是一种网络通信模型，其中参与者可以直接相互通信，而不需要通过中央服务器。虽然WebRTC和P2P技术在某些方面有重叠，但它们在概念和应用上有所不同。

WebRTC与P2P技术的关系：

WebRTC的P2P特性：WebRTC内建了P2P通信的能力，允许浏览器之间直接进行媒体流的传输，而不需要通过服务器中转。这种直接通信减少了延迟和服务器负载，提高了实时通信的效率。 P2P流媒体技术：P2P流媒体技术通常指的是在用户之间分发流媒体内容时采用的对等网络传输方式。这种技术可以用于直播或点播内容，通过让观看者之间相互分享数据块来减轻服务器的负担。

使用方法：
设备端（摄像头手机） 先在 https://stun.ggiooo.com/device 填入设备名字 deviceToken 比如默认 1 (在服务器的Web-monitor-Backend-service/index.js的devicesList配置)

客户观看端 在 https://stun.ggiooo.com/client 填入设备 deviceName 1

服务端部署方法：
前端(Web-monitor-Frontend)：
前端界面部署在宝塔界面（http://111.230.12.92:8888/tencentcloud） "网站"下的 "stun.ggiooo.com"项。对应的文件在"/www/wwwroot/stun.ggiooo.com/" 目录下。

如何上传：本地 npm run build编译生成 dist/文件夹，把这个文件夹覆盖（用宝塔的FTP功能，用户名密码自己创建，检查防火墙20,21端口和被动30000-40000端口）到云端的"/www/wwwroot/stun.ggiooo.com/"目录。现有目录下的东西(apk等等)可以不用删除。

后端(Web-monitor-Backend-service)：
把文件夹"Web-monitor-Backend-service/" 里面的东西直接上传到云端 "/www/serve/petcode-monitor-service"，然后在云端目录里面跑 "pm2 start index.js" "pm list" "pm stop 0" 来开始/停止服务。

后端部署在 111.230.12.92:3000 端口,前端通过POST "https://stun.ggiooo.com/api/sendDeviceName" 调用。

STUN/TURN 服务器，在腾讯云服务器上（/usr/local/etc/turnserver.conf，见https://cloud.tencent.com/developer/article/2104015）配置。 在前端client/device的用法如下
      const pc = new RTCPeerConnection({
        iceServers: [
          {
            urls: 'stun:111.230.12.92:3478' // 这是你自己的 STUN 服务器
          },
          {
            urls: 'turn:111.230.12.92:3478', // 这也是你自己的 TURN 服务器
            username: 'admin',
            credential: 'petcode'
          }
        ]
      });
本地开发方法：
前端(Web-monitor-Frontend)： npm run serve

后端(Web-monitor-Backend-service)： node .\index.js

NodeJS默认指南：
Project setup
node -v
### 20.11
npm -v
### 10.x.x
npm install


### Compiles and hot-reloads for development
npm run serve


### Compiles and minifies for production
npm run build


### Lints and fixes files
npm run lint


### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

## 技术栈文章

https://cloud.tencent.com/developer/article/2104015


https://juejin.cn/post/7214427834994917435


# 遇到的问题【2024-4-10】

1,搭建 sturn/turn 服务器
   docker是我安装失败了.
   只能去链接：https://github.com/coturn/coturn，拉代码下来硬装。我用的是ubuntu22。参考https://cloud.tencent.com/developer/article/2104015 安装。在检测 ice 穿透的在线工具时遇到问题的 “Gather candidtes” 上面报rtp和rtcp成功，下面报失败。具体什么我不记得，问了一个朋友说下面的报错可以忽略。


2,本地环境使用前端Web-monitor-Frontend和后端的代码Web-monitor-Backend-service-main
  前端其它是vue，后端是nodejs.

3,先安装后端nodejs。
  3-1 在本地测试不需要修改ssl证书。编译上了服务器要对域名进行ssl证书的申请和修改
  3-2 本地测试不需要修改ssl证书。记住是使用http://localhost这种形式.
  3-3 服务器除了证书，其它代码不用修改。运行node ./index.js
  3-4 测试 get http://localhost:3000/hello  返回'hello'表示成功


4,前端Web-monitor-Frontend,开发要修改三个文件
  4-1 本地测试不需要修改ssl证书。记住是使用http://localhost这种形式.
  找到baseURL和搜索"http"进行修改
     config/index.js
    clientView.vue文件修改下面几处：
        const pc = new RTCPeerConnection({
        iceServers: [
          {
            urls: 'stun:82.156.207.54:3478' // 这是你自己的 STUN 服务器，本地开发也需要STUN服务器
          },
          {
            urls: 'turn:82.156.207.54:3478', // 这也是你自己的 TURN 服务器
            username: 'admin',
            credential: 'petcode'
          }
        ]
      });
      ...
      socket.value = io("https://stun.ggiooo.com:3000");

    deviceView.vue也一样。


5,测试2个地址：
  http://localhost/device 推流
  http://localhost/client 拉流，播放

6,在服务器一定要编译前端上传，使用https 和nodejs也使用https协议。尽量不要使用https://82.*.*.*：3000来访问。使用https://域名。这样不会跨域。注意修改nodejs对应的ssl证书，使用https://域名的证书。否则在浏览器出现访问接口post https://域名:3000/api/sendDeviceName 出现报错。不修改证书这个在edge浏览器有可能正常，在chrome浏览器报错。

7，在手机号端不能使用http://网域网:8000/device访问，不成功的。用公网域名访问



6，技术微信：wx170035