Styjun

How do rulers get rich from war?

Cube around 2 points with correct perspective

What is Cousin Itt in The Addams Family?

What was the earliest microcomputer Logo language implementation?

Exam design: give maximum score per question or not?

What's the purpose of autocorrelation?

Does Forgotten Realms setting count as “High magic”?

Can Brexit be undone in an emergency?

Why do things cool off?

How do you determine which representation of a function to use for Newton's method?

Is there an in-universe reason Harry says this or is this simply a Rowling mistake?

Story/1980s sci fi anthology novel where a man is sucked into another world through a gold painting

What exactly is a web font, and what does converting to one involve?

Floating Point XOR

Is Zack Morris's 'time stop' ability in "Saved By the Bell" a supernatural ability?

How to give my students a straightedge instead of a ruler

What's the word for a student who doesn't register but goes to a class anyway?

What is this WWII four-engine plane on skis?

What the did the controller say during my approach to land (audio clip)?

Plausibility and performance of a composite longbow

Plot irregular circle in latex

Should I inform my future product owner that there is a good chance that a team member will leave the company soon?

Why would a fighter use the afterburner and air brakes at the same time?

Can we have a C++ function with multiple return types? ( C++11 and above)

JavaScript XMLHttpRequest.responseType as “arraybuffer” — how to get current arraybuffer chunk

How do JavaScript closures work?How do I remove a property from a JavaScript object?How do you get a timestamp in JavaScript?How do I redirect to another webpage?How do I include a JavaScript file in another JavaScript file?Get the current URL with JavaScript?What does “use strict” do in JavaScript, and what is the reasoning behind it?How do I get the current date in JavaScript?How to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

I'm trying to stream a from the client side to a server side, to later stream the video back to another client.

The point is:

How can I get chunks of a video from client-side JavaScript (that can be sent to a server)?

using this code, for example:

var x = new XMLHttpRequest();
 var url = location.href;
 x.onreadystatechange = function()
 if(x.readyState == 200) 
 console.log("done");
 else 
 console.log("chunk",x.response); //this is null until readyState is 200 anyway
 

 
 x.onprogress = e => 
 console.log("EE",e.target.response); //also null if resposneType is arraybuffer
 ;
 x.responseType="arraybuffer";
 x.open("GET","http://localhost:88/videoplayback.mp4",true);
 x.send("");

When I try to print the response before its finished loading (to get it by chunks) then its simply null; the arraybuffer only returns as the respnse when its finished loading.

If I take out the responsetype and just leave it as plain text, then indeed some unicode-characters get printed to the screen for each readystatechange even before its finished, only an arraybuffer doesn't.

So: is this the best way to stream a video from the client to server, and if so, how can I actually do it? and if not, what's a better way?

javascript

share|improve this question

edited Mar 28 at 13:22

bluejayke

asked Mar 28 at 9:09

bluejaykebluejayke

64722 gold badges88 silver badges2222 bronze badges

add a comment
 | 

1

I'm trying to stream a from the client side to a server side, to later stream the video back to another client.

The point is:

How can I get chunks of a video from client-side JavaScript (that can be sent to a server)?

using this code, for example:

var x = new XMLHttpRequest();
 var url = location.href;
 x.onreadystatechange = function()
 if(x.readyState == 200) 
 console.log("done");
 else 
 console.log("chunk",x.response); //this is null until readyState is 200 anyway
 

 
 x.onprogress = e => 
 console.log("EE",e.target.response); //also null if resposneType is arraybuffer
 ;
 x.responseType="arraybuffer";
 x.open("GET","http://localhost:88/videoplayback.mp4",true);
 x.send("");

When I try to print the response before its finished loading (to get it by chunks) then its simply null; the arraybuffer only returns as the respnse when its finished loading.

If I take out the responsetype and just leave it as plain text, then indeed some unicode-characters get printed to the screen for each readystatechange even before its finished, only an arraybuffer doesn't.

So: is this the best way to stream a video from the client to server, and if so, how can I actually do it? and if not, what's a better way?

javascript

share|improve this question

edited Mar 28 at 13:22

bluejayke

asked Mar 28 at 9:09

bluejaykebluejayke

64722 gold badges88 silver badges2222 bronze badges

add a comment
 | 

I'm trying to stream a from the client side to a server side, to later stream the video back to another client.

The point is:

How can I get chunks of a video from client-side JavaScript (that can be sent to a server)?

using this code, for example:

var x = new XMLHttpRequest();
 var url = location.href;
 x.onreadystatechange = function()
 if(x.readyState == 200) 
 console.log("done");
 else 
 console.log("chunk",x.response); //this is null until readyState is 200 anyway
 

 
 x.onprogress = e => 
 console.log("EE",e.target.response); //also null if resposneType is arraybuffer
 ;
 x.responseType="arraybuffer";
 x.open("GET","http://localhost:88/videoplayback.mp4",true);
 x.send("");

When I try to print the response before its finished loading (to get it by chunks) then its simply null; the arraybuffer only returns as the respnse when its finished loading.

If I take out the responsetype and just leave it as plain text, then indeed some unicode-characters get printed to the screen for each readystatechange even before its finished, only an arraybuffer doesn't.

So: is this the best way to stream a video from the client to server, and if so, how can I actually do it? and if not, what's a better way?

javascript

share|improve this question

edited Mar 28 at 13:22

bluejayke

asked Mar 28 at 9:09

bluejaykebluejayke

64722 gold badges88 silver badges2222 bronze badges

var x = new XMLHttpRequest();
 var url = location.href;
 x.onreadystatechange = function()
 if(x.readyState == 200) 
 console.log("done");
 else 
 console.log("chunk",x.response); //this is null until readyState is 200 anyway
 

 
 x.onprogress = e => 
 console.log("EE",e.target.response); //also null if resposneType is arraybuffer
 ;
 x.responseType="arraybuffer";
 x.open("GET","http://localhost:88/videoplayback.mp4",true);
 x.send("");

share|improve this question

edited Mar 28 at 13:22

bluejayke

asked Mar 28 at 9:09

bluejaykebluejayke

64722 gold badges88 silver badges2222 bronze badges

share|improve this question

edited Mar 28 at 13:22

bluejayke

asked Mar 28 at 9:09

bluejaykebluejayke

64722 gold badges88 silver badges2222 bronze badges

asked Mar 28 at 9:09

bluejaykebluejayke

64722 gold badges88 silver badges2222 bronze badges

asked Mar 28 at 9:09

bluejaykebluejayke

64722 gold badges88 silver badges2222 bronze badges

1 Answer
1

active

oldest

votes

1

Indeed, arraybuffer or blob responseTypes do not allow access of chunk of data until the download is complete.

Now, there are ways... For instance in newest browsers, you could start a ReadableStream from the fetch API, or from Firefox you could set the responseType to "moz-chunked-buffer", but that's not what you need at all here.

What you are describing is exactly what WebRTC has been made for. So the best way is to run a STUN/TURN server, and to stream your media through it using the MediaStream API.

share|improve this answer

edited Mar 28 at 14:12

answered Mar 28 at 14:06

KaiidoKaiido

53.3k44 gold badges7878 silver badges122122 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Ooh interesting is WebRTC a built in browser interface thats supported by all?
  
  – bluejayke
  Mar 29 at 0:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  WebRTC is a set of standardized APIs, that ultimately all web-browsers following web-standards should support. Now, current browser support is not that bad, but we can't say all do support. A few versions away, Edge didn't had support, and IE won't ever have support. So that depends on your audience really, but most users should be able to use it.
  
  – Kaiido
  Mar 29 at 1:29
  

  
  
  
  

add a comment
 | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55393775%2fjavascript-xmlhttprequest-responsetype-as-arraybuffer-how-to-get-current-ar%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

Indeed, arraybuffer or blob responseTypes do not allow access of chunk of data until the download is complete.

Now, there are ways... For instance in newest browsers, you could start a ReadableStream from the fetch API, or from Firefox you could set the responseType to "moz-chunked-buffer", but that's not what you need at all here.

What you are describing is exactly what WebRTC has been made for. So the best way is to run a STUN/TURN server, and to stream your media through it using the MediaStream API.

share|improve this answer

edited Mar 28 at 14:12

answered Mar 28 at 14:06

KaiidoKaiido

53.3k44 gold badges7878 silver badges122122 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Ooh interesting is WebRTC a built in browser interface thats supported by all?
  
  – bluejayke
  Mar 29 at 0:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  WebRTC is a set of standardized APIs, that ultimately all web-browsers following web-standards should support. Now, current browser support is not that bad, but we can't say all do support. A few versions away, Edge didn't had support, and IE won't ever have support. So that depends on your audience really, but most users should be able to use it.
  
  – Kaiido
  Mar 29 at 1:29
  

  
  
  
  

add a comment
 | 

1

Indeed, arraybuffer or blob responseTypes do not allow access of chunk of data until the download is complete.

Now, there are ways... For instance in newest browsers, you could start a ReadableStream from the fetch API, or from Firefox you could set the responseType to "moz-chunked-buffer", but that's not what you need at all here.

What you are describing is exactly what WebRTC has been made for. So the best way is to run a STUN/TURN server, and to stream your media through it using the MediaStream API.

share|improve this answer

edited Mar 28 at 14:12

answered Mar 28 at 14:06

KaiidoKaiido

53.3k44 gold badges7878 silver badges122122 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Ooh interesting is WebRTC a built in browser interface thats supported by all?
  
  – bluejayke
  Mar 29 at 0:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  WebRTC is a set of standardized APIs, that ultimately all web-browsers following web-standards should support. Now, current browser support is not that bad, but we can't say all do support. A few versions away, Edge didn't had support, and IE won't ever have support. So that depends on your audience really, but most users should be able to use it.
  
  – Kaiido
  Mar 29 at 1:29
  

  
  
  
  

add a comment
 | 

Indeed, arraybuffer or blob responseTypes do not allow access of chunk of data until the download is complete.

Now, there are ways... For instance in newest browsers, you could start a ReadableStream from the fetch API, or from Firefox you could set the responseType to "moz-chunked-buffer", but that's not what you need at all here.

What you are describing is exactly what WebRTC has been made for. So the best way is to run a STUN/TURN server, and to stream your media through it using the MediaStream API.

share|improve this answer

edited Mar 28 at 14:12

answered Mar 28 at 14:06

KaiidoKaiido

53.3k44 gold badges7878 silver badges122122 bronze badges

share|improve this answer

edited Mar 28 at 14:12

answered Mar 28 at 14:06

KaiidoKaiido

53.3k44 gold badges7878 silver badges122122 bronze badges

answered Mar 28 at 14:06

KaiidoKaiido

53.3k44 gold badges7878 silver badges122122 bronze badges

answered Mar 28 at 14:06

KaiidoKaiido

53.3k44 gold badges7878 silver badges122122 bronze badges