智能媒体管理产品文档转换/预览功能介绍(3)---预览原理

本文涉及的产品
对象存储 OSS,20GB 3个月
阿里云盘企业版 CDE,企业版用户数5人 500GB空间
对象存储 OSS,内容安全 1000次 1年
简介: 智能媒体管理产品提供了 Cloud Native 架构的文档转换/预览服务,本文介绍其中的预览原理和使用方法。

一、导语

智能媒体管理产品 提供了 Cloud Native 架构 的文档转换/预览服务,本文介绍其中的预览原理和使用方法。

二、预览原理

2.1 预览流程

2.1.1 部署和使用预览引擎

预览的核心,是利用前端 Java Script 渲染引擎,显示后端用 智能媒体管理 的文档转换 API 得到的结果( 转换时使用VECTOR 模式)。

为了帮助您更好,我们提供了预览渲染引擎,地址为 https://preview.imm.aliyun.com/index.html ,参考 文档预览 获取更多信息,特别是配置存储转换数据的 OSS 桶支持 CORS。

从而通过如下方式实现文档预览。

https://preview.imm.aliyun.com/index.html    //确认 index.html 路径正确
?url=https://your-bucket.oss-cn-shanghai.aliyuncs.com/office-file/output    //无需在 output 后加'/'
&region=oss-cn-shanghai    //转换数据所在桶的 region
&bucket=your-bucket    //转换数据所在桶

其中,请求字段中 url=https://your-bucket.oss-cn-shanghai.aliyuncs.com/office-file/output 是传递给渲染引擎的路径,该路径下存放文档转换结果( VECTOR 模式)。

注意:https://preview.imm.aliyun.com/index.html 是智能媒体管理服务提供的渲染引擎,your-bucket 是您自己的桶。

2.1.2 预览服务全流程

现基于阿里云构建的网盘服务 DEMO ,来讲解预览全流程,如下图所示。网盘服务 DEMO 在阿里云上开通 OSS 和 智能媒体管理产品 ,并且把预览的渲染引擎代码部署在网盘服务的域名环境下。

预览全流程

预览过程如下:
1) 网盘客户端 选择网盘中的某个文档 A,向 网盘服务端 发起预览请求。
2) 网盘服务端 得到文档 A 在 OSS 的路径,调用 智能媒体管理产品 文档转换的异步 API,可以指定转换文件的目标 OSS 路径。
3) 智能媒体管理产品 启动转换,同时返回目标 OSS 路径给 网盘服务端
4) 网盘服务端 将渲染引擎 index.html、相关 js 文件,以及目标 OSS 路径返回给 网盘客户端
5) 网盘客户端 在浏览器中基于 index.html,轮询目标 OSS 路径生成内容(也可以在调用文档转换 API 时注册事件通知,然后基于通知进行显示),一旦生成了内容,即开始渲染显示。
6) 智能媒体管理产品 文档转换的任务将转换目标文件写入到指定的 OSS 路径,直到转换完毕。

2.2 安全预览设计

文档预览可以在终端设备(例如智能手机)显示,因此需要考虑数据的安全性,在 智能媒体管理产品 的 Cloud Native 架构下,可以利用 OSS 的安全机制。

2.2.1 OSS 安全机制

使能 OSS 设置安全令牌,然后通过 STS 临时授权访问 为终端设备申请访问的 Token。

2.2.2 申请 Token 时控制 OSS 目标路径的只读权限的 Policy

在申请 STS 时,可以指定 OSS 路径的访问权限,如下为设置 office-file/output/* 资源的只读权限;其中 office-file/output 为指定存放转换结果输出的路径。

{
  "Version": "1",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "oss:*"
      ],
      "Resource": [
        "acs:oss:*:*:your-bucket/office-file/output/*"
      ]
    }
    {
        "Effect": "Allow",
        "Action": [
          "oss:ListObjects"
        ],
        "Resource": [
          "acs:oss:*:*:your-bucket"
        ],
        "Condition": {
          "StringLike": {
            "oss:Prefix": "office-file/output/*"
          }
        }
      }
  ]
}

云盘服务端申请 STS 的 Token 成功后,会得到 accessKeyIdaccessKeySecretstsToken 字段,然后发送给云盘客户端,客户端把这些字段加入到预览访问请求中,从而通过如下格式实现 安全访问 文档预览。

2.2.3 生成安全的预览URL

https://preview.imm.aliyun.com/index.html
?url=https://your-bucket. oss-cn-shanghai.aliyuncs.com/office-file/output    //无需在output后加'/'
&region=oss-cn-shanghai    //转换数据所在桶的region
&accessKeyId=STS.AAAAAAAAAA
&accessKeySecret=BBBBBBBBBBB
&stsToken=CCCCCCCCCCCCC    //CCCCCCCCCCCCC是encode(STS返回stsToken)的结果
&bucket=your-bucket    //转换数据所在桶

注意1:your-bucket 要替换为您自己的桶。
注意2:stsToken 字段,需要在STS返回的stsToken基础上使用encode处理,然后再拼到上述URL中,如下图红框所示(基于 nodeJS 实现)。

EncodeSTSToken

三、预览效果

3.1 支持大文件

如下图所示,在网盘 DEMO 中存放了 92.68 MB 大小的 pptx 文件 SP14 cs188 Lecture 18 -- Bayes Nets III Interface.pptx

大文件

3.2 预览翻页

通过转换并渲染得到的预览如下图所示,可以进行 左右翻页控制、全屏控制、以及缩放操作。

预览翻页

四、预览优化

基于前端使用渲染框架,后端提供渲染数据的解耦方案,还可以提供更多的特性。

4.1 定制化预览

通过前端提供 插件化框架,可以在预览时插入您自定义的广告,以及控制广告在页面的位置、长度、宽度,并且随着预览页面的缩放而联动。

4.2 加密文档预览

通过后端判断是否加密文档的结果,前端进行判断,然后通过插件化框架加载 您的密码输入和安全管理控件,从而可以让您预览加密的文档。

五、参考文档

  1. 智能媒体管理产品文档转换/预览功能介绍(1)---Cloud Native架构
  2. 智能媒体管理产品文档转换/预览功能介绍(2)---转换原理
  3. 智能媒体管理产品文档转换/预览功能介绍(4)--快速搭建
目录
相关文章
|
开发工具 对象存储 UED
IMM支持视频截帧和生成雪碧图功能
智能媒体管理已经支持了视频截帧和雪碧图生成功能,可以方便的在一次请求完成视频首帧、封面、雪碧图生成工作。
1085 0
IMM支持视频截帧和生成雪碧图功能
|
Web App开发 前端开发 安全
智能媒体管理产品文档转换/预览功能介绍(4)--快速搭建
智能媒体管理提供了 Cloud Native 架构的文档转换/预览服务,本文介绍快速搭建的示例,让您用 DIY 的体验方式实现文档预览功能。
6069 0
|
Web App开发 API
智能媒体管理(IMM)文档转换/预览提供 API 按量计费模式
智能媒体管理 (Intelligent Media Management, IMM) 是阿里云的云服务,它通过 文档标准型 实例提供了 Cloud Native 架构的文档转换/预览功能 ,本文介绍 API 按量计费模式的配置。
3186 0
|
Web App开发 JavaScript
【转载文章】智能媒体管理文档预览快速搭建 NodeJS 教程
针对智能媒体管理产品文档预览功能,提供 NodeJS 的端到端快速搭建教程,同时官网提供了视频。
1065 0
|
Serverless
[ 转载文章 ]函数计算 (FC) 和智能媒体管理 (IMM) 结合构建 serverless 文档转换/预览服务
阿里云函数计算和智能媒体管理相结合,快速实现一个弹性高可用的文档转换/预览服务。
1214 0
|
Serverless PHP 对象存储
十分钟上线-FC&IMM构建serverless文档转换/预览服务
自从人类进入信息时代以来,办公文档是每个人日常频繁使用的工具,ppt、word、xls、wps、pdf 等为我们工作和生活带来了很多的便利,尤其进入云计算和移动互联网时代,人们可以利用各种终端来预览 ppt、word、pdf 等相关文档进行工作和学习,这种情况下,文档之间的格式转换,各种终端的适配预览显得尤为重要,在本文中,我们来看看阿里云函数计算和智能媒体管理相结合,快速实现一个弹性高可用的文档转换/预览服务。
3790 0
智能媒体管理服务控制台功能体验
智能媒体管理服务控制台功能体验
1746 0
bky
|
JavaScript 前端开发 对象存储
使用nodeJs快速搭建IMM文档预览服务
使用nodeJs搭建IMM文档预览服务
bky
3500 0
|
存储 JSON 数据挖掘
利用智能媒体管理(IMM) 搭建云相册指南
- 为用户创建智能云相册 - 支持人脸检测,获取包括人脸位置、表情、年龄等信息 - 支持人脸分组,可以根据人物搜索、展示照片 - 支持照片标签检测,可以根据标签对照片进行分类 - 支持地理位置检测,获取照片拍摄的具体位置、时间,并且可以进行搜索
1018 0
|
存储 对象存储 计算机视觉
智能媒体管理(IMM)视频分析中明星识别介绍
智能媒体管理已经支持了视频分析功能,用户可以方便的使用该功能对存储在oss上的视频进行全面的分析。本文主要介绍利用智能媒体管理的视频分析功能来提取视频中的明星信息。 智能媒体管理的视频分析包含了明星识别功能,可以帮助用户抽取出视频中出现的明星信息。
2951 0

相关产品

  • 智能媒体管理