1.3.12 • Published 2 years ago

ue4-pixel-stream v1.3.12

Weekly downloads
-
License
-
Repository
-
Last release
2 years ago

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): 视频 URLnull
videoCover(string): 视频封面 URLnull
serverURL(string): 服务器地址null
appId(string): 应用 IDnull
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