Cannot perform ArrayBuffer.prototype.slice on a detached ArrayBuffer

Question

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

Answer 1

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.

Answer 2

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();