深入理解xhr的responseType中blob和arrayBuffer

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/article/details/78232485

最近有个需求,服务器端下载视频,存储到本地,然后再播放,下载存储后播放不了。debug后发现是responseType未正确设置。

一般的xhr请求

    let url = window.URL || window.webkitURL;
    let xhr = new XMLHttpRequest();
    xhr.open(method, url, [,async=true,]);
    xhr.ontimeout = ()=>{};
    xhr.onreadystatechange=()=>{
      if(xhr.readystate === 4) {
        if(xhr.status =200) {
          let res = xhr.responseText;
          let blob = new Blob([res], {type: 'video/mpeg4'});
          ....
          ....
          videoEle.src = url.createObjectURL(blob);
        };
      }
    };

上面代码处理一般的xhr请求足够满足,即返回类型为DOMString的,但是处理视频下载并且存储后播放就会有问题,上面代码处理异步视频下载有两个bug,如果你都知道,就不需要往下看了^_^

再次认识responseType

设置该值能够改变响应类型(关键这句话)。就是告诉服务器你期望的响应格式。

responseType值的类型可为如下

数据类型

’ ‘

DOMString (这个是默认类型)

arraybuffer

ArrayBuffer对象

blob

Blob对象

document

Document对象

json

JavaScript object, parsed from a JSON string returned by the server

text

DOMString

video后台为设置的content-type为application/octet-stream,表示二进制流。。当时就被这货坑了一下,以为返回的数据能够够Blob构造函数接收,并正确显示。

Blob对象

Blob也是比较有意思,mdn上的解释是Blob对象表示不可变的类似文件对象的原始数据。Blob表示不一定是JavaScript原生形式的数据。

^_^其实就是英文Binary large Object,mysql有此类型数据结构

let blog = new Blob(arrya, options);

Blob() 构造函数返回一个新的 Blob 对象。

  • array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ,或者其他类似对象的混合体,它将会被放进 Blob。DOMStrings会被编码为UTF-8。
  • options 是一个可选的BlobPropertyBag字典,它可能会指定如下两个属性: type,默认值为 “”,它代表了将会被放入到blob中的数组内容的MIME类型。

ArrayBuffer涉及面比较广,我的理解是ArrayBuffer代表内存之中的一段二进制数据,一旦生成不能再改。可以通过视图(TypedArray和DataView)进行操作。 TypedArray数组只是一层视图,本身不储存数据,它的数据都储存在底层的ArrayBuffer对象之中, 所以通过同一个arraybuffer生成的TypedArray共享内存数据。 nodejs中的buffer是对Uint8Array的实现。详细可参考另外一篇我写的文章


正确的video流打开方式

还有一点xhr.responseText的类型为DOMString,只有当responseType为DOMString时才有正确数据,其他类型获取响应实体用xhr.response。因为一般我们都是获取json字符串,此处也需要注意下。 so正确的代码如下:

let url = window.URL || window.webkitURL;
    let xhr = new XMLHttpRequest();
    xhr.open(method, url, [,async=true,]);
    xhr.responseType = 'blob' ; //arraybuffer也可以
    xhr.ontimeout = ()=>{};
    xhr.onreadystatechange=()=>{
      if(xhr.readystate === 4) {
        if(xhr.status =200) {  
          let res = xhr.response;  //不是responseText。
          /*
          *最近看别人的代码,发现可以这么写
          * let res = 'response' in xhr ? xhr.response : xhr.responseText
          * 厉害!!!
          */
          let blob = new Blob([res], {type: 'video/mpeg4'});
          ....
          ....
          videoEle.src = url.createObjectURL(blob);
          //Videos on Android do not play when the src is set as a blob via create URL, 在移动端有兼容问题
        };
      }
    };

后面的内容与本文无关,纯作记录。

后续

项目中的video都存储在移动设备中,如果都放在blob中,会造成内存的大量占用,因是cordova的webapp形式,故采用插件cordova-plugin-file, 相关写文件代码如下

function writeSystemFile(videoBlob, isAppend) {
    let self = this;
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
      //console.log('openFsObj', fs);
      //console.log('open file name: ', fs.name);
      fs.root.getFile(self._storeVideoName, { create: true, exclusive: false },function (fileEntry) {
        // var dataObj = new Blob([videoData], { type: 'text/plain' });
        self.writeFile(fileEntry, videoBlob, isAppend);
      }, function(e) {
        console.log('onErrorCreateFile, error:', e);
      });
    }, function(e) {
      console.log('onErrorLoadFs, error:', e);
    });
  }

  function writeFile(fileEntry, dataObj, isAppend) {
    // let self = this;
    fileEntry.createWriter(function (fileWriter) {
      fileWriter.onwriteend = function() {
        console.log('Successful file write...');
        //console.log('fileWriterEnd.length:', fileWriter.length);
      };
      fileWriter.onerror = function (e) {
        console.log('Failed file write: ' + e.toString());
      };
      if(isAppend) { //表示是否追加文件
        try {
          console.log('fileWriter.length:', fileWriter.length);
          fileWriter.seek(fileWriter.length);
        } catch(e) {
          console.log('file doesn`t exist:', e.toString());
        }
      }
      //console.log('fileWriterStart.length:', fileWriter.length);
      fileWriter.write(dataObj);

    });
  }

读文件代码

function readSystemFile() {
    let self = this;
    console.log('readSystemFile self._storeVideoName:', self._storeVideoName);
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
      fs.root.getFile(self._storeVideoName, { create: true, exclusive: false },function (fileEntry) {
        self.readFile(fileEntry);
      }, self.onErrorCreateFile);
    }, function (error) {
      console.log('onErrorLoadFs, error:', error);
    });
  }

 function readFile(fileEntry) {
    let self = this;
    fileEntry.file(function (file) {
      var reader = new FileReader();
      reader.onloadend = function() {
        if(this.result === null) {
          console.log('readFile unexpected this.result == null');
          return;
        }
        console.log(typeof this.result);
        console.log('Successful file read length: ', this.result.length);
        // var blob = new Blob([new Uint8Array(this.result)], { type: "video/mpeg4" });
        console.log('Successful file read: ', this.result);
      };
      // reader.readAsText(file);
      reader.readAsArrayBuffer(file);
      // reader.readAsBinaryString(file);
    }, self.onErrorReadFile);
  }

onErrorReadFile() {
    console.log('Failed file read: ');
  }

因安卓和ios下文件的存储路径不一样,故需要做一个判断,文件的存储目录

function getDirectory() {
    let isIOS =/(iPad|iPhone|iPod)/g.test(navigator.userAgent);
    if(isIOS) {
      return cordova.file.documentsDirectory;
    }else {
      return cordova.file.dataDirectory + 'files/';
    }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CSDN技术头条

使用Go语言来理解Tensorflow

【译者注】本文通过一个简单的Go绑定实例,让读者一步一步地学习到Tensorflow有关ID、作用域、类型等方面的知识。以下是译文。 Tensorflow并不是...

283100
来自专栏marsggbo

Udacity并行计算课程笔记-The GPU Hardware and Parallel Communication Patterns

本小节笔记大纲: 1.Communication patterns gather,scatter,stencil,transpose 2.GPU hardwa...

24060
来自专栏一个会写诗的程序员的博客

一致性(连续性)hash算法(Consistent hashing)一致性(连续性)hash算法(Consistent hashing)

Consistent hashing is a scheme that provides hash table functionality in a way t...

14720
来自专栏图形学与OpenGL

WebGL画点程序v3

本文程序实现画一个点的任务,如下图。其中,点的颜色由Javascript传到片元着色器程序中。

15120
来自专栏mathor

matlab—特殊变量类型与档案存取

这里举个例子,有一个学生structure,包含姓名、邮箱、学号、成绩,应该如何创建这个structure

10840
来自专栏企鹅号快讯

加速!缓存Python函数的运行结果:Memoization

使用称为“memoization”的强大而方便的缓存技术来加速您的Python程序。 在这篇文章中,我将向您介绍一种方便的方法来加速你的Python代码,该技术...

31150
来自专栏数据结构与算法

1077 多源最短路

1077 多源最短路  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果 题目描述 Descripti...

35580
来自专栏数据分析

[数据分析工具] Pandas 不可不知的功能(一)

如果你在使用 Pandas(Python Data Analysis Library) 的话,下面介绍的对你一定会有帮助的。 首先我们先介绍一些简单的概念 D...

41860
来自专栏信安之路

栈溢出利用之Return to dl-resolve

在CTF中一般的栈溢出题目会给出程序对应的libc,这样我们在泄漏一个libc地址之后就能根据偏移量去计算libc的其他地址,比如system、/bin/sh或...

9100
来自专栏FreeBuf

使用Burpsuite扩展Hackvertor绕过WAF并解密XOR

最近,我一直在忙于开发自己的一个Burp扩展Hackvertor。这是一个具有基于标签转换功能的编码器,相比起Burp内置的解码器它的功能要强大的多。通过标签的...

15210

扫码关注云+社区

领取腾讯云代金券