markolofsen / metaeditor

The Pixel Streaming library for ReactJS facilitates the integration of Unreal Engine v.5 into a web browser. It enables the transmission of commands and receipt of callbacks from the stream server once Unreal Engine is launched.

Pixel Streaming with Nextjs & MUI5

Welcome to this demo implementation of the pixel-streaming library for Nextjs, complete with the popular Material theme already configured! By using this implementation, you are just one step away from launching a fully functional Unreal Engine project right in your web interface.

Installation

Make a fork — it's more convenient!

git clone https://github.com/markolofsen/metaeditor.git

cd ./metaeditor
yarn && yarn dev
yarn start

Links

• Documentation — Pixel Streaming by MetaEditor
• Demo — Unreal Engine demonstration with Pixel Streaming
• Pixel Streaming Reactjs — Npm module
• Online Player — Online player to access your local project
• Unreal Engine Project — Compiled Unreal Engine project with plugin installed

Social

• Follow us on Twitter
• 
• MetaEditor Chat on Telegram (technical support)

Contact Us

For business inquiries: [email protected]

Made by Unrealos

metaeditor's Issues

The mouse is not aligned correctly

The mouse does not align correctly in pixel-streaming, which makes some operations, such as moving the axis of rotation difficult. Is there any way to align it correctly?

It's true in the middle, it's cheaper as you go around.

Any help would be greatly appreciated.

Infinte Logging errors while pixel-streaming is on

Describe the bug
Whenever pixel streaming is on (means streaming is active from unreal to browser), an error is coming inside browser console and it actually occurs when there is a log in the console and error occurrence count increases per second.

I am attaching error screenshot below.

To Reproduce
Steps to reproduce the behavior:

1. cd metaeditor
2. yarn dev
3. connect to pixel streaming
4. open console and see errors.

How to Override MetaEditor Tag Style

Hi !
I hope you're doing well !
I'm using your Package, but I'm not able to change/disable full-screen mode on MetaEditor Tag Even when I try to change the style directly through CSS
Do you have any idea how I can fix this issue ?

Br.

how to connect the localhost from unreal pixel stream project？

how to connect the localhost from unreal pixel stream project？

Stream not active errors

Unreal Engine Version
5.1

Describe the bug
Whenever the connection is negotiatied, pixel streaming gets started (means stream video is getting played on client side).
Now whenever we try to send any ui_ineteraction to pixel-streaming server, we get an error on client side saying "Stream is not active, Can not emit ui interaction".

Now we figured out that if user clicks on the player that is playing stream then stream gets active, but this isn't an Ideal behavior.

Receiving from unreal

Is there a way to receive data from Unreal?

Unable to add new project

Hello,

I would like to try the meta editor pixel streaming service but I am unable to upload my unreal file.
The new project button is greyed out even after creating a free account. Is there something I have to do to have access to that capability?

How to use MetaEditor Pixel-Streaming in react 17.0.2?

Hi,
Thanks for this great MetaEditor, Pixel-streaming. I am gonna insert Unreal player in React 17.0.2 project.
Please let me know how to insert for my project.

Is source available?

Is source code available for the underlying unreal-pixel-streaming package? I'm interested in the product, but am less comfortable including obfuscated code without open source access in my project.

The NPM repository seems to be maintained by someone other than yourself, and I can't find any repository links on npm?

this.preferredCodec.split is not a function

Describe the bug

When attempting to use pixel streaming on Firefox, an error occurs. The issue lies within the metaeditor4-ue package during debugging. Specifically, there is a problem with setting the preferredCodec for the Chrome browser. The relevant code snippet is as follows:

 constructor(
        options: RTCConfiguration,
        config: Config,
        preferredCodec: string
    ) {
        console.log('Trying looking pc: ', preferredCodec)
        this.config = config;
        this.createPeerConnection(options, preferredCodec);
    }

In the above code, the preferredCodec is inferred as a string, which is correct for the Chrome browser. To investigate further, I logged the preferredCodec values for both Chrome and Firefox browsers. Here are the respective console logs:

// chrome
console.log(prefferedCodec); // H264 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f

// firefox
console.log(prefferedCodec); 

// Array [
//     "H264 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f",
//     "H264 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f"
// ]```

As observed, the ```preferredCodec``` in Firefox is an Array, whereas it is expected to be a String.

Operable area error

Hi

Use:

• pixel streaming 2.2.6
• react 17.0.2
• node 16.13.2

I can't select the text and can only operate the push flow screen.

import React from "react";

// libs
import PixelStreaming from "pixel-streaming";
import Title from "./Title";


export default function Player(props) {
    const refPixelStreaming = React.useRef(null);

    return (
        <PixelStreaming
            ref={refPixelStreaming}
            onLoad={(payload) => {
                // console.warn('loaded', payload);
            }}
            onConnect={() => {
                // console.warn('connected');
            }}
            onRestart={() => {
                // console.warn('onRestart');
            }}
            onError={(payload) => {
                // console.error('error', payload);
            }}
            onClose={(payload) => {
                // console.error('closed', payload);
            }}
            onCommand={(payload) => {
                // console.warn('command', payload);
            }}
            onCallback={(payload) => {
                // console.warn('callback', payload);
            }}
            onProgress={(payload) => {
                // console.warn('progress', payload);
            }}
            autoConnect={true}
            quality={1}
            isDev={false}
            host="http://127.0.0.1"
            port={80}
        >
            {(payload) =>
                <div style={{ padding: 30 }}>{props.children}
                <Title/> 
                </div>
            }
        </PixelStreaming>
    );
}

import React from "react";

import "./Title.css"

export default function Title(props) {

    return (
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet
            consequat. Aliquam erat volutpat. <span className="b">Aliquam</span> <span
                className="b">venenatis</span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed
            laoreet.
        </div>

    );
}

Component Title is the React component where I can't select the text.

Problems with the latest version of pixel-streaming

I use the latest version of pixel-streaming(2.5.2), but the following code doesn't work as well as older versions(2.4.9)

// App.js

import React from 'react';
import PixelStreaming from 'pixel-streaming';

export default function Player(props) {
    const refPixelStreaming = React.useRef(null);

    return (
        <div>
            <button onClick={()=>{
                refPixelStreaming.current.cls.initConnection({
                                host: 'http://127.0.0.1',
                                port: 80,
                            })

            }}>Connect</button>
            <PixelStreaming
                ref={refPixelStreaming}
                onReady={(payload) => {
                  // console.warn('ready', payload);
                }}
                onLoad={(payload) => {
                    // console.warn('loaded', payload);
                }}
                onConnect={() => {
                    // console.warn('connected');
                }}
                onRestart={() => {
                    // console.warn('onRestart');
                }}
                onError={(payload) => {
                    // console.error('error', payload);
                }}
                onClose={(payload) => {
                    // console.error('closed', payload);
                }}
                onProgress={(payload) => {
                    // console.warn('progress', payload);
                }}
                settings={{
                    volume: 1,
                    quality: 1,
                    pixelStreaming: {
                        warnTimeout: 120,
                        closeTimeout: 10,
                        lockMouse: false,
                        fakeMouseWithTouches: false,
                    }
                }}
            >
            </PixelStreaming>
        </div>
    );
}

Could be MetaClient open source?

Hi, @markolofsen, thanks for this work, the project looks interesting. I am trying to run the MetaEditor for my hobby project and missing MetaClient. Where can I find it? Thanks!

Sending events from Stream to Unreal

Is there a way to emit events to Unreal similar to the official version of Pixel streaming

This is listed in the documentation however the emit function does not seem to be working

`refPixelStreaming.current.emit({
 type: 'string', //key of command
 value: 0, //string, bool, number
 verification_id: undefined, //server response with execute command by verification id
})`

Stream is not active. Can not emit UI interaction.

Hi !
I'm trying to interact with my UE5 project from the html. Unfortunately, I have an error when I call emitUi function

Here is the error:

• Stream is not active. Can not emit UI interaction.

Where can I enable the Stream ?

PS: I have all my UE5 project and pixel streaming server running, and I'm able to run/play my game from my React app