Support Multipart/x-mixed-replace ?

[wkh237]

#143 Not sure if it's possible but worth of trying.

[rares-lupascu]

i think i made some steps towards handling x-mixed-replace in js ... would it help sharing the code?

[wkh237]

Of course !

[rares-lupascu]

ok so this is the code i am using to debug this:

var oReq = new XMLHttpRequest();
    oReq.open("POST", 'http://192.168.1.1/osc/commands/execute', true);
    oReq.setRequestHeader("Content-Type", "multipart/x-mixed-replace; boundary=\"---osclivepreview---\"");
    oReq.onreadystatechange  = function() {
      if (oReq.readyState == 3) {
        var x = oReq.responseText.split("---osclivepreview---");
        console.log(oReq.status);
        console.log(x[x.length - 1]);
      }
    };
    oReq.send(JSON.stringify({
      name: "camera.getLivePreview"
    }));

u see there are 2 console logs there so the output (partial output) looks like this:

200

Content-type: image/jpeg
Content-Length:32387

��������������������
�����      �
�
���
����������������������������������������������������������������������������������������������������@����!��������������������������  
��������������}�������!1A��Qa�"q�2����#B���R��$3br� 
�����%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz��������������������������������������������������������������������������������������������    

1. biggest pb is that this request does not stop and since this is a continuous stream it does not need to stop so i need to manully stop it somehow
2. second pb ... is my actual image starting from the first � until the end?

[wkh237]

@wowzaaa , thanks for the information ,this is going to be very helpful.

The multipart/x-mix-reaplce type response means each new part ( data between two ---osclivepreview--- boundary ) will replace the old one. That's why the server non-stopping send new part. If you're going to do it in JS context it's very difficult and inefficient, especially for RN.

Basically we can do this in native context and encode every new part in BASE64 so that you can use it this way (this is what I'm planning to do)

RNFetchBlob.fetch(method, url, headers, body)
   .part((partData) => {
     /* do something with BASE64 data */
   })

I'll update my progress in this thread, thank you 👍

[rares-lupascu]

i do not want to be rude but one of the needs of my app is to work in windows phones too ... and since u r talking about native code ... this mean no windows right? :)

[wkh237]

Unfortunately, yes. This library depends on lot of native implementations and we are not yet supporting Windows.

[rares-lupascu]

ok at least i will know where i stand :) ... i will now wait for news from you ... like a little kid on Christmas' eve :P

[rares-lupascu]

one last favor before i will resume waiting :D
how do i convert the response part with binary data (or whatever it is ... the one i pasted on top) to base64? i cannot use normal javascript from what i see

i want to test this because i will need to show my clients some results and i cannot ask you when could this be ready to test ... :)

[wkh237]

React Native is running in a pure Javascript environment some APIs are not implemented, for example Web APIs, and the atob btoa you've mentioned. However you can use some polyfills, in my case I use base-64 to do this.

[rares-lupascu]

then i really do not know what to encode :(

• do i encode the content + Content-Type + Content-Length or i need to strip them out?
• if i do base64.encode(unescape(encodeURIComponent(x[x.length - 1]))) i get a base64 string but if i attach it to data:image/jpeg;base64,encoded_text the image i get is broken
• if i do base64.encode only ... it tells me the string contains characters outside Latin1

[wkh237]

A multipart response just structured like this

# HTTP response status Code
HTTP/1.1 200 OK 
# HTTP response headers
X-Powered-By: Express  
Content-Type: multipart/x-mixed-replace; boundary="---osclivepreview---";
Date: Fri, 30 Sep 2016 01:10:38 GMT
Connection: keep-alive
Transfer-Encoding: chunked

# HTTP response body
# this is multipart boundary
---osclivepreview--- 
# the below is part data headers end with \r\n
Content-Type: image/jpeg
Content-Length: 19153

# part data will append after an empty line
8c65

����JFIF��Lavc57.24.103��C

# lot of binary data

# part data end with another boundary
---osclivepreview---

...

Basically the image data is inside part body, so you have to stripe out boundary and part headers. But the part data you pasted above have been encoded into UTF8 string and it's broken, even if you encode it into BASE64 string it's still broken 😞

[wkh237]

I'm able to make it working on iPhone6 right now 🎉

keep work on Android part ..