通过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地址,而且在向服务端请求时页隐藏了真实的视频地址。

推荐阅读更多精彩内容