白鹭安装node_在白鹭引擎中使用NodePlayer.js开发直播视频游戏
简介
实时视频+游戏操作是非常不错的娱乐体验方式,结合物联网设备可以开发诸如:远程抓娃娃、远程打气球、打野兔、射箭等项目。
NodePlayer.js-wasm版可以非常方便的集成到最新的白鹭引擎(v5.3以上)中使用,以下是我们总结的一个集成方法。
一、准备工作
1.NodePlayer.js wasm版
2.白鹭引擎 v5.3.8
3.Egret Compiler
4.Egret Wing 3
二、创建并打开工程
三、在工程目录下的libs目录下创建NodePlayer文件夹,并将开发包或授权包内的 NodePlayer.d.ts , NodePlayer.min.js, NodePlayer.min.wasm 三个文件拷贝到该文件夹下。复制NodePlayer.min.js并改名为NodePlayer.js 。
四、在Egret Wing编辑器中打开egretProperties.json,添加一个module
{ "name": "NodePlayer",
"path": "./libs/NodePlayer"
}
1
{"name":"NodePlayer",
"path":"./libs/NodePlayer"
}
五、编译模块
在Egret Wing中打开终端,输入
egret build -e
1
egretbuild-e
这时候可以打开manifest.json,可以看到已自动加入了一行
"libs/NodePlayer/NodePlayer.js"
1
"libs/NodePlayer/NodePlayer.js"
六、修改index.html模板文件
打开 template/web/index.html,在div中添加
<canvas id="video" style="margin: auto;width: 100%;height: 100%;" />
1
<canvasid="video"style="margin: auto;width: 100%;height: 100%;"/>
七、编写代码, 打开/src/Main.ts
1. 初始化播放器
在函数
private async runGame() {
1
privateasyncrunGame(){
中添加
await NodePlayer.asyncLoad()
1
awaitNodePlayer.asyncLoad()
2.创建播放实例
private textfield: egret.TextField; private player : NodePlayer;
/**
* 创建场景界面
* Create scene interface
*/
protected createGameScene(): void {
this.player = new NodePlayer()
this.player.setView("video");
this.player.setScaleMode(2);
let stageW = this.stage.stageWidth;
let stageH = this.stage.stageHeight;
//将背景图注释,避免图片盖住视频
// let sky = this.createBitmapByName("bg_jpg");
// this.addChild(sky);
// sky.width = stageW;
// sky.height = stageH;
1
privatetextfield:egret.TextField;privateplayer:NodePlayer;
/**
* 创建场景界面
* Create scene interface
*/
protectedcreateGameScene():void{
this.player=newNodePlayer()
this.player.setView("video");
this.player.setScaleMode(2);
letstageW=this.stage.stageWidth;
letstageH=this.stage.stageHeight;
//将背景图注释,避免图片盖住视频
// let sky = this.createBitmapByName("bg_jpg");
// this.addChild(sky);
// sky.width = stageW;
// sky.height = stageH;
3.在按键事件处理中播放视频
/** * 点击按钮
* Click the button
*/
private onButtonClick(e: egret.TouchEvent) {
this.player.start("http://flv.bdplay.nodemedia.cn/live/bbb.flv");
}
1
/** * 点击按钮
* Click the button
*/
privateonButtonClick(e:egret.TouchEvent){
this.player.start("http://flv.bdplay.nodemedia.cn/live/bbb.flv");
}
八、编译运行项目
编译成功后会自动弹出浏览器打开。
点击Click!按钮,视频开始播放
九、发布项目
编译成功后打开目录,手动将NodePlayer.min.wasm拷贝到js目录下
将发布版文件用web_server发布,使用浏览器打开,播放正常。
十、Demo项目源码
白鹭安装node_在白鹭引擎中使用NodePlayer.js开发直播视频游戏相关推荐
- 在python中超简单安装mxnet_在Docker容器中搭建MXNet/Gluon开发环境
在这篇文章中没有直接使用MXNet官方提供的docker image,而是从一个干净的nvidia/cuda镜像开始,一步一步部署mxnet需要的相关软件环境,这样做是为了更加细致的了解mxnet的运 ...
- egret引擎中使用tiled运行在微信小游戏中
egret的官方文档,对tiled的介绍不是很细致,很多东西都需要摸索.现在把踩的坑记录下来.作为一个备忘 引用tiledmap的库 在GitHub上下载egret的tiledmap支持库:https ...
- 在vue中使用web3.js开发以太坊dapp
前端如何使用以太坊智能合约方法 这里讲的是前端与MetaMask之间的交互 文中涉及到的官方文档 web3.js 1.0中文手册 MetaMask官方文档 web3.js文件 链接:https://p ...
- 【中英双语】使用JavaScript 及Three.js开发3D网页游戏
此教程共2.0小时,中英双语字幕,画质清晰无水印,源码附件全 课程英文名:3D Web Game Development with JavaScript and Three.js 下载地址 百度网盘地 ...
- 游戏引擎开发和物理引擎_视频游戏开发的最佳游戏引擎
游戏引擎开发和物理引擎 In this article, we'll look at some of the most popular game engines for video game deve ...
- IPHONE游戏开发 第二章 游戏引擎剖析
游戏引擎剖析 为了解决"如何在IPHONE上创建一个游戏"这个大问题,我们需要首先解决诸如"如何显示图像"与"如何播放声音"等一系列小问题. ...
- 白鹭安装node_Mac OS X 系统下安装和部署Egret引擎开发环境
概述 Egret基于TypeScript开发的,而TypeScript编译工具tsc是基于Node.js开发的.所以在安装过程中,我们先需要对于基础支持工具进行安装.需要安装的软件如下: Node.j ...
- 白鹭h5加java_白鹭引擎EUI做H5活动 入门篇
前言: 本学习文档的目的是为了实现h5,或者简单的h5游戏,比如说,我们要实现一个可以左右,或者上下移动的场景的h5,在场景移动的过程中,会有相应的动画或者操作,我们通过 js 也可以实现,但是为了流 ...
- Egret白鹭引擎开发微信小游戏之保存图片到相册
玩家在玩小游戏的过程中,很多时候想要保存一下当前的截图.或者保存游戏内精美的画面到相册,一方面是为了记录在游戏中的美好时刻,另一方面则是能够更好地和朋友们分享我在这游戏中获得的荣耀和快乐,因为我们就会 ...
最新文章
- 形象理解深度学习中八大类型卷积
- code blocks 代码颜色_vuepress中实现代码折叠、高亮
- 用yum查询想安装的软件
- 关于android:id=@+id/xx的理解
- 简述冯诺依曼工作原理_深入浅出讲解计算机原理
- MySQL读写分离事务策略实现
- 深度剖析Kubernetes API Server三部曲 - part 2
- 一、核心C#(第二部分)
- UNIX V6内核源码剖析——unix v6 全貌
- [Leedcode][第215题][JAVA][数组中的第K个最大元素][快排][优先队列]
- 深入理解CSS六种颜色模式
- 诗与远方:无题(八十一)
- SQL Server 2012 显式授权示例
- ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法
- c语言中宽字节,fgetwc读取的是宽字节么?
- 结巴分词,停用词生成词云图
- 图片pdf合并软件:合并的方法介绍
- AI实践之路:线性/逻辑回归背后的广义线性模型与最大似然估计
- 工业级静默活体检测开源算法技术解析记录
- java-net-php-python-jspm人力外包服务公司招聘管理系统计算机毕业设计程序
热门文章
- Linux 安装 FTP服务
- 手机音质变差_为什么手机听音乐音质很差
- 深入分析星期日女孩问题:李叔叔有两个小孩,至少有一个小孩是在星期日出生的女孩,两个小孩都是女孩的概率是多少?
- 浏览器扩展一些好用插件
- 痞子衡嵌入式:恩智浦i.MX RT1xxx系列MCU启动那些事(5)- 再聊eFUSE及其烧写方法...
- 教你几招搞定 LSTMs 的独门绝技(附代码)
- 油烟净化器风机都有哪些?风机安装标准
- kvm基础设置 网桥
- android8.0索尼z5,Z5遭抛弃?索尼公布安卓8.0设备升级名单
- html桌面图标样式,Win7桌面图标样式怎么修改和还原|Win7修改和还原桌面图标样式的方法...