技术小站：
厂商活动：
地点：北京
时间：10月14日 13:00 - 17:30
地点：北京
时间：10月16日 14:00 - 17:00
地点：武汉
时间：10月19日 9:00 - 18:00
地点：深圳
时间：11月8日 13:00 - 17:30
零基础快速成为Android项目开发工程师
ARM裸机开发实战(第1期加强版)
张飞硬件设计与开发视频教程
从0到1自己动手写嵌入式操作系统
张飞电子视频***共十部
移入鼠标可放大二维码
基于J2ME的Sprite手机移动视频监控系统
来源：本站整理
作者：佚名日 09:38
[导读] 　　1引言
　　随着社会的发展, 视频监控技术在各行各业得到了广泛的应用。如何让用户实现随时随地进
　　随着社会的发展, 技术在各行各业得到了广泛的应用。如何让用户实现随时随地进行监控, 手机移动监控系统提供了一个很好的解决方案。通过无线网络与互联网的结合, 手机移动监控系统把监控设备的视频信号通过移动互联网络传输, 实现实时在线监控现场情况。目前, 手机移动监控系统所采用的技术主要是利用J2ME 的P layer播放器技术, 进行现场监控, 不仅需要手机支持RTSP等实时流媒体协议, 而且对移动互联网有一定的要求。本文利用J2ME 的Sprite, 以动画的效果来显示服务器传输过来的现场监控图片, 模拟视频监控, 达到实时视频监控的要求。
　　2 系统的设计
　　手机移动监控系统由视频采集器、服务器、移动互联网和手机4个主要部分组成, 整体架构如图1所示。
　　图1 整体架构图
　　系统功能: 1) 视频图像的采集编码, 将视频采集器获取的图像以适当的编码格式存放到服务器上; 2) 图像的传输, 当用户向服务器发送请求时,服务器根据请求将采集的图像发送到用户手机终端, 传输采用Datagram方式; 3) 图像的显示, 当手机终端获取到图像后, 如果是非异常情况, 将图像以静态的方式显示出来, 如果是异常情况, 手机终端以动画的形式显示图像视频; 4) 其他辅助功能,如异常报警、访问权限设置、视频捕捉、监控设备控制等功能。
　　系统工作流程: 视频采集器将现场情况采集传输到服务器端, 服务器在接收到采集的数据后对数据进行相关处理并及时保存到数据库中, 同时, 等待手机的连接访问, 如果手机发出请求, 服务器就通过移动互联网将采集的现场情况传输到手机终端, 以便用户对现场情况进行监控。考虑到实际的网络流量等问题, 而且现场(用户的家中或办公室)没有异常情况时, 处于同一状态, 因此监控系统只需发送一张现场关键帧图片到用户手机上, 只有现场出现异常情况时, 监控系统会警告用户, 然后根据用户的要求将现场的情况以关键帧图片的方式连续发送到用户手机上, 由用户的手机通过J2ME 的Sprite把现场图片以动画效果的形式展现给用户, 实现对现场的实时视频监控, 并节约网络流量。
　　服务器端的设计: 服务器端运行于远程计算机, 由J2SE 实现, 其主要功能是捕获并保存现场监控数据。具体步骤如下: 1) 获取视频采集器的地址; 2) 将视频采集器采集的视频序列输入到数据池中; 3) 由服务器采用适当的关键帧算法, 从视频序列中提取出相应的关键帧; 4) 根据客户端的要求发送相应的关键帧图片数据。
　　客户端的设计: 客户端的主要功能是以动画效果来显示服务器传输过来的现场监控图片, 模拟视频播放, 实现对现场的实时视频监控。其硬件要求:
　　作为监控手机, 在本系统中无特别要求, 只需支持M IDP2. 0即可(目前手机已普遍支持M IDP2. 0)。
　　3 系统的实现
　　3. 1 服务器端的实现
　　系统服务器平台使用Apache Tom ca,t 对于服务器端的实现, 本文主要探讨了如何进行服务器端的网络连接和图像数据的传输, 其中涉及的代码为Server. java和Sender. java。Server. java用于建立服务器端的连接, 接受客户端的请求, 根据客户端的数据报获取客户端的地址, 然后将从采集器传输过来并经处理过的现场信息以图片的方式由SSender. java传输到用户手机终端。
　　3. 2 客户端实现
　　手机终端主要是涉及J2ME 中的用户界面编程、客户端通信、监控图像显示等方面的技术。MONitor. java代码用于描绘用户界面; Clien.t java代码建立客户端通信连接, 接受服务器端的图片数据并显示; CSender. java代码类似服务器端的SSender。java代码主要用于客户端信息的传输。
　　public class C lientimplements Runnable
　　{
　　图2 测试图。
　　4 实验
　　根据上述的设计与实现, 本文以Tom cat6. 0、J2MEW ire lesSToo lk it2. 5为实验平台对系统进行了测试, 测试结果如图2所示。这三张图片是手机以动画效果播放监控现场情况时, 在不同时刻所捕捉的。系统测试的结果达到了实时视频监控的要求。
　　本文提出的手机移动视频监控系统解决方案,其创新之处在于: 利用Sprite技术以动画效果的形式显示现场监控情况, 达到了实时视频监控的要求, 避免了目前采用手机播放器播放实时视频存在的系列问题, 同时, 将动画形式与静态图片形式结合起来, 节约了网络流量。此种方案实现简单, 不受手机型号限制和技术限制( 只要求手机支持M IDP2. 0即可), 适用性广。
Sprit相关文章
Sprit相关下载
J2ME相关文章
J2ME相关下载
技术交流、积极发言！ 发表评请遵守相关规定。
Phononic创始人兼首席执行官Tony Atti博士指出，Phononic打破技术瓶颈，研发出一款小尺寸的半导体制冷芯片，可智能去热加热，该款器件可以广泛应用于电子、...
作为承载万物互联的蓝牙、Wi-Fi、ZigBee等主流的无线传输技术在迎接物联网时代路上正加速更迭，并给细分市场带来更大的应用空间，然而这些技术对同时...
创新实用技术专题
供应链服务
商务及广告合作
Jeffery Guo
关注我们的微信
供应链服务 PCB/IC/PCBA
版权所有 (C) 深圳华强聚丰电子科技有限公司
电信与信息服务业务经营许可证：粤B2-后使用快捷导航没有帐号？
其他登录方式
—— 新手入门 ——
—— 智友精华 ——
查看: 7800|回复: 137
在线时间1326 小时最后登录阅读权限40UID4883357注册时间积分2010精华0
, 积分 2010, 距离下一级还需 990 积分
主题帖子 金币1482 元 智豆201 点
本帖最后由 bl1985 于
19:19 编辑
& && && && && && && && && && && && && && && && && && && && && && && && && && &&&
应用简介：
Fast Burst Camera（快速连拍相机）是Android平台上最快的相机应用程序，每秒可以高速拍摄30张照片（低端设备上每秒能够拍摄5-10张照片），不仅仅是最新的iPhone才能办到！
主要功能：
- 按住快门按钮进行连拍，或触摸快门按钮快速单拍
- 无延迟快门 - 按下快门按钮即可拍摄照片
- 支持闪光灯、对焦、变焦
- 支持关闭快门声（无声拍照，偷拍利器）
- 支持多种照片分辨率
- 自定义连拍延时
- 自定义拍摄模式（连拍、拍摄1/3/5张、预拍摄、运动触发）
- 自定义屏幕触摸操作（无操作、拍摄、对焦和变焦）
- 创建GIF动画（测试版，需要在高级设置中启用）
- 将连拍照片拼接成一张照片，并支持多种布局和效果
- 自定义照片存储位置和命名标签
更新日志：
- 修复若干问题
- 优化Android 4.x设备上的用户界面
19:05 上传
19:07 上传
19:05 上传
19:05 上传
软件下载地址：
游客，查看隐藏内容请或一键去隐藏
您的贴子很精彩！希望再分享您的下一贴！
您的付出是论坛的动力,感谢您一直支持
总评分:& + 5&
在线时间3126 小时最后登录阅读权限50UID3883508注册时间积分5522精华0
, 积分 5522, 距离下一级还需 2478 积分
主题帖子 金币3745 元 智豆3 点
智友移动版
呃。。。是沙发？& &同情楼主。。。
在线时间367 小时最后登录阅读权限20UID6229180注册时间积分429精华0
, 积分 429, 距离下一级还需 271 积分
主题帖子 金币291 元 智豆0 点
智友移动版
小手一抖，，，
在线时间516 小时最后登录阅读权限20UID2286231注册时间积分624精华0
, 积分 624, 距离下一级还需 76 积分
主题帖子 金币350 元 智豆1 点
智友移动版
这个好东西
在线时间2399 小时最后登录阅读权限45UID1627118注册时间积分3434精华0
, 积分 3434, 距离下一级还需 1566 积分
主题帖子 金币1638 元 智豆407 点
下载先收藏了，谢谢分享
在线时间311 小时最后登录阅读权限20UID5874498注册时间积分356精华0
, 积分 356, 距离下一级还需 44 积分
主题帖子 金币412 元 智豆0 点
智友移动版
这看来是好东西
在线时间109 小时最后登录阅读权限20UID5232478注册时间积分234精华0
, 积分 234, 距离下一级还需 166 积分
主题帖子 金币592 元 智豆0 点
安智有你更精彩
在线时间186 小时最后登录阅读权限20UID999760注册时间积分319精华0
, 积分 319, 距离下一级还需 81 积分
主题帖子 金币460 元 智豆13 点
这么精彩吗？试用下
在线时间133 小时最后登录阅读权限20UID5727489注册时间积分341精华0
, 积分 341, 距离下一级还需 59 积分
主题帖子 金币2372 元 智豆0 点
好东西啊...
在线时间274 小时最后登录阅读权限20UID2252860注册时间积分307精华0
, 积分 307, 距离下一级还需 93 积分
主题帖子 金币176 元 智豆0 点
智友移动版
有用！！！！一、硬件背景
二、项目欣赏1、TGA移动游戏官网2、UP+邀请函3、天天酷跑里约进击版
三、技术创意点1、CSS3动画2、Sprite动画3、重力感应+视差4、字体图标5、自适应SVG图形6、Loading进度条7、单屏滑动8、游戏9、地理定位10、音频使用11、手机重度新官网
一、硬件背景（重要！）
& & 易观智库的一个报告指出，2013年中国移动互联网网民规模达6.52亿，其中70.1%的用户使用安卓手机，26.1%的用户使用苹果手机。高收入网民中，有一半以上都是用IOS系统，这个比重在低收入群体中只占17.71%。中低收入网民多使用安卓系统的手机，占比分别为66.67%和76.09%。
& & 先提出中国移动互联网网民结构是为了让大家在开始项目构思的时候，就要清楚面对的群体是什么，在项目的进展中遇到问题时，结合时间和效果，能够有所抉择。这个问题很重要，就像我们在PC网页提出并且已经被广泛接受的&优雅降级&原则：在Google&Chrome、Firefox、Safari、QQ浏览器极速模式等浏览器下，利用新技术（HTML5、CSS3、Javascript等）给用户创造更多新鲜的体验。但是IE6、IE7、老系统下的QQ浏览器兼容模式等浏览器，就只能查看到普通的没特效的网页。
& & 这个问题在移动端的展现只有过之而无不及。如果说IE6是PC浏览器的蛀虫，那安卓低端机就是手机浏览器的蛀虫。安卓手机配置和系统可谓千千万种，CPU跟网页展示效果卡不卡息息相关，安卓系统版本跟网页基础呈现也息息相关（例如安卓2.0不兼容CSS3的圆角属性border-radius等）。（CPU中文意思是处理器，手机反应快慢，卡不卡，都跟CPU息息相关。现在市面上低端机定义是CPU频率800M以下，800M至1.5G属于中端机，高端机就是双核1G以上的手机。）
& &&在理解这个问题的前提下，进行手机移动网页构思及重构的时候，就会有针对性的进行取舍，使得项目得到最大化的效率。
& & 下面将会以我们近期制作的比较出色的手机专题网页作为案例，来告诉亲爱的大家，我们前端能做什么，希望可以对今后的创意参考有所帮助。
二、项目欣赏
1、TGA移动游戏官网
TGA城市拉力赛
2、UP+邀请函
3、天天酷跑里约进击版
三、技术创意点
& & 一般在制作强交互、多动画效果的网页前，建议产品、设计、前端一起开会探讨实现细节。同时要求设计师有很良好的手机网页设计习惯和一定思路的展现效果，以及要求产品有很大的包容心、懂得取舍。
1、技术点：CSS3动画&&
适用范围：相互联系又相互独立的元素&&
设备要求：中高端手机
& & 会发现UP+邀请函里用的最多的就是动画效果了，其实都是用CSS3写成的。CSS3动画可以理解为一个元素的a状态，让它以逐帧展示的方式变成b状态。基本的变形有scale（缩放）、translate（位移）、rotate（旋转）、skew（倾斜）等，再加上color（颜色）、opacity（透明度）等，利用transition（转换）和animation（动画）加上延时效果，动画就出来了。听着晕吧？看看下面的例子。
①&独立元素间的互动
& & 这块动画并不是前期就想好的。在制作过程中，发现每页的元素进入动画都差不多，这样用户容易感觉无聊而没有兴趣往下翻页。为了增加末页的触达率，需要每翻一页都给用户带来一个信息：下面的内容会不一样的哦，请继续往下翻。
& & &我是玩家&这一屏的小元素都跟游戏有关系，英雄联盟的Q版盖伦，游戏玩家必备手柄，让他们互动起来。手柄按常规方式进场（旋转+缩放+透明度），盖伦也按照常规方式进场（位移+透明度），但是让盖伦的位移轨迹跟手柄有少许重叠，就造成两者相撞的效果。手柄被撞需要有反馈，就被弹开了一下（位移）。
②&单元素自我呈现
& & 看到这一屏设计稿的时候，真的不知道从何下手，常规动画效果上面的页面都使用了，这屏的元素还不多，如何不无聊？初期的想法是让小三角从圆里蹦出来（缩放+位移+透明度），跟首屏呼应。可是只有一个小元素蹦出来，略显单薄。换了个方向思考，小三角可以自我呈现啊。利用它的形状和方向，模仿风筝或者飞机的动效，给予一个非直线运动轨迹，最终呈现效果就出来了（缩放+位移+旋转+透明度）。
& & 这个在最开始讨论的时候产品就说了需要有门被打开的动效。实现方法很多，最常规的是利用图片帧的方式，多张不同状态的门的图片进行切换，造成门在逐渐打开的效果。优点是能制作各种动效，缺点是增加图片的数量，对页面加载速度造成压力（更多可以查看下面的sprite动画介绍）。好在这扇门是一个纯色矩形色块，可以利用CSS3的3D变换（旋转3D），做成门往里面打开的效果。如下图右一的rotateY，把旋转的中心线定为门的左侧即可。
& & CSS3的变换属性不算多，但是把不一样的参数结合起来，就成了不一样的展现效果。如果大家在开始项目前都有这么些概念和认识，也许不需要前端参与前期讨论都可以很顺的把流程走下来，提升效率。
2、技术点：Sprite动画
适用范围：单独形象有多帧动画&&
设备要求：无
& & Sprite动画的想法来自传统的动画行业，多张图在一定时间内切换，形成视觉上的动态效果。Sprite动画特别适合多细节的逐帧动画展示，但是对图片的要求很高，需要先生成每帧的图片，如下图。这张图片压缩之后都还有119K大小，成本是很高的。
& & 本来酷跑里约版几乎每页的小角色都有sprite动画的，文件加起来有1.5M。在PC网页里，几M都是可理解的，但在手机，几百K都已经是致命的了（在中国国情下）。所以在上线第二天，紧急处理网页，只留下审判女王的动画，访问延时从16秒直线下降到6秒。所以如果想在项目里应用sprite动画，需要仔细斟酌。
3、技术点：重力感应视差
适用范围：相互独立的元素&&
设备要求：中高端手机
& & PC端的网页视差展现靠鼠标动作（鼠标移动或者滚轮），手机端的网页视差展现可以依靠设备特性&&重力感应。当手机的水平方向改变时，网页内给予重力感应的元素就会跟着改变位置，并且依据赋值的深度的不一样，位移速度也不一样，这样就能造成视差的效果。在用户发现网页跟自己有互动时，好感度会立增。
& & 除了在展示性网页使用重力感应做成视差效果之外，还可以利用它来制作小游戏，增强互动。例如最出名的重力感应球游戏。
4、技术点：字体图标
适用范围：纯色矢量图
设备要求：中高端手机
& & 字体有一个非常好的特性，可以容易设置颜色大小或者变形，而CSS3的@font-face就是为了结合字体和图标而生的。以邀请函为例，把页面上所有纯色矢量图转化为字体文件之后，节省97.37%的带宽（约370k），这对手机网页加载是非常大的一个帮助。但是对生成字体的图标的要求是，只能包含一个颜色，且为矢量图。所以在呈现风格和文件大小之间的取舍，根据项目而定。
5、技术点：自适应SVG图形
适用范围：基础图形
设备要求：中高端手机
& & 邀请函那条贯穿8个页面的折线是使用SVG画出来的，优点是可以根据屏幕进行自适应匹配，且大小能比切成png24的图片节省98%的带宽（约65k）。缺点是自适应的图形之间比较难定位。例如iPhone4s竖屏的情况下折线的角度为60&，横屏的情况下折线的角度为25&，贯穿的位置可见不一致。但是线条上面还放着其他元素，或者还有其他文字依据它来定位，这样就出现问题了。所以我们的处理是选择一定的屏幕大小进行细微优化，但是从概念上就放弃&线条必须从元素正中间贯穿过去&的想法，这只是一种硬解决办法。
& & 手机上SVG可以制作出很多图形、线条的组合体，但是也需要产品阶段就清晰哪些能做，哪些能舍弃，然后找出一个最适合的解决办法。就像邀请函，选择做折线，就放弃一定设备的元素定位问题。如果选择元素定位第一，则需要更换贯穿线条的设计。（其实我不是很建议用贯穿线条的想法，难实现。）
6、技术点：Loading进度条
适用范围：比较大的页面
设备要求：无
& & 据&Compuware&的调查，用户在使用手机时，如果遇到加载超过5秒的手机网站，74%的用户会选择离开。即便用户对手机应用相对有耐心，也只有50%的用户会容忍加载超过5秒。之前内部的一项网速测试算出访问我们专题的手机平均网速只有70K/s，如果容忍时间是5秒的话，我们的网页加起来需要控制在350K以内，但有时候内容多了图片大了加载时间想控制都没办法。有一个可以称呼为时间小偷的办法，就是给网页增加loading进度条。loading需要有动画来分散用户注意力，简单的动画可以为网页争取多5秒的时间，复杂的动画则可以争取更多时间。在loading的时候就先把前几屏的图片加载上，跳转到网页后就可以直接呈现出来了。这种方式比让用户在空白首页干等体验更好。美国研究生项目资讯网站上有五分之一的人承认曾经对&怠慢&自己的人发火，loading就是告诉我们的用户，我们在为他们着想，希望给他们更好的体验。
7、技术点：单屏滑动显示
适用范围：内容或者色块有明显区分的
设备要求：无
& & PC网页一般是直接垂直平铺内容的，取决于鼠标和键盘的操作方式。不推荐内容横向平铺，不方便查看，也不符合用户使用习惯，除非有对鼠标、键盘操作进行相应的设置修改，制作成本比较高。手机网页的出现却打破了这种僵局，竖向滑动横向滑动，对手机用户来说都是非常习惯的操作了。但是必须引入单屏滑动的概念，一滑一屏。竖向的可测试UP邀请函，横向的可测试TGA官网。单屏滑动要求每屏内容不可过多，有合理的布局安排，如果内容多且要求连贯性，则不适合。像邀请函这样内容不多，每块的颜色也有明显区分的设计，用单屏滑动更能凸显品质。
8、技术点：游戏
适用范围：结合产品特性给用户带来强交互体验
设备要求：中高端手机
& & 手机网页因为设备特性可以创造出很多特别的小游戏，如刮刮乐（canvas）、吹蜡烛（麦克风api）、跟手3D图像（sprite动画+手势）、接金币（CSS3动画+Javascript+手势）等。这些小游戏不仅可以增强产品和用户间的互动，还可以展示大公司的技术研究，带来好的市场口碑，可谓一箭多雕。但也有缺点：开发时间长，对设备要求也比较高。例如TGA官网前的接金币小游戏，搭框架需要10天左右的时间。
& & 对于游戏这一块，也是我们TGideas网站重构三组在努力探索的方向，相信以后可以给大家带来更好更快的小游戏，请关注后期的手机网页小游戏探索。
9、技术点：地理定位
适用范围：需要结合地理位置不同展现的网页
设备要求：无
& & 功能跟地理位置息息相关的应用例如大众点评、地图、滴滴打车等，都会先获取用户的位置再进行匹配性内容展示，网页里有时候也可以利用这个功能。例如TGA的城市拉力赛里就应用了地理定位，帮用户快速定位到所在城市，而不需要进行手动选择，立即给自己的城市加油。
10、技术点：音频使用
适用范围：有特殊体验要求的
设备要求：中高端手机
& & 声音可以给用户带来更多新鲜体验。PC网页对于声音的应用比较局限是因为台式机需要有耳机或者音响的辅助，手机网页则很容易用声音来吸引用户注意。但是音频压缩大小和质量还有待研究。TGA城市拉力赛里应用了音频作为用户的惊喜体验，期待得到的反馈。
11、手机强互动形式新官网（上述多个技术点的综合应用）
适用范围：每屏内容适中，增加少许动效提升品质
设备要求：无
& & 官网并不是只能规矩罗列平铺直叙的。模块和模块之间可以使用单屏滑动来衔接，模块内容比较多的情况可以横向滑动延伸。初次进入官网，首屏内的元素利用CSS3动画制作酷炫效果，官网不再单调！
上面介绍的都只是手机互动网页的冰山一角，更多的还需要产品+设计+前端一起去探索和研究，掌握了基础的知识点之后，相互组合迸发出的新事物，就是我们用心创造快乐的结果了。
更多技术实现细节请到技师为大家奉上的：
为你的移动页面寻找一丝新意&&手机互动网页项目总结（下）
分享到 & 　　
LAST WORKS
ideas第09期
Webpage Designed by TGodeas-腾讯游戏官方设计团队
Copyright & 2011. All Rights Reserved.