通过BLOB加密视频文件

前言

• 现在许多视频在线观看网站，你如果打开chrome查看其video标签，会发现它的src是一个以blob:开头的地址。比如下面这里是B站的截图，可以看到他这里引入的并不是一个在线的视频存放地址，这样你通过爬虫脚本也无法下载该视频文件，通过一个new tab打开也于事无补，会提示你地址错误。
  
  

  image.png

createObjectURL与BLOB

• 我们再回到那个以blob:开头的神秘字符串，它其实是通过URL.createObjectURL这个API生成的，该函数接收一个BLOB对象，返回该对象对应的DOMString，这个字符串其实也可以看做是一个url地址，但它是与当前窗口的document对象绑定的，也可以说是会话(session)级的，所以你在新的tab打开也就无效了
• 再来了解下BLOB，他的全称为big binary large object，二进制大对象。如果把一个视频文件转换成二进制对象，其大小肯定很大，这样理解就清楚多了。在浏览器端也提供了BLOB相关的API，通过new Blog(...)生成blog对象。
• 拿到blog对象后，再通过URL.createObjectURL生成临时地址，赋值给video标签的src属性，这样就可以了。但其实可以直接从服务端接收二进制对象，就是服务端把视频文件转换成二进制对象，通过接口给到前端，前端再生成dom string。

代码实现

• 服务端使用的nodejs，koa框架，这里的操作很简单，就是用fs.readFileSync直接打开视频文件，得到的data结果是二进制的数据，直接作为结果返回。

const Koa = require('koa')
const Router = require('koa-router')
const buffer = require('buffer');
const app = new Koa()
const router = new Router()
const fs = require('fs')
const video = async (ctx, next) => {
  try {
    // open 一个放在服务器的视频
    let data = fs.readFileSync('XXX.XXX.XXX/simple.mp4')
    ctx.response.body = data
  } catch (e) {
    return Promise.reject({
      status: 500,
      message: '视频传输错误'
    })
  }
  next()
}

router.get('/video', video)

app.use(router.routes()).use(router.allowedMethods())
app.listen(3001)

• 接下来看前端代码，这里使用的最原生的XMLHttpRequest对象语法，这里最重要的一点是要设置responseType为blob，这样接收到response直接就是一个blob对象供我们使用。这个responseType属性不属于http头部信息，而是ajax请求中XHR对象的属性(默认为""也就是text类型，而在一些封装XHR的框架中，一般把默认值设为json)。

    let xhr = new XMLHttpRequest()
    xhr.open('GET', 'http://localhost:3001/video', true)
    xhr.responseType = 'blob'
    xhr.onload = function(e) {
      if (this.status === 200) {
        // 获取blob对象
        let blob = this.response
        console.log(blob)
        // 获取blob对象地址，并把值赋给容器
        $("#sound").attr("src", URL.createObjectURL(blob));
      }
    }
    xhr.send()

• 这样就可以得到以blob:开头的临时url地址，而且在向服务端请求时页隐藏了真实的视频地址。