1.3.12 • Published 2 years ago
ue4-pixel-stream v1.3.12
ue4-pixel-stream
让浏览器运行UE4像素流游戏的工具包
这个npm工具包提供了一套工具,可以让你在浏览器中运行UE4像素流游戏。它简化了将UE4游戏流式传输到Web浏览器的过程,并提供了以下主要功能:
- 断线重连:自动处理网络连接中断的情况,并恢复游戏流的传输,确保用户不会因为断网而中断游戏体验。
- 屏幕适配:提供了适应不同屏幕尺寸和分辨率的功能,确保游戏在各种设备上都能够良好显示。
- 摇杆控制:集成了摇杆控制器,允许用户通过触摸屏幕来模拟游戏中的摇杆操作,提供流畅的游戏控制体验。
- 状态监控:实时监控游戏流传输的状态,包括网络延迟、帧率等信息,以便进行性能优化和故障排查。
- 高峰排队:支持在用户访问量高峰时实现排队机制,以避免服务器过载,确保稳定的游戏流传输。
如何使用?
loadPixelStream
方法接受一个对象作为参数,并开始渲染。
unloadStream
方法用于卸载渲染。
安装
使用 npm:npm install ue4-pixel-stream
loadPixelStream参数
参数 | 描述 | 默认值 |
---|---|---|
el | (HTMLElement): 挂载的 DOM 元素。 | null |
isShowControl | (boolean): 是否显示状态监控组件 | false |
loadingSlot | (HTMLElement): 加载插槽 | false |
queueSlot | (HTMLElement): 排队插槽 | false |
video | (string): 视频 URL | null |
videoCover | (string): 视频封面 URL | null |
serverURL | (string): 服务器地址 | null |
appId | (string): 应用 ID | null |
option | (Object): 应用选项 | {} |
params | (Object): 游戏携带参数 | {} |
overlayText | (Object): 文案 | { start: '点击开始', connecting: '正在进入',videoError: '视频加载遇到问题',disconnected: '已断开连接,请刷新页面' } |
onMediaLoaded | (Function): 媒体加载完成回调函数 | null |
onMediaClosed | (Function): 媒体关闭回调函数 | null |
onMediaDisconnected | (Function): 媒体断开连接回调函数 | null |
onQueue | (Function): 排队事件回调函数 | null |
onMessage | (Function): 消息事件回调函数 | null |
option参数
let option = {
videoFit: 2, // 0: 适应宽度 1: 适应高度 2: 适应屏幕
initCursorMode: 0, // 光标模式
screenBgColor: '000', // 屏幕背景颜色
fullScreenMode: 0, // 全屏模式
matchResolution: false, // 匹配分辨率
useMic: false, // 使用麦克风
forceLandscape: 1, // 强制横屏
}
代码示例
import {loadPixelStream,unloadStream} from 'ue4-pixel-stream';
// 开始渲染
loadPixelStream({
el: document.body, // 挂载的dom
isShowControl: false, // 是否显示控件
loadingSlot: false, // 加载插槽
queueSlot: false, // 排队插槽
video: 'loading.mp4',
videoCover: 'loading.jpg', // 视频封面
serverURL: 'http://1111.com', // 服务器地址
appId: '111111111111111111', // 应用id
option: {
videoFit: 2,
initCursorMode: 0,
screenBgColor: '000',
fullScreenMode: 0,
matchResolution: false,
useMic: false,
forceLandscape: 1,
}, // 应用选项
params: { // 游戏携带参数
userId: 'userId',
nickname: 'nickname',
},
overlayText: { // 文案
start: '点击开始',
connecting: '正在进入',
videoError: '视频加载遇到问题',
disconnected: '已断开连接,请刷新页面'
},
onMediaLoaded: () => { // 媒体加载完成
},
onMediaClosed: () => { // 媒体关闭
},
onMediaDisconnected: () => { // 媒体断开连接
},
onQueue: (n) => { // 排队事件n是当前人数
if(n >= 0) {
isPlaying && closeVideo()
queueElement.style.display = 'block';
queueNumber.innerText = `当前排在第${n}位`;
} else {
queueElement.style.display = 'none'
}
},
onMessage: (e) => { // 消息事件 e是不同的信息JSON
const message = JSON.parse(e);
switch (message['type'].toLowerCase()) {
case 'shutdown':
history.back()
break;
case 'openurl':
if (message.url.startsWith("http")) {
window.location = message.url
} else {
window.location = "https://111.com"
}
break;
default:
}
}
});
// 停止渲染
unloadStream()
1.3.12
2 years ago
1.3.10
2 years ago
1.3.9
2 years ago
1.3.8
2 years ago
1.3.7
2 years ago
1.3.6
2 years ago
1.3.5
2 years ago
1.3.4
2 years ago
1.3.3
2 years ago
1.3.2
2 years ago
1.3.1
2 years ago
1.3.0
2 years ago
1.2.9
2 years ago
1.2.8
2 years ago
1.2.7
2 years ago
1.2.6
2 years ago
1.2.5
2 years ago
1.2.4
2 years ago
1.2.3
2 years ago
1.2.2
2 years ago
1.2.1
2 years ago
1.2.0
2 years ago
1.1.9
2 years ago
1.1.8
2 years ago
1.1.7
2 years ago
1.1.6
2 years ago
1.1.5
2 years ago
1.1.4
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago