pixelstream-cn/README.md

基于虚幻引擎的像素流平台

## 说明
基于虚幻引擎开发的像素流平台，可实现UE进程动态管理；
也可实现UE场景的多渲染主机负载均衡；
可私有化部署，详情联系微信公众号PixelStreamCN


#### 第一步 注册账号(免费)

前往pixelstream平台注册账号

https://www.pixelstream.cn/

----

#### 第二步

创建渲染编号 (一个账号目前最多可以创建5个)

----

#### 第三步 下载渲染管理端和用例

启动渲染管理端 填写渲染编号 选择用例目录 设置最大启动进程数

----

#### 第四步 接入jssdk

###### 导入
```js
import pixelStream from "pixelstream-cn";
```

---


###### 初始化
```js
let ps = new pixelStream({
  element:document.getElementById("render"),    //设定渲染容器
  keyboard:["a","s","d","w","q","e","F1"," "],   //开放的键盘
  idleClose:{
    timeout:300,                                //鼠标/键盘300秒无操作后自动关闭
    callback:(ps)=>{
      console.log("鼠标/键盘超时无操作，自动关闭");
    }
  }
});
```
###### 初始化参数包含
| 配置项 | 类型 | 说明 |
|  ----: | --- | :---- |
| encodeKey | string | 密钥 |
| element | dom | 渲染容器 |
| keyboard | array | 开放的键盘按键 默认全部开放 |
| idleClose | object | 鼠标/键盘无操作自动关闭配置；timeout 为秒，callback 在超时触发时调用；默认不启用 |
| tools | bool | 是否开启工具条 默认关闭 |
| baseHost | string | 基础地址 私有云部署用 |

---


###### 监听客户端交互事件
```js
ps.message.responseHandel = (response)=>{
  console.log("收到UE发来的消息",response);
};
```

---


###### 排队时触发
```js
ps.message.waitHandel = (num)=>{
  console.log("前面还有" + num + "人排队");
};
```

---


###### 错误触发
```js
ps.message.errorHandel = (message)=>{
  console.log("错误消息:" + message);
};
```

---


###### 流畅度
```js
ps.message.speedHandel = (speed)=>{
  console.log("当前流畅值:" + speed);
};
```


---


###### 执行渲染
```js
ps.render("你的渲染编号","画面名称").then(()=>{
  console.log("渲染画面接入完成");
});
```

---


###### 发送消息
```js
let data={};    //发送的data结构信息
ps.send(new pixelStream.action("action值",data,false))
```

---


###### 发送异步消息
```js
let data={};    //发送的data结构信息
ps.send(new pixelStream.action("action值",data,true)).then(response=>{
  console.log("收到消息回复",response);   //response为UE回复的内容 会将字符串解析为json对象
});
```

###### 发送字符串消息
```js
ps.sendUIInteraction("发送的内容")
```

###### 封装自定义动作类 并发送
```js
class MyAction extends pixelStream.action{
  callback=true;    //是否需要回调
  $action="my_action";    //action信息
  $data={message:"hello world"}   //data信息
}
ps.send(new MyAction()).then(response=>{});
```

---


###### 结构化设计
- 为了消除ue4开发人员和web开发人员对一些事物理解上的偏差，本JSSDK提供部分兼容性封装。后续会持续更新;
- 例如:颜色色值设定,因为UE针对RGB色值采用0-1的范围设定，而web开发普遍以0-255为范围设定，因此pixelStream.structure.Color作为JSSDK提供的色值封装来消除2边的理解误差

```js
let data = new pixelStream.structure.Color(255,0,0,1);
ps.send(new pixelStream.action("setColor",data,false))
```

---


###### 关闭(如果没有其他客户端接入该画面，系统将于10秒后回收渲染程序)
```js
ps.close()
```



## 版本更新说明

### v1.1.13
 - 新增 idleClose 配置，支持鼠标/键盘超时无操作后自动关闭，并可配置关闭回调函数
 - 修复 close() 只关闭 WebSocket、未关闭 WebRTC 的问题

### v1.1.11
 - 激活按键阻断浏览器默认按键事件