65.9K
CodeProject 正在变化。 阅读更多。
Home

Jotdown

emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0投票)

2013年5月3日

CPOL

2分钟阅读

viewsIcon

9094

一个能够捕获视频笔记的 HTML5 笔记应用。

引言

本文提出的想法强调了对一个简单的跨平台视频笔记应用程序的需求。跨平台兼容性是通过 HTML5 的功能实现的,例如本地存储 API、视频和音频标签以及 contenteditable 属性。该应用程序使用 OAuth 实现单点登录,从而无需添加另一组凭据。我计划实现 Skydrive 云存储来存储笔记。其他笔记应用程序中提供的常见功能集也适用,例如注释、标记、按条件筛选、排序等。

背景

如今,应用商店中提供的许多现成的笔记应用程序都受到平台和设备碎片化的影响。“一次编写,随处运行”的理念显然没有实现。考虑到响应式设计、Webkit 标准化、JavaScript 框架的可用性以及访问本机设备功能,现在可能是重新思考 Web 应用的最佳时机。其次,没有任何适用于所有设备的著名视频笔记应用程序。这些类型的应用程序本质上适用于教室和会议室设置。

工作原理

该应用程序本质上是一个包含图像、音频和视频的网页。使用 Jotdown,您可以创建包含文本、图像、视频剪辑和声音剪辑的笔记。从概念上讲,您只是在创建一个网页,该网页将您的文本存储为 <p>paragraph</p>,<img src="filename" alt="Image"> 或使用 getUserMedia JavaScript API 拍摄照片,以及 <audio><source src=""></audio> 或 getUserMedia API 使用设备的麦克风录制音频笔记。视频笔记的保存方式与音频类似。回放时,DOM 会被重写,以便音频和视频标签启用 control 属性。即 <audio controls></audio> 和 <video controls></video>。同步是通过将网页上传到在线存储提供商(如 Skydrive)来实现的。Azure 服务器托管关键的 Jotdown Web 应用,同步是通过使用 LocalStorage API 实现的,该 API 单独保留每个设备中整个笔记的副本。推送功能可以通过在浏览器中打开 Web 应用或由设备上的 Skydrive 客户端处理来实现。

使用代码

代码正在使用 jQuery(用于查询 DOM)和 Knockout.js 以及 Twitter Bootstrap(用于响应式设计)开发模型和表示层。Skydrive 存储的集成正在进行中。

Windows Azure 的作用

  1. 非常适合将 Skydrive 存储 API 与 Azure 云服务集成
  2. 高性能计算与无与伦比的可扩展性相结合,满足接近本机应用性能的需求。

兴趣点 

我对 Windows Azure 完全陌生,尽管我有在共享服务器和暂存服务器上部署一些值得称赞的项目的经验。现在应该是我实现将 Web 应用部署到 Windows Azure 的愿望的时刻了。

历史

  • 2013 年 3 月 5 日 - 作为 Windows Azure 开发者大赛的一个想法提交了文章。
Jotdown - CodeProject - 代码之家
© . All rights reserved.