基于Qt的跨平台多媒体播放器

2016-05-31 00:15李健祥郑丹
中文信息 2016年5期
关键词:数据可视化跨平台

李健祥++郑丹

摘 要: 利用开源跨平台图形界面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. 开发及实例. 电子工业出版社.

猜你喜欢
数据可视化跨平台
跨层级网络、跨架构、跨平台的数据共享交换关键技术研究与系统建设
一款游戏怎么挣到全平台的钱?
跨平台APEX接口组件的设计与实现
移动可视化架构与关键技术综述
可视化:新媒体语境下的数据、叙事与设计研究
我国数据新闻的发展困境与策略研究
基于QT的跨平台输电铁塔监控终端软件设计与实现
基于OPC跨平台通信的电机监测与诊断系统
基于B/S的跨平台用户界面可配置算法研究