Skip to content

Commit

Permalink
md update
Browse files Browse the repository at this point in the history
  • Loading branch information
aiksxd committed Feb 22, 2024
1 parent 6189aa4 commit c523ce4
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 11 deletions.
15 changes: 10 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
- [中文文档](README_CN.md)

# P2P-Live-Web
PS: Due to the lack of attention to the project, all messages will be replied to once every 2 to 3 weeks.
PS: All messages will be replied to once every 2 to 3 weeks.

## [Single Room Type Live Streaming](https://aiksxd.github.io/P2PLiveWeb.html)
### Instructions:
Expand All @@ -10,17 +10,20 @@ PS: Due to the lack of attention to the project, all messages will be replied to
3. The audience can connect to any broadcaster's ID, but the connection must remain uninterrupted. If the connection is broken in the middle, a new connection object is required.

## [Multi-Room Type (URL->ROOT)](https://aiksxd.github.io/e.g.P2PRootMonitor.html)
Version Update Example:
+ Version Modified Example:
+ e.g.P2PLiveindex.html serves as the website homepage (displaying rooms ready for live streaming and providing entry points)
+ e.g.P2PRootMonitor.html acts as the website's root node (responsible for monitoring and providing all IDs of live stream initiators to the homepage)
+ e.g.P2PLiveHost & Guest.html are auxiliary pages placed in the same directory
### Instructions:
1. Visit the homepage (the root node page contains hyperlinks), enter the **root node's ID**, and click the **Connect** button
2. The broadcaster clicks **Go To Live** and then **Share Local Stream**
3. After completing step one, audience members can view all active live streaming rooms under the root node (based on the connectivity status of the live streaming pages)

### Extensions:
1. To customize the room list style, modify the parameters in the `guest.on('data', (data) => {` section of the live streaming page (e.g.P2PLiveHost). **Note: Do not modify the fifth parameter at index 4!**
2. Optimize the connection method by parsing the **nodesMap array** (containing all node information) yourself (Note: **e.g. version not tested**). The nodesMap of the broadcaster node contains all nested node information, while the **root node nodeMaps** = hostsPeers (excluding sub-child nodes). If you are not satisfied with the current nodesMap array collecting node information, consider **restructuring the recorder() method**. Depending on the broadcaster's device configuration, it is recommended to use a **multi-binary tree-style** connection method.
1. For the multi-room type, by creating a root node on your own device, deploying the remaining pages on the web site, and specifying the root node connection, you can implement a simple live streaming website.
2. For the single live room type, similarly, create a page on your own, start streaming after obtaining the ID, deploy another page on the web, and specify the ID connection to achieve a specific live room.
3. To customize the room list style, modify the parameters in the `guest.on('data', (data) => {` section of the live streaming page (e.g.P2PLiveHost). **Note: Do not modify the fifth parameter at index 4!**
4. Optimize the connection method by parsing the **nodesMap array** (containing all node information) yourself (Note: **e.g. version not tested**). The nodesMap of the broadcaster node contains all nested node information, while the **root node nodeMaps** = hostsPeers (excluding sub-child nodes). If you are not satisfied with the current nodesMap array collecting node information, consider **restructuring the recorder() method**. Depending on the broadcaster's device configuration, it is recommended to use a **multi-binary tree-style** connection method.

## **Considerations**:
1. The **root node** has the **highest priority for streaming**, overriding all child nodes and their subsequent children's live streams.
Expand All @@ -30,7 +33,9 @@ Version Update Example:
5. In the event of the host losing connection, the information from the host's child nodes will not be transmitted to other host's child nodes.
6. Video quality may initially be blurry when passed from child nodes to sub-child nodes; waiting for synchronization may resolve this (quality synchronization observed after 26 seconds in a test).

Note: Desktop stream is obtained by **MediaDevices.getDisplayMedia()** by default, which means **most mobile devices** cannot initiate live streaming and can **only receive media streams and text messages**. It also requires a local development environment or HTTPS to work properly. If needed, you can **modify the getLocalStream() function yourself**.
### Adapting and Expanding Streaming Sources
+ The desktop stream is obtained by default using MediaDevices.getDisplayMedia(), which means that it only shares the desktop. This also implies that **most mobile devices** are unable to initiate live streams and can **only receive media streams and text information**. Additionally, this functionality requires operation in a local development environment or under HTTPS to function properly.
+ If there is a need for mobile screen streaming, accessing the camera, taking photos, etc., you can refer to the getUserMedia() API and modify the page's getLocalStream() function.

### For **P2P-Live-web**
it employs a **node-based delivery** that allows data to be passed directly from one node to another, enabling the same text interaction message to be received by anyone connected without relying on a central server, thus significantly reducing network latency.
Expand Down
16 changes: 10 additions & 6 deletions README_CN.md
Original file line number Diff line number Diff line change
@@ -1,25 +1,28 @@
- [English doc](README.md)

# P2P-Live-Web
注:由于项目无人问津,所有消息2~3周回复一次
注:所有消息2~3周回复一次
## [单直播间型](https://aiksxd.github.io/P2PLiveWebCN.html)
### 用法:
1. 将文件在**本地读取****直接访问**以下网址等
2. 直播方点击**共享本地流**按钮,并且分享自己的ID给观众
3. 观众与主播的id任意相连,不过需要保持中间不断开,如果中间断开则需更换连接对象

## [e.g.多房间型(URL->ROOT)](https://aiksxd.github.io/e.g.P2PRootMonitorCN.html)
改版示例:
+ 改版示例:
+ e.g.P2PLiveindex.html 为网站主页(用于展示准备发起直播的房间,并为之提供入口)
+ e.g.P2PRootMonitor.html 为网站根节点(根节点为监听器,负责获取发起直播的所有ID,并递交给主页)
+ e.g.P2PLiveHost & Guest.html 为附属页面,置于同目录下即可
### 用法:
1. 访问主页(根节点页面有超链接),**填入根节点的ID**并按下**连接**按钮
2. 直播方点击**去开播**之后点击**共享本地流**
3. 观众在执行第一步后可以看到该根节点下的所有活跃直播间(列入标准不在于是否推流,而是直播页面的连接情况)

### 拓展:
1. 如增加房间列表的样式,可以增加直播间页面(e.g.P2PLiveHost)中`guest.on('data', (data) => {``guest.send([peer.id, null, null, 0, 1]);`中的参数,**注意:第索引为4的第五个参数勿动!**
2. 优化连接方法,自行解析**nodesMap数组**(包含所有节点信息)(注:**e.g.版本未测试****主播节点**的nodesMap包含**所有嵌套节点信息**,而**根节点nodeMaps**=hostsPeers(**不含子子节点**),如果不喜欢现有的nodesMap数组收集节点信息建议**重构recorder()方法**),根据主播设备配置推荐采用**围绕主播多个二叉树式**连接法
1.**多房间型****自己设备开个根节点**,web网站部署**剩余页面**,并且**指定根节点连接**,就实现了一个简单的直播网站
2.**单直播间型**同样**自己开个页面****得到ID后推流**,web网页部署另一个页面,**指定ID连接**,就实现指定直播间
3. 如增加房间列表的样式,可以增加直播间页面(e.g.P2PLiveHost)中`guest.on('data', (data) => {``guest.send([peer.id, null, null, 0, 1]);`中的参数,并在首页节点页面对接,**注意:第索引为4的第五个值默认用于区分访客与主播的信息来源**
4. 优化连接方法,自行解析**nodesMap数组**(包含所有节点信息)(注:**e.g.版本未测试****主播节点**的nodesMap包含**所有嵌套节点信息**,而**根节点nodeMaps**=hostsPeers(**不含子子节点**),如果不喜欢现有的nodesMap数组收集节点信息建议**重构recorder()方法**),根据主播设备配置推荐采用**围绕主播多个二叉树式**连接法

## **注意事项**
1. **根节点**具有**推流最高优先级**,它会覆盖所有子节点及其子子节点等的直播
Expand All @@ -29,8 +32,9 @@
5. 在主播丢失连接时,则无法将主播子节点的信息传递给其他主播子节点
6. 子节点在递交给子子节点时视频质量开始可能模糊,尝试等待即可(一次测试26s后画质同步)

### PS:但是桌面流默认由**MediaDevices.getDisplayMedia()**获取
这意味着**大多移动端**都无法发起直播而**只能接收媒体流和文本信息**,且需要在本地开发环境或https下才能正常工作,如有需要可**自行修改getLocalStream()函数**
### 适配与流源拓宽
桌面流默认由MediaDevices.getDisplayMedia()获取,即仅共享桌面,且意味着**大多移动端**都无法发起直播而**只能接收媒体流和文本信息**,且需要在本地开发环境或https下才能正常工作。
如果需要手机端屏幕推流、获取摄像头、相机拍照等等,可参考getUserMedia()API,并修改页面的getLocalStream()

## 对于**P2P-Live-web**
它采用**节点式传递**,允许数据直接从一个节点传递到另一个节点,这意味着无论连接谁,都可以收到相同的文字互动信息,而且**无需依赖中央服务器**,大大减少网络延迟。
Expand Down

0 comments on commit c523ce4

Please sign in to comment.