# PeerStreamWeb

**Repository Path**: zhishiqu/peer-s

## Basic Information

- **Project Name**: PeerStreamWeb
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-07
- **Last Updated**: 2025-04-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue和三维引擎通信说明


使用 npm 引入依赖
安装核心模块，引入 `peer-stream` 这一关键依赖

```
npm install peer-stream
```

#### 使用步骤

1.  在入口文件中初始化
在项目的主入口文件 main.js 中引入该模块，为整个应用注入三维服务的核心能力：

import 'peer-stream'

2.  在组件中运用 peer-stream

#### 创建容器元素
为了承载三维服务的动态内容，我们需在模板中定义一个容器元素。这里选用 <div> 元素，并为其赋予类名 video-box，以便灵活控制样式与布局：

```
<template>
  <div class="video-box" ref="video"></div>
</template>
```

同时，通过 CSS 赋予其全屏的视觉效果，使其成为三维场景的理想画布：

```
<style scoped>
.video-box {
  width: 100vw;
  height: 100vh;
  display: flex;
}
</style>
```

3.  配置与加载 peer-stream

接下来，我们将在组件逻辑中完成对 peer-stream 的初始化与配置。以下是代码的核心部分：

```
<script>
export default {
  name: "PeerStream",
  components: {},
  data() {
    return {
      serverPath: "ws://192.168.10.33:100091/DHT", // 三维服务的流送地址
      backgroundImage: 'url("")' // 加载时显示的背景图像
    };
  },
  mounted() {
    this.initPS(); // 初始化三维服务

    /**
     * 监听渲染事件：当场景开始渲染时触发。
     * 此事件标志着三维世界的正式启动，此后可安全发送消息。
     */
    window.ps.addEventListener("playing", e => {
      console.log("三维场景已启动渲染");
    });

    /**
     * 消息监听：接收来自三维服务的消息并处理。
     */
    window.ps.addEventListener("message", e => {
      console.log(JSON.parse(e.detail));
    });

    /**
     * 向三维服务发送消息。
     */
    ps.emitMessage("");
  },
  methods: {
    /**
     * 初始化 `peer-stream` 配置。
     * 此方法如同为三维世界搭建桥梁，连接虚拟与现实。
     */
    initPS() {
      const ps = document.createElement("video", { is: "peer-stream" });
      ps.style.width = '100%';
      ps.style.height = '100%';
      ps.style.backgroundImage = this.backgroundImage;
      ps.style.backgroundRepeat = 'no-repeat';
      ps.style.backgroundSize = 'cover';
      ps.style.backgroundPosition = 'center';
      ps.id = this.serverPath; 
      this.$refs.video.appendChild(ps);
    }
  }
};
</script>
```

4.  Video事件监听

peer-stream 提供了多种事件监听机制，开发者可通过这些事件捕捉三维世界的动态变化：

```
ps.addEventListener('事件名称', e => {
    // 回调函数
});
```

#### 以下是几个关键事件的解读：
● message：接收应用层返回的消息，数据存储于 e.detail 中。
● playing：场景开始渲染时触发，标志着三维世界的正式启航，在该事件后才能安全发送ps.emitMessage()
● playerqueue：当访问用户过多时，返回排队信息（如 seq 表示当前排队序号）。

5.  消息的传递与接收

向三维服务发送消息时，可直接使用 emitMessage 方法：

// 若传入对象，会自动序列化为 JSON 格式
ps.emitMessage(msg: string | object);

接收消息时，则通过监听 message 事件解析数据：

```
ps.addEventListener("message", e => {
    const data = JSON.parse(e.detail);
    console.log(data);
});
```

#### 注意事项

serverPath 中url需要根据，三维引擎推流服务器的地址填写