李健祥++郑丹
摘 要: 利用开源跨平台图形界面Qt,以及web中的最新开源框架Node.js,我们设计了一款开源的,可视化的,可以横跨windows,IOS,Android,windows phone等多平台的多媒体播放平台。后台通过Node..js搭建服务器,客户端或浏览器可以访问服务器,并为用户提供非结构化数据存储的服务。数据库为MongoDB。
关键词:Qt Node.js 多媒体播放 数据可视化 跨平台
中图分类号:TP3 文献标识码:A 文章编号:1003-9082(2016)05-0003-02
引言
Node.js是一款为服务器端web开发所设计的开源的,跨平台运行环境。虽然Node.js并不是完全由JavaScript开发的框架,但其中许多基本模块都是由javaScript编写而成。支持异步加载,事件驱动的体系架构。
Qt是一款跨平台的应用程序框架,由于其的轻量化以及运行快捷,被广泛应用于硬件平台开发领域,同时也可以运行在多个主流平台。使用Qt编写图形界面依赖C++,运行效率高。
随着我国互联网时代的爆发,PC互联网已接近饱和,移动互联网发展速度飞快。《中国移动互联网行业市场前瞻与投资战略规划分析报告前瞻》数据显示,截止2013年底,中国手机网民超过5亿,占比达81%。随着wifi与移动4G的普及,移动互联网网民呈爆发趋势。
同时,无论是PC端,移动端,嵌入式平台,都离不开多媒体播放器。然而在数据可视化,跨平台方面还有很大的提升潜力,Qt与Node.js在图形界面和web端都是非常强大的开发环境与框架。同时,大量的用户使用也为hadoop, mapreduce, MongoDB等大数据处理工具提供了很好的应用场景。
一、总体设计
1.基本功能
多媒体播放器的基本功能:播放,暂停,切换,上传,分享。这是无论任何播放器必须具备的功能。在此基础上,本文设计的播放器增加了:音乐可视化,用户音乐播放频率统计等功能。使得播放器的体验更丰富,同时通过收集web服务器与数据库中用户所产生的数据,利用大数据工具对用户行为进行分析。同时,使用云服务器,为使用者提供存储环境。
1.1整体架构
系统分为以下几个部分:客户端,web前端,web服务器,MongoDB数据库,hadoop集群以及HDFS分布式文件系统。
2.整体设计
2.1 客户端设计
客户端设计的目的是为了方便经常使用PC与移动端App的用户。与浏览器请求服务器数据类似,客户端可以通过Qt实现界面,再通过向web服务器请求数据来实现,是一种典型的C/S架构。
2.2前端设计
前端通过html5技术,从服务器后端将数据得到之后通过webAudio接口,可以实现数据的实时可视化。通过对数据不同方式的处理,可以实现不同的2D图形。同时,图形可以跟随音频和音量改变波形,展现出更好的视觉效果.
2.3 web服务器端设计
Web服务器端需要实现数据库与客户端或前端之间的交互,数据流的传递。同时,web服务器端需要充分优化,以保证在大量用户同时访问时的高并发状态,保证服务器的负载均衡,以及快速的响应时间。由于要实现对用户隐私的保护和对点击数据的收集,还需要增加服务器的数量以及安全性能。
2.4 hadoop集群与HDFS分布式存储系统设计
文件系统数据采用分布式系统存储,不仅能够胜任大量用户访问的任务,同时后期也可以利用编写MR程序来处理用户使用所产生的大数据。
3.软件设计与实现
3.1 web服务器实现
本系统的服务器端通过Node.js框架实现,分层采用MVC模式,通过连接MongoDB与文件系统,实现对结构化数据与非结构化数据的存储,客户端通过http协议与服务器交互。部分代码如下:
var express = require("express");
var router = express.Router();
var mediaPath = 'public/media';
router.get('/', function(req, res){
var fs = require("fs");
fs.readdir(mediaPath, function(err, files){
if(err){
console.log(err);
}else{
res.render('index', {title: 'bayer music', music: files});
}
});
});
module.exports = router;
3.2 客户端的实现
客户端通过Qt实现,图形界面需要提供播放多媒体流,菜单,暂停,上传,下载按钮等。核心代码的实现如下:
void MyWidget::InitPlayer()
{
//窗口基本属性
setWindowTitle(tr("多媒体播放器"));
setMinimumSize(320, 160);
setMaximumSize(320, 160);
media_object = new Phonon::MediaObject(this);
Phonon::AudioOutput *audio_output = new Phonon::AudioOutput(Phonon::MusicCategory, this);
Phonon::createPath(media_object, audio_output);
//设置播放动作
QToolBar *tool_bar = new QToolBar(this);
play_action = new QAction(this);
play_action->setIcon(QIcon(":/images/1.png"));
connect(play_action, SIGNAL(triggered()), this, SLOT(SetPaused()));
//设置停止动作
stop_action = new QAction(this);
stop_action->setIcon(QIcon(":/images/stop.png"));
connect(stop_action, SIGNAL(triggered()), this, SLOT(stop()));
//设置下一首
skip_forward_action = new QAction(this);
skip_forward_action->setIcon(QIcon(":/images/skipForward.png"));
skip_forward_action->setText(tr("上一首(Ctrl+Right)"));
skip_forward_action->setShortcut(QKeySequence("Ctrl+Right"));
connect(skip_forward_action, SIGNAL(triggered()), this, SLOT(SkipForward()));
}
3.3可视化的实现
数据可视化(Data Visualization)是信息可视化的中的一类指将数据用统计图的方式呈现出来,这种技术起源于与1960s计算机图形学,使用计算机创建图形图表,可视化的将数据各种属性变量呈现出来。一般有数据采集、分析、治理、管理、挖掘等一系列复杂的数据处理过程,然后在创建对应的可视化算法。例如饼图,散点图,柱状图等都是数据可视化常见应用。此播放器的动态柱状图就是根据节奏频率的数据可视化而展现的,部分核心代码展示:
/*可视化*/
MusicVisualizer.visualize = function(mv){
mv.analyser.fftSize = mv.size * 2;
var arr = new Uint8Array(mv.analyser.frequencyBinCount);
var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame||window.oRequestAnimationFrame || window.mzRequestAnimationFrame;
MusicVisualizer.isFunction(mv.visualizer)&& requestAnimationFrame(v);
}
MusicVisualizer.prototype.decode=function(arraybuffer, fun){
var self=this;
MusicVisualizer.ac.decodeAudioData(arraybuffer, function(buffer){
var bufferSourceNode = MusicVisualizer.ac.createBufferSource();
bufferSourceNode.buffer = buffer;
fun.call(bufferSourceNode);
},function(err){
console.log(err);
})
}
二、结语
本文讨论了一款基于Qt与node.js的跨平台可视化多媒体播放器,该系统可以在web端,PC端,android客户端,IOS客户端等多平台安全访问。同时,本文还提出了一种客户端与前端通过请求web服务器连接NoSQL,实时解析音频文件生成图像,通过音频与音量实时变化,实现数据可视化的方案。
参考文献
[1]孙增圻.系统分析与控制.清华大学出版社
[2]Brain Goetz 等 Java 并发编程实战. 机械工业出版社
[3]Jasmin Blanchette 等 C++ GUI Qt4 编程. 电子工业出版社
[4]吴军. 数学之美 .人民邮电出版社.
[5]陆文周. Qt5. 开发及实例. 电子工业出版社.