Mocat

英 特 尔 杯 Mocat 基 于 html5 的 视 频 社 交 软 件 2013/11/19

一 参 赛 作 品 构 思 的 创 意 与 价 值 (1) 背 景 : 问 题 领 域 互 联 网 的 爆 炸 式 发 展, 给 人 类 的 社 交 方 式 带 来 了 巨 大 的 冲 击, 以 facebook twitter 为 代 表 的 社 交 软 件 改 变 了 数 以 亿 计 人 的 社 交 方 式 而 随 着 移 动 互 联 网 的 迅 速 成 长, 单 纯 的 社 交 软 件 手 机 客 户 端 已 经 不 能 淋 漓 尽 致 地 表 现 出 移 动 互 联 网 在 社 交 网 络 方 面 的 优 势, 在 此 大 环 境 下,Open Web Platform 机 制 的 成 熟 及 html5 技 术 的 进 步 给 予 我 们 一 个 社 交 软 件 表 现 形 式 多 样 化 的 机 遇 (2) 问 题 : 选 题 的 动 机 与 目 的 社 交 网 络 围 绕 着 两 个 主 线 发 展 延 伸, 一 是 社 交 对 象, 二 是 社 交 载 体 随 着 技 术 问 题 及 网 络 质 量 问 题 相 继 解 决, 社 交 载 体 从 文 字 开 始, 进 入 了 图 文 时 代, 近 几 年 来, 音 频 图 片 配 音 频 等 多 种 社 交 载 体 方 式 相 继 出 现 在 社 交 软 件 的 移 动 客 户 端 可 以 预 见 的 是, 随 着 人 们 对 社 交 载 体 丰 富 度 要 求 的 不 断 提 升, 视 频 这 种 目 前 最 具 有 表 现 能 力 的 载 体 方 式 将 成 为 新 社 交 网 络 的 宠 儿 同 时, 由 于 视 频 是 一 种 用 视 和 音 替 代 图 和 字 的 表 现 形 式, 所 以 完 全 可 以 构 造 成 一 种 新 的 社 交 网 络 生 态, 而 目 前, 在 移 动 互 联 网 端, 针 对 视 频 进 行 深 度 挖 掘 构 造 的 社 交 软 件 或 者 平 台 基 本 没 有, 视 频 仅 仅 是 各 大 社 交 软 件 的 一 个 补 充 品, 因 此, 开 发 一 个 以 视 频 为 核 心 的 社 交 网 络 生 态 具 有 很 高 的 应 用 价 值 我 们 的 目 的 是 针 对 视 频 打 造 一 个 社 交 网 络 生 态, 围 绕 视 频 这 种 表 现 方 式, 设 计 通 讯 分 享 特 效 交 互 三 个 层 次, 自 我 私 密 朋 友 网 友 公 众 陌 生 人 五 个 维 度, 让 用 户 利 用 全 视 频 社 交 这 种 全 新 的 表 现 形 式 尽 情 享 受 我 们 搭 建 的 社 交 网 络 (3) 研 究 : 市 场 调 查 和 评 价 结 论 3.1 相 关 产 品 对 比 社 交 软 件 微 信 : 拥 有 视 频 通 讯 功 能, 兄 弟 产 品 手 机 QQ 提 供 视 频 实 时 通 讯 功 能, 拥 有 自 己 的 社 交 分 享 平 台 朋 友 圈 视 频 并 不 是 其 重 点 推 广 的 通 讯 手 段, 朋 友 圈 以 图 片 + 文 字 发 布 为 核 心, 并 不 支 持 客 户 端 直 接 拍 摄 视 频 上 传 微 博 ( 手 机 客 户 端 ): 围 绕 文 字 和 图 片 发 展 的 社 交 平 台, 视 频 只 能 以 外 站 视 频 连 接 分 享 的 形 式 出 现, 即 时 通 讯 功 能 较 弱 人 人 网 ( 手 机 客 户 端 ): 类 似 于 微 博 的 形 式, 且 手 机 客 户 端 增 添 了 发 送 语 音 状 态 的 功 能, 但 对 于 视 频 部 分 表 现 能 力 很 差, 同 时, 即 时 通 讯 功 能 较 弱 视 频 分 享 软 件 啪 啪 奇 : 一 款 以 拍 摄 视 频 分 享 视 频 至 多 个 平 台 为 亮 点 的 软 件, 不 具 有 社 交 功 能, 尽 管 在 视 频 拍 摄 方 面 功 能 颇 佳, 但 单 纯 分 享 发 布 视 频 的 机 制 制 约 了 其 进 一 步 发 展 的 能 力 优 酷 ( 手 机 客 户 端 ): 老 牌 视 频 网 站 的 手 机 客 户 端, 在 视 频 播 放 及 发 布 等 方 面 功 能 较 为 健 全, 但 由 于 本 身 不 属 于 社 交 平 台, 通 讯 等 功 能 就 无 从 谈 起 了

结 论 : 在 移 动 互 联 网 端, 针 对 视 频 进 行 深 度 挖 掘 构 造 的 社 交 软 件 或 者 平 台 基 本 没 有, 视 频 仅 仅 是 各 大 社 交 软 件 的 一 个 补 充 品, 所 以 一 个 以 视 频 为 核 心 的 社 交 网 络 生 态 具 有 很 大 的 开 发 价 值 3.2 用 户 调 查 样 本 :19 人 调 查 人 群 年 龄 :20-25 岁 100% 在 PC 端 浏 览 过 在 线 视 频 100% 在 PC 端 浏 览 在 线 视 频 的 频 率 大 于 每 周 20 次 17 人 在 手 机 端 浏 览 过 在 线 视 频 8 人 在 手 机 端 网 页 浏 览 器 浏 览 过 在 线 视 频 16 人 在 手 机 端 社 交 软 件 上 浏 览 过 在 线 视 频 4 人 在 手 机 端 上 进 行 视 频 通 讯 17 人 认 为 流 量 资 费 是 影 响 其 使 用 手 机 浏 览 在 线 视 频 或 进 行 视 频 通 讯 的 首 要 原 因 1 人 认 为 手 机 端 体 验 远 不 如 电 脑 端 是 影 响 其 使 用 手 机 浏 览 在 线 视 频 或 进 行 视 频 通 讯 的 首 要 原 因 1 人 认 为 个 人 喜 好 是 影 响 其 使 用 手 机 浏 览 在 线 视 频 或 进 行 视 频 通 讯 的 首 要 原 因 结 论 : 1. 视 频 的 表 现 力 非 常 强, 青 年 人 对 这 种 表 现 形 式 非 常 感 兴 趣 2. 流 量 资 费 是 制 约 视 频 通 讯 和 视 频 分 享 的 主 要 瓶 颈, 但 随 着 电 信 产 业 的 发 展, 相 信 该 问 题 能 够 逐 步 缓 解 直 至 解 决 3. 现 阶 段 直 搬 PC 端 的 手 机 客 户 端 很 难 完 全 满 足 用 户 的 需 要, 为 移 动 互 联 网 打 造 适 合 手 机 客 户 端 的 社 交 平 台 是 十 分 有 必 要 的 (4) 创 意 : 参 赛 作 品 的 构 思 描 述 针 对 市 场 分 析 及 我 们 自 身 的 体 验, 我 们 将 研 发 一 款 针 对 视 频 的 社 交 网 络 生 态, 围 绕 视 频 这 种 表 现 方 式, 通 过 通 讯 分 享 特 效 交 互 三 个 层 次, 自 我 私 密 朋 友 网 友 公 众 陌 生 人 五 个 维 度, 让 用 户 利 用 全 视 频 社 交 这 种 全 新 的 表 现 形 式 尽 情 享 受 我 们 搭 建 的 社 交 网 络 通 讯 功 能 将 打 造 多 种 通 讯 模 式, 将 移 动 端 现 有 软 件 提 供 的 点 对 点 视 频 通 讯 模 式 拓 展 为 多 种 模 式, 目 前 已 增 加 会 议 模 式 和 主 播 模 式, 接 下 来 将 根 据 进 一 步 的 调 研 实 现 视 频 通 讯 的 形 式 多 样 化 视 频 分 享 将 打 造 一 个 即 拍 即 传 的 分 享 平 台, 为 满 足 用 户 不 同 的 心 理 需 求, 我 们 设 计 了 自 我 私 密 朋 友 网 友 公 众 陌 生 人 五 个 维 度, 其 中, 陌 生 人 模 式 是 系 统 随 机 发 送 给 非 用 户 好 友 的 人, 与 公 众 模 式 的 直 接 公 开 有 区 别 这 五 个 维 度 的 划 分 能 充 分 为 用 户 记 录 自 我 及 展 现 自 我 提 供 足 够 宽 广 的 平 台, 弥 补 了 现 有 社 交 软 件 分 享 维 度 单 一 的 缺 点 通 讯 是 社 交 的 基 础, 分 享 视 频 构 建 平 台 式 社 交, 而 特 效 交 互 则 体 现 了 视 频

可 玩 这 个 创 意 核 心 借 助 html5 的 相 关 技 术, 通 过 插 件 的 开 发, 让 用 户 在 移 动 端 即 可 享 受 视 频 通 讯 及 视 频 分 享 的 更 多 乐 趣 若 能 得 到 充 分 支 持, 将 在 后 期 开 发 相 关 接 口, 让 其 他 开 发 者 也 能 够 自 己 设 计 插 件 应 用 到 本 软 件 中 (5) 功 效 : 最 终 呈 现 给 用 户 的 实 际 功 效 用 户 在 使 用 本 软 件 时, 最 直 观 的 是 能 够 利 用 本 软 件 建 立 一 个 属 于 自 己 的 社 交 网 络 圈, 通 过 视 频 通 讯 与 视 频 分 享 等 方 式 与 圈 中 好 友 进 行 社 交 活 动 当 然, 以 上 仅 仅 是 基 础 功 能 除 了 社 交 网 络 的 最 基 础 需 求, 我 们 在 各 部 分 提 出 的 创 意 都 将 辅 助 完 善 我 们 的 社 交 圈 首 先, 多 种 视 频 通 讯 模 式 能 满 足 用 户 在 多 种 场 合 下 的 需 求, 例 如 召 开 视 频 会 议, 开 展 远 程 教 育 等 而 分 享 视 频 提 供 的 多 种 特 效, 为 用 户 实 现 自 我 表 现 或 记 录 生 活 提 供 了 技 术 上 的 辅 助 创 新, 多 维 度 的 视 频 发 布 平 台 则 为 用 户 提 供 了 足 够 宽 广 的 记 录 自 我 及 展 现 自 我 的 平 台 在 娱 乐 化 需 求 日 益 旺 盛 的 今 天, 我 们 将 在 软 件 中 打 造 视 频 可 玩 这 一 重 要 理 念, 用 户 可 以 选 择 性 下 载 各 类 插 件, 满 足 自 己 在 通 讯 或 分 享 上 的 各 类 创 意 综 上 所 述, 本 软 件 致 力 于 传 递 一 种 具 有 更 强 表 现 力 的 社 交 网 络, 借 助 html5 的 优 势, 让 社 交 网 络 刮 起 视 频 旋 风 (6) 评 价 : 对 创 新 的 深 度 与 广 度 的 自 我 评 价 首 先, 软 件 需 求 设 计 上 并 不 是 空 中 楼 阁, 在 第 一 要 素 上 满 足 了 用 户 构 建 社 交 圈 的 现 实 需 要, 确 保 了 创 新 的 基 础 而 创 新 的 方 向 基 于 市 场 调 研 和 对 现 有 产 品 的 分 析 获 得, 区 别 于 现 有 的 社 交 产 品, 紧 紧 围 绕 视 频 这 一 表 现 形 式 打 造 社 交 的 生 态 圈 在 功 能 设 计 上, 刻 意 将 文 字 及 图 片 交 流 比 例 降 低, 目 的 是 培 养 用 户 利 用 视 频 的 方 式 来 进 行 社 交 活 动 而 在 功 能 创 新 上, 除 基 本 的 功 能 点 区 别 于 现 有 软 件 的 创 新 元 素 外, 提 出 了 视 频 可 玩 这 一 创 新 理 念, 在 满 足 基 本 的 通 讯 及 分 享 需 求 外, 能 够 对 视 频 的 表 现 能 力 进 行 进 一 步 的 突 破 综 上 所 述, 本 软 件 在 创 新 上 具 有 创 新 的 基 础, 在 挖 掘 用 户 深 度 需 求 的 上 下 足 了 功 夫, 并 且 多 角 度 的 对 软 件 进 行 创 新 二 参 赛 作 品 的 目 标 实 现 形 式 (1) 参 赛 作 品 的 最 终 呈 现 形 式 基 于 html5 技 术 的 web app (2) 参 赛 作 品 的 主 要 功 能 描 述 模 块 功 能 描 述 视 频 通 讯 一 对 一 通 讯 实 时 的 点 对 点 视 频 通 讯 视 频 分 享 视 频 上 传 实 现 视 频 拍 摄 及 上 传, 同 时 分 自 我 私 密 朋 友 网 友 公 众 陌 生 人 五 个 维 度 进 行 权 限 设 定 视 频 浏 览 同 样 根 据 自 我 私 密 朋 友 网 友 公 众 陌 生 人 五 个 维

度, 区 分 为 多 个 视 频 浏 览 板 块, 提 供 视 频 在 线 浏 览 功 能 弹 幕 评 论 采 用 弹 幕 的 手 段 进 行 评 论 同 步 观 看 双 人 共 同 观 影 院 模 式, 让 双 方 可 以 共 同 观 看 视 频 并 一 同 分 享 评 论 看 视 频 基 础 功 能 好 友 列 表 实 现 社 交 好 友 的 基 本 管 理 系 统 设 置 实 现 软 件 基 本 设 置 和 管 理 帮 助 提 供 软 件 使 用 帮 助 拓 展 插 件 视 频 处 理 使 用 包 括 滤 镜 等 技 术, 让 视 频 拍 摄 更 具 乐 趣 游 戏 利 用 html5 的 技 术, 让 摄 像 头 参 与 更 多 的 环 节, 实 现 例 如 手 势 弹 钢 琴 等 特 效, 增 强 通 讯 的 趣 味 性 (3) 参 赛 作 品 的 实 用 性 和 未 来 可 扩 展 性 分 析 本 应 用 基 于 社 交 网 络 的 基 础 需 求 设 计, 通 过 先 进 的 技 术 手 段, 实 现 较 为 超 前 的 功 能, 全 软 件 围 绕 视 频 这 一 表 现 核 心, 目 的 在 于 培 养 用 户 使 用 更 具 有 表 现 力 的 社 交 软 件, 相 比 于 杂 合 的 社 交 软 件 更 具 有 目 的 性, 预 计 能 够 吸 引 一 部 分 高 端 用 户 先 行 使 用 在 完 成 基 础 需 求 后, 软 件 的 创 新 方 向 将 放 在 视 频 可 玩 这 一 主 题 上, 通 过 插 件 的 开 发, 让 用 户 在 移 动 端 即 可 享 受 视 频 通 讯 及 视 频 分 享 的 更 多 乐 趣 若 能 得 到 充 分 支 持, 将 在 后 期 开 发 相 关 接 口, 让 其 他 开 发 者 也 能 够 自 己 设 计 插 件 应 用 到 本 软 件 来 三 参 赛 作 品 目 标 实 现 的 可 行 性 (1) 参 赛 作 品 的 主 要 技 术 路 线 本 软 件 主 要 是 围 绕 html5 技 术 在 视 频 处 理 上 的 优 势 展 开 的, 而 其 中 一 大 难 点 便 是 基 于 浏 览 器 的 视 频 通 信, 视 频 通 信 需 满 足 流 畅 及 节 省 流 量 等 要 求, 我 们 利 用 WEBRTC 和 WEB SOCKET 完 成 基 于 Web 浏 览 器 的 实 时 音 频 和 视 频 的 通 信, 同 时, 结 合 html5 的 其 他 特 性 如 离 线 缓 存 来 完 成 软 件 中 其 它 部 分 的 实 现 (2) 参 赛 作 品 的 核 心 技 术 关 键 与 实 现 可 行 性 软 件 使 用 了 webrtc,websocket,device api, 全 屏 api, 本 地 数 据 库,html5 脱 机 应 用 等 技 术 并 结 合 了 移 动 平 台 的 振 动, 定 位, 重 力 感 应 等 功 能 设 计 了 诸 多 的 功 能, 具 有 大 量 的 功 能 点 状 态 管 理 模 块 : 用 户 登 录 时, 会 首 先 利 用 websocket 将 自 己 的 登 录 状 态 发 送 给 服 务 器 端, 服 务 器 端 将 用 户 的 信 息 存 储 在 当 前 已 登 录 中, 标 注 该 用 户 已 经 登 录, 并 搜 索 用 户 的 好 友 信 息, 将 用 户 的 所 有 好 友 的 登 录 状 态 发 送 给 用 户, 这 样 用 户 就 可 以 知 道 自 己 好 友 是 否 在 线 了 同 时 用 户 下 线 时, 会 发 送 自 己 退 出 登 录 的 信 息 给 服 务 器 端, 服 务 器 将 用 户 从 已 登 录 中 移 除 标 注 该 用 户 已 经 下 线 视 频 播 放 模 块 : 因 为 原 有 的 video 标 签 在 chrome 浏 览 器 中 自 带 的 全 屏 功 能 下,

无 法 将 评 论 作 为 弹 幕 显 示 出 来, 并 且 用 户 需 要 退 出 全 屏 后 才 可 以 评 论, 后 因 此 我 们 结 合 全 屏 api 重 写 了 一 个 新 的 播 放 器, 使 得 用 户 在 点 击 全 屏 按 钮 全 屏 后, 仍 然 可 以 查 看 弹 幕 和 发 表 新 的 评 论 邀 请 模 块 : 用 户 在 邀 请 好 友 进 行 及 时 视 频 通 信, 和 邀 请 好 友 一 起 观 看 电 影 时, 我 们 使 用 的 websocket 进 行 消 息 的 推 送, 相 比 传 统 的 Ajax 方 案 有 极 大 的 性 能 优 势, 当 对 方 收 到 邀 请 时, 我 们 利 用 了 手 机 的 传 感 器, 发 出 振 动 来 提 醒 用 户 视 频 通 信 模 块 : 我 们 使 用 了 webrtc 技 术 来 实 现 视 频 的 及 时 通 讯, 使 用 MediaStream Api 来 获 取 手 机 摄 像 头 的 数 据, 和 RTCPeerConnection api 在 peer 跟 peer 之 间 建 立 连 接 呼 叫 和 传 递 音 频 和 视 频 数 据 流 数 据 管 理 模 块 : 我 们 将 一 些 信 息 利 用 本 地 数 据 库 技 术 存 储 在 了 本 地, 利 用 我 们 将 用 户 最 近 一 次 播 放 的 视 频 名 称 与 当 前 播 放 时 间 进 行 了 存 储, 用 户 登 录 后 可 以 在 Mocat 标 签 中 进 行 查 看, 并 选 择 是 否 继 续 观 看 同 时 我 们 将 一 些 网 页 写 在 了 缓 存 清 单 中, 使 用 户 在 没 有 网 络 的 情 况 下 也 可 访 问 我 们 一 些 网 页 游 戏 模 块 : 游 戏 模 块 中 我 们 利 用 websocket 设 计 了 一 个 可 以 多 人 对 战 的 游 戏, 用 户 可 以 利 用 手 机 的 重 力 感 应 和 手 机 的 触 屏 两 种 方 式 进 行 触 控

软 件 部 分 流 程 图 : 视 频 通 信 :

视 频 上 传 :

视 频 播 放 :

所 做 优 化 : 1. 我 们 为 了 提 高 用 户 浏 览 时 网 页 的 反 应 速 度, 针 对 网 页 的 代 码 进 行 了 精 简, 并 使 用 ajax 动 态 加 载 页 面, 将 重 要 的 信 息 及 时 展 示 给 用 户, 将 次 要 的 信 息 延 时 加 载, 使 得 网 页 能 够 较 快 的 展 示 给 用 户 的 同 时 确 保 信 息 的 完 整 性 2. 当 用 户 观 看 视 频 时, 我 们 会 将 视 频 以 及 相 关 信 息 存 储 到 本 地 数 据 库 中, 减 少 了 对 网 络 的 依 赖, 以 便 用 户 在 没 有 网 络 的 时 候 也 能 方 便 查 看 以 往 的 视 频 3. 本 作 品 的 主 要 功 能 可 以 在 大 赛 测 试 的 标 准 平 台 上 流 畅 运 行, 不 仅 如 此, 我 们 还 对 不 同 屏 幕 进 行 了 适 配, 提 高 了 作 品 的 跨 平 台 的 能 力, 让 用 户 能 在 不 同 的 设 备 上 获 得 一 致 的 体 验, 减 少 用 户 学 习 成 本 4. 作 品 后 台 代 码 采 用 了 struts+spring+ibatis 架 构 设 计, 具 有 良 好 的 结 构 划 分, 同 时 对 于 功 能 的 扩 展 提 供 了 相 当 大 的 便 利 5. (3) 参 赛 团 队 的 资 源 可 行 性 人 力 资 源 方 面, 团 队 采 用 敏 捷 开 发 模 式, 注 重 UI 及 UE 的 设 计, 成 员 对 html5 有 较 深 刻 认 识, 分 工 及 角 色 定 位 合 理 明 确 同 时 依 靠 团 队 内 部 强 大 测 试 渠 道, 可 在 软 件 测 试 等 方 面 提 供 相 关 人 力 资 源 硬 件 资 源 方 面, 团 队 拥 有 足 够 手 机 终 端,iOS 手 机 一 部,Android 手 机 三 部, 其 中 包 括 大 赛 标 准 平 台, 同 时 拥 有 5 台 笔 记 本 电 脑 ( 包 含 一 台 mac) 服 务 器 方 面 通 过 搭 建 PC 服 务 器, 通 过 软 件 实 现 公 网 软 件 部 署 四 团 队 组 成 与 角 色 分 工 开 发 模 式 : 敏 捷 开 发 成 员 角 色 职 责 匿 名 PM 及 UE 设 计 师 产 品 设 计 定 位 及 创 新 点 挖 掘, 负 责 UE 部 分 的 深 度 设 计, 同 时 负 责 整 合 资 源, 为 软 件 测 试 等 提 供 相 关 资 源 匿 名 软 件 开 发 工 程 师 主 导 软 件 开 发 技 术 方 面 客 户 端 的 实 现, 侧 重 于 研 究 WebRTC 技 术, 完 成 视 频 相 关 功 能 的 实 现 匿 名 软 件 开 发 工 程 师 辅 助 软 件 客 户 端 的 实 现, 主 要 负 责 服 务 器 端 的 开 发, 同 时 为 UI 界 面 部 分 提 供 技 术 支 持 匿 名 UI 设 计 师 及 美 工 对 产 品 UI 部 分 进 行 设 计 和 实 现, 侧 重 于 研 究 html5 特 效 部 分 的 实 现

五 项 目 时 间 进 度 表 重 要 里 程 碑 细 节 工 作 完 成 情 况 演 示 demo 及 基 础 功 能 实 现 ( 完 成 初 赛 要 求 ) 平 台 的 四 大 体 系 构 建 及 完 善 产 品 设 计 定 位 及 市 场 分 已 完 成 析 和 创 新 性 设 计 挖 掘 主 界 面 UI 的 设 计 与 实 现 已 完 成 初 步 实 现 同 步 通 讯 功 能 已 完 成 及 视 频 拍 摄 压 缩 等 核 心 技 术 通 讯 模 块 深 入 优 化, 包 括 已 完 成 震 动 感 应 等 细 节 等 体 验 优 化 视 频 上 传 共 享 方 式 优 化, 评 论 方 式 采 用 弹 幕 的 方 完 成 第 一 种 弹 幕 呈 现, 完 善 第 二 种 弹 幕 中 式 呈 现 同 步 影 院 模 块, 引 进 影 院 基 本 完 成 概 念 增 强 实 时 互 动 游 戏 平 台 上 线 一 款 简 单 游 戏, 利 用 其 他 平 台 链 接 一 款 游 戏 UE 及 创 新 功 能 深 度 完 善 单 页 测 评 团 队 公 开 实 际 测 评 功 能 页 面 72 次, 反 馈 bug21 个, 重 大 bug7 个 Bug 及 细 节 修 复 同 步 测 试 改 进 中 同 步 视 频 游 戏 较 大 bug, 由 于 移 动 端 配 置 限 制, 已 放 弃