pixelstream-cn
Version:
基于虚幻引擎的像素流平台
219 lines (205 loc) • 8.78 kB
JavaScript
import "./adapter.js";
import run from "./run/index.js"; //引擎运行程序
import actionBase from "./action/base.js";
import action from "./action/index.js"; //引擎动作
import message from "./message.js"; //引擎消息
import videoCanvas from "./canvas.js";
import progress from "./progress.js";
import _structure from "./structure/index.js";
import bufferUtil from "./util/buffer.js";
import messageType from "./action/messageType.js";
/**
* @class pixelStream
* @function constructor 构造函数
* @param config<Array>
* @key keyboard<Array> 允许开放的键盘监听
* @example ["a","s","d","w","A","S","D","W","F1","F2","F3","F4","F5"," "]
* @param element<DOM> 渲染的DOM容器对象
* @param tools<Boolen> 工具是否出现
* @param baseHost<String> 云端基础地址
*
* @function render 渲染画面
* @param code<String> 渲染编号
* @param screen<String> 画面名称
* @return Promise then {} catch msg<String> resolve以后表示渲染画面成功接入
*
* @function send 发送消息
* @param data<pixelStream.action> 给UE程序发送数据对象 该对象按照pixelStream.action对象提供的标准封装
* @return Promise then {} catch msg<String> resolve为针对当前消息UE程序的回复
*
*
* 继承方式封装动作 pixelStream.action
* class MyAction extends pixelStream.action{
* $action="my_test";
* $data={message:"hello world"}
* }
*
* @example
* import pixelStream from "pixelStream";
* let ps = new pixelStream({element:this.$refs.engine});
* ps.message.responseHandel=(response)=>{ //收到ue4发送过来的数据包 该方法也会接受发送数据包的响应包
* console.log(response);
* }
* ps.message.waitHandel=(num)=>{ //排队事件触发
* console.log("前面还有" + num + "人排队");
* }
* ps.message.errorHandel=(message)=>{ //错误触发
* console.log("错误消息:" + message);
* }
* ps.message.speedHandel=(speed)=>{ //流畅度 数字越小越流畅 0-100
* console.log("当前流畅值:" + speed);
* }
*
* ps.render(code,"first3D").then(_=>{
* console.log("渲染画面成功接入");
* ps.send(new MyAction()).then(data=>{
* //收到针对该消息的响应
* }); //采用继承方式封装动作对象 并且发送
* ps.send(new pixelStream.action("my_test",{message:"hello world"})); //世界实例化pixelStream.action对象并发送
* }).catch(e=>{console.error(e)});
*/
class pixelStream{
constructor(config){
this.config={
mode:"ratio", //图像尺寸模式 stretch拉伸 ratio等比(默认)
keyboard:[], //允许的键盘
element:null, //渲染的element对象
tools:false, //是否展现工具栏
baseHost:"wss://sws.pixelstream.cn/player"
};
this.run=null;
this.rtc=null;
this.message=new message();
if(config["mode"]){ this.config.mode=config["mode"]; }
if(config["encodeKey"]){ this.config.encodeKey = config["encodeKey"]; }else{ this.config.encodeKey="CljiLwnyih7POqtNja8KeQV6sq77U9ge"; }
if(typeof(config["keyboard"])!="undefined"){ this.config.keyboard=config["keyboard"]; }
if(config["element"]){ this.config.element=config["element"]; }
if(config["tools"]){ this.config.tools=config["tools"]; }
if(config["baseHost"]){ this.config.baseHost=config["baseHost"]; }
}
setConfig(config){
if(config["keyboard"]){
this.canvas.setKeyboard(config["keyboard"]);
}
}
render(code,screen){
let _this = this;
let swsUrl = this.config.baseHost+"/"+code+"/"+screen;
let element = this.config.element;
return new Promise((resolve,reject)=>{
if(!element){
reject("渲染对象不存在");
return ;
}
//初始化外部element对象
let outElement = elementHelper.init();
element.append(outElement);
let pro = new progress(outElement);
this.run = new run();
this.run.message(this.message).start(swsUrl,this.config.encodeKey,pro).then(rtc=>{
_this.rtc = rtc;
_this.rtc.message(_this.message);
_this.canvas = new videoCanvas(_this.config.tools,_this.config.keyboard,_this.config.mode);
_this.canvas.init(outElement);
_this.canvas.mouseDownHandel=(button,coord)=>{
_this.send(new action.mouse.down(button,coord));
};
_this.canvas.mouseMoveHandel=(coord,delta)=>{
_this.send(new action.mouse.move(coord,delta));
};
_this.canvas.mouseEnterHandel=()=>{
_this.send(new action.mouse.enter());
};
_this.canvas.mouseLeaveHandel=()=>{
_this.send(new action.mouse.leave());
};
_this.canvas.mouseUpHandel=(button,coord)=>{
_this.send(new action.mouse.up(button,coord));
};
_this.canvas.mouseWheelHandel=(coord,delta)=>{
_this.send(new action.mouse.wheel(coord,delta));
};
_this.canvas.mousePressHandel=(buttons,coord)=>{
if(buttons){
_this.send(new action.mouse.down(0,coord));
_this.send(new action.mouse.down(1,coord));
_this.send(new action.mouse.down(2,coord));
_this.send(new action.mouse.down(3,coord));
_this.send(new action.mouse.down(4,coord));
}
};
_this.canvas.mouseReleaseHandel=(buttons,coord)=>{
if(buttons){
_this.send(new action.mouse.up(0,coord));
_this.send(new action.mouse.up(1,coord));
_this.send(new action.mouse.up(2,coord));
_this.send(new action.mouse.up(3,coord));
_this.send(new action.mouse.up(4,coord));
}
};
_this.canvas.touchStartHandel=(touches)=>{
_this.send(new action.touch.start(touches));
}
_this.canvas.touchEndHandel=(touches)=>{
_this.send(new action.touch.end(touches));
}
_this.canvas.touchMoveHandel=(touches)=>{
_this.send(new action.touch.move(touches));
}
_this.canvas.keyboardDownHandel=(e)=>{
_this.send(new action.keyboard.down(e));
};
_this.canvas.keyboardUpHandel=(e)=>{
_this.send(new action.keyboard.up(e));
};
_this.canvas.keyboardPressHandel=(e)=>{
_this.send(new action.keyboard.press(e));
};
rtc.setAudioHandel((stream)=>{
_this.canvas.audio(stream);
});
rtc.setStreamHandel((stream)=>{
pro.over();
_this.canvas.play(stream);
resolve();
});
}).catch(msg=>{
reject(msg);
});
});
}
close(){
this.run.close();
}
send(data){
if(!this.rtc){
return new Promise((resolve,reject)=>{
reject("还未建立连接,无法发送指令");
});
}
return this.rtc.send(data);
}
sendUIInteraction(str){
if(!this.rtc){
return new Promise((resolve,reject)=>{
reject("还未建立连接,无法发送指令");
});
}
let ArrayBuffer = bufferUtil.toBuffer(str,messageType.UIInteraction);
return this.rtc.sendBuffer(ArrayBuffer.buffer);
}
}
pixelStream.action=actionBase;
pixelStream.structure=_structure;
class elementHelper{
static init(){
let div = document.createElement("div");
div.style.width="100%";
div.style.height="100%";
div.style.position="relative";
div.style.outline="none";
div.style.tabindex="0";
return div;
}
}
export default pixelStream;