inveta / peer-stream Goto Github PK
View Code? Open in Web Editor NEWLightweight WebRTC SDK for UnrealEngine's PixelStreaming
Home Page: https://inveta.cn
Lightweight WebRTC SDK for UnrealEngine's PixelStreaming
Home Page: https://inveta.cn
I tried running the signal.js using the commands provided in this repo for demo. But when I tried to stream to external network using ngrok, the URL would only display black screen with no video or audio. Is there anything that can be done to fix this problem? Or I am doing something wrong
这里是vue的代码
<!-- eslint-disable vue/no-deprecated-html-element-is -->
<template>
<div class="container">
<div ref="ueDemo" class="ue-demo">
<!-- <video is="peer-stream" id="ws://5.5.5.31:80/"></video> -->
</div>
</div>
</template>
<route>
{
meta:{
title:'UEDemo',
keepAlive:true,
tabbar:true
}
}
</route>
<script setup>
import '@/utils/peer-stream'
import { ref, onMounted } from 'vue'
const ueDemo = ref(null)
onMounted(() => {
const ps = document.createElement('video', { is: 'peer-stream' })
ps.id = 'ws://5.5.5.31:80/'
// ps.signal = 'ws://5.5.5.31:80/'
console.log(' ps.id', ps.id)
ueDemo.value.append(ps)
})
</script>
<style lang="scss" scoped>
.container {
width: 100vw;
background: #ccc;
padding: 20px;
box-sizing: border-box;
.ue-demo {
height: 80vh;
background: #999;
border-radius: 8px;
}
}
</style>
这里是 部分 peer-stream.js 代码
// setupWebsocket
connectedCallback() {
// This will happen each time the node is moved, and may happen before the element"s contents have been fully parsed. may be called once your element is no longer connected
if (!this.isConnected) return
let signal = this.getAttribute('signal') // 这里是null
if (!signal) {
const ip = this.getAttribute('ip') || location.hostname || 'localhost'
const port = this.getAttribute('port') || 88
const token = this.getAttribute('token') || 'hello'
signal = this.getAttribute('id') // 这里直接取id 可以
// signal = `ws://${ip}:${port}/${token}` // 这里就会变成 localhost:88/hello 结果一直链接不了
}
this.ws.close(1000, 'Infinity')
this.ws = new WebSocket(signal)
this.ws.onerror = e => {
console.log(e)
}
拿到dom 后进行添加video实例 ,此时 peer-stream.js 拿不到signal的参数,直接在里面写id 是可以的,请问是我用的有问题吗?我该如何不更改peer-stream.js 才能正常使用呀
我打包了一个ue4.26包启动参数
set publicIp=%1
set streamerPort=%2
start MyGame426.exe -PixelStreamingIP=%publicIp% -PixelStreamingPort=%streamerPort% -RenderOffScreen -Unattended -ForceRes -windowed -ResX=1920 -ResY=1080 -AudioMixer -graphicsadapter=0 -AllowPixelStreamingCommands -PixelStreamingEncoderRateControl=VBR
启动的信令服务器bat
node signal.js player=77 engine=7777 token=hello limit=4
但是我不清楚访问哪个网页才可以看见画面
你好,在博客介绍中提到无人访问时经过一段时间自动关闭UE5
请问现在的库中包含这部分功能吗?
或者能提供相关的思路吗?
哈哈,不要着急,马上给您研究下。
Originally posted by @g0415shenw in #29 (comment)
无论是旧款iPhone还是新款,似乎都无法打开。但是安卓的可以
现在看UE使用UDP端口完全是随机选,UE官方文档也完全没有说明。使用了coturn 作为Turn服务也只能设置从 Turn转发出的udp的端口,无法限制UE的端口。 查到浏览器端可以从policy 设置 WebRtcUdpPortRange 去进行设置。 从UE侧有什么方式去限制呢?
One some machines when loaded in chrome on OSX I get
ICE Connect: checking (for a while followed by)
ICE Connect: disconnected
any ideas?
Hello,
Unfortunately the stream does not work on the Ipad, Iphone or on Safari on the Mac.
the stream does not build up.
After I loaded the following polyfill "https://github.com/ungap/custom-elements#readme"
the CustomHTML file is loaded but the video does not load.
(Firefox on Mac and edge,Firefox,Chrom on Windows is working)
大佬好,谢谢提供这么好的脚本供使用。
我使用了脚本内存池,开了三个空闲UE5进程,使用的是UE5.1的默认第三人称场景。
GPU使用的是 4080
开启脚本和打开浏览器之后。才三个人就卡得不行了。GUU占用率直接100%,请问有什么优化的方法吗
如题。
ue5.03
我目前的使用流程如下:
启用像素流插件,
在编辑器偏好-播放-额外启动参数中配置-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888。
打包后在exe应用的快捷方式后添加-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888。
node signal.js 启动信令服务器。
打开写好的html前端,信令服务器会提示已连接。
这时只能跟官方的像素流插件一样,我手动在服务器端启动一下ue的应用程序快捷方式,我的前端才能看到。如何实现自动在websocket链接时启动ue程序呢?
是我配置时漏了哪里吗?
我设置limit = 5,one2one = true,5个用户正常连入,UE实例只能连入4个,最后一个访问的用户黑屏,缺了一个实例连接,有知道是什么问题吗
Hi! First of all: thanks for work. this is so much better than Epic's code.
Question:
In UE I'm trying this parameters now, like your documentation says:
-PixelStreamingURL="ws://localhost:8888" -windowed resx=1280 resy=720
But before, with Epic's code/template, I was using this:
PixelStreamingIP=localhost -PixelStreamingPort=8888 -windowed resx=1280 resy=720
It seems that my old parameters brakes the app when I try to run it now.
and the new parameters don't break the app, but also, doesn't show anything in the index.html
I ran the index.html with the unreal simulator and it worked. I could see myself in the index.html
Can you send me what are the parameters you used in your Unreal project?
我使用这个demo但是 html demo跑起来没有反应,就是空白网页能解答一下吗
我想要获取来自浏览器的麦克风音频可以做到吗
Hello, thanks for your lightweight WebRTC.
I have a problem when I want to connect via internet.
unfortunately no connection is established.
with the heavy sdk kit from Unreal it works without any problems, I use the same stun server in each case.
do you have any ideas ?
It took me awhile to find out the test file not working, In the test template, Conncting fine, but no stream out put.
我测试了下UE4.27版本是不支持的,UE5版本是OK的,如果想基于UE4.27版本去做,如果做相应的修改呢
this is very unnormal style:
❌ signaler closed: 1
index.js:7 ✅ connected to ws://localhost:8989/
peer-stream.js:187 ↓↓ ❌ Engine:8888 stopped
peer-stream.js:187 ↓↓ ✅ Engine:8888 started
index.js:7 ❌ signaler closed: 1
I tried streaming using the sample commands provided in the repo, but no audio from inside Unreal was streamed to the generated URL, what could be the problem?
麻烦详细的讲解一下ue5像素流蓝图和前端网页的事件交互流程,文章、截图、代码最好都有。
本人目前的水平:已经可以创建hello world ue5程序并打包,启动信令服务,前端访问像素流了。
问题:例如前端发送一个事件,ue蓝图接收到消息后执行某个操作(打印hello、创建物体、移动角色位置等)。
客户端和服务端连接的时候提示: player101 disconneted ,这个问题有了解怎么解决吗?
在PIXSEL STREAMING环境下,点击文本框,无法调动输入法,只能打英文,请问老铁们是怎么解决的
在浏览器中,鼠标右键无输入,对于像素流送过来的内容
signal
const iceServers = [{ urls: [ //"stun:XX.XX.XX.1XX81" "stun:XX.XX.XXXX:88" ], },]
// sent to UE5 as initial signal ue.send( JSON.stringify({ type: "config", peerConnectionOptions: { iceServers }, }) );
peer-stream.js
const iceServers = [ { urls: [ //"stun:XX.XX.XXXX4:81" "stun:XX.XXXX.XX:88" ], }, ]
setupPeerConnection() { this.pc.close(); this.pc = new RTCPeerConnection({ sdpSemantics: "unified-plan", bundlePolicy: "balanced", iceServers });
执行到node [signal.js没有任何反应了
在集成过程过报错:[Vue warn]: Unknown custom element: pixel-stream - did you register the component correctly? For recursive components, make sure to provide the "name" option.
把代码上传至服务器,在服务器上打开正常,在其它电脑上打开黑屏,需要如何设置可以在公网进行使用呢?
现在的视频流大小是固定的
Hello there,
Sending UI Interactions or commands doesnt seem to work
// Generic Input Messages. Range = 50..59.
UIInteraction: 50,
Command: 51,
any advice?
你好,使用这个浏览器没有声音
考虑到好多朋友都在用UE4的像素流
建议维护一套功能全面的UE4.27版本
另外UE5的话,就跟着官方版本进行迭代
@xosg 你觉得咋样
如题
另外,一对一映射,是不是相当于队列(UE5启动池的队列)
如果有新的接入,就生成一条记录,当队列满了就在外面等着,当有新的空闲链接了,是不是就可以进入了
那关于ue4像素流的信令服务怎么重写就是有点不理解,我想从他的demo的插件调用视频流,例如127.0.0.1:xxxx这个地址的视频流,用在其他网页上,我是主要写cpp的能给一点思路吗,谢谢。
How to add a turn server to this? most people cannot connect without a turn server !
Howdy it seems that it is working really great.
How would you launch multiple instances ?
Looking to host this on EC2 or azure and use 1 gpu for multiple game instances
步骤如下:
1、启动one2one模式
2、配置5个gpu实例
3、打开3个网页,再打开第四个网页 此时无法打开
4、然后关闭第三个网页,之后再打开第三个和第四个网页 就可以打开4个了。
具体要怎么操作,可以运行您这个像素流
如题,网页上的鼠标跟UE的鼠标偏移很大的问题,导致隐藏UE鼠标之后,用网页鼠标去点击UE里面的POI点位的时候位置偏移两个鼠标位置偏移比较大,点不到。请问有碰到过类似的问题吗,或者相关解决思路
I am wondering how do I lock the mouse with peer-stream? I want to lock the mouse to the when the player clicks into the video container. When the player wants their mouse cursor back they will need to click the Esc key. I believe this functionality already exists in Epic's original code but I can not figure out how to enable it with peer-stream. I appreciate that the work you have done here to simplify the solution. Thanks.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.