galeksandrp
galeksandrp

Reputation: 776

Cannot perform ArrayBuffer.prototype.slice on a detached ArrayBuffer

I am trying to create Blob from ArrayBuffer using .slice(), because I need to copy ArrayBuffer since I know that it will be changed in future (its byteLength will be 0) by code which I don't have control/want to change.

new Blob([data2.payload.slice()], {type: "video/MP2T"})

And I get error

Cannot perform ArrayBuffer.prototype.slice on a detached ArrayBuffer

on

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

on Windows 7 x64.

Is there any other ways to copy ArrayBuffer? This way not does actual copy, other ways does not seems to be pretty straightforward.

ArrayBuffer.transfer() looks good, but theirs polyfill produce error

Source and destination must be ArrayBuffer instances

Upvotes: 1

Views: 6484

Answers (2)

galeksandrp
galeksandrp

Reputation: 776

It's my fault, I has been confused by unclear error message, in this situation nothing can be done since at the moment of Blob creating data2.payload is already have byteLength: 0.

While in usual case with

var from = new ArrayBuffer(0);
var to = from.slice();
var to = from.slice(0);

to will be ArrayBuffer with byteLength: 0, in this case it's trigger error, because before data2.payload passed to my code it is modified in web worker, in order to avoid copying the fragment between main thread and web worker, data2.payload ownership is transferred to the worker.

Upvotes: 2

Sen Jacob
Sen Jacob

Reputation: 3452

Try using new Blob([new Uint8Array(data2.payload.slice(0))], {type: "video/MP2T"})

See it in this fiddle

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://fiddle.jshell.net/img/logo.png", true);
xhr.responseType = "arraybuffer";
xhr.onload = function(e) {
  var binaryArray = new Uint8Array(this.response.slice(0)); // use UInt8Array for binary
  var blob = new Blob([binaryArray], { type: "image/png" });
  var URL = window.URL || window.webkitURL;
  var imageUrl = URL.createObjectURL(blob); // create url
  document.getElementById("image").src = imageUrl;
};
xhr.send();

Upvotes: 0

Related Questions