ue4-pixel-stream v1.3.12

ue4-pixel-stream

让浏览器运行UE4像素流游戏的工具包

这个npm工具包提供了一套工具，可以让你在浏览器中运行UE4像素流游戏。它简化了将UE4游戏流式传输到Web浏览器的过程，并提供了以下主要功能：

• 断线重连：自动处理网络连接中断的情况，并恢复游戏流的传输，确保用户不会因为断网而中断游戏体验。
• 屏幕适配：提供了适应不同屏幕尺寸和分辨率的功能，确保游戏在各种设备上都能够良好显示。
• 摇杆控制：集成了摇杆控制器，允许用户通过触摸屏幕来模拟游戏中的摇杆操作，提供流畅的游戏控制体验。
• 状态监控：实时监控游戏流传输的状态，包括网络延迟、帧率等信息，以便进行性能优化和故障排查。
• 高峰排队：支持在用户访问量高峰时实现排队机制，以避免服务器过载，确保稳定的游戏流传输。

如何使用?

loadPixelStream方法接受一个对象作为参数，并开始渲染。 unloadStream方法用于卸载渲染。

安装

使用 npm:npm install ue4-pixel-stream

loadPixelStream参数

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