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()