I have a strange problem, I'm working on a Bluetooth camera we want to provide an mjpeg interface to the world.
Mjpeg is just an http server replying one jpeg after the other with the connection keept open. My server is right now giving me:
HTTP/1.1 200 OK Transfer-Encoding: chunked Cache-Directive: no-cache Expires: 0 Pragma-Directive: no-cache Server: TwistedWeb/10.0.0 Connection: Keep-Alive Pragma: no-cache Cache-Control: no-cache, no-store, must-revalidate; Date: Sat, 26 Feb 2011 20:29:56 GMT Content-Type: multipart/x-mixed-replace; boundary=myBOUNDARY HTTP/1.1 200 OK Transfer-Encoding: chunked Cache-Directive: no-cache Expires: 0 Pragma-Directive: no-cache Server: TwistedWeb/10.0.0 Connection: Keep-Alive Pragma: no-cache Cache-Control: no-cache, no-store, must-revalidate; Cate: Sat, 26 Feb 2011 20:29:56 GMT Content-Type: multipart/x-mixed-replace; boundary=myBOUNDARY
And then for each frame:
--myBOUNDARY Content-Type: image/jpeg Content-Size: 25992 BINARY JPEG CONTENT..... (new line)
I made a Flash client for it, so we can use the same code on any device, the server is implemented in Python using twisted and is targeting Android among others, problem in Android is Google forgot to include mjpeg support.... This client is using URLStream.
The code is this:
package net.aircable {
import flash.errors.*;
import flash.events.*;
import flash.net.URLRequest;
import flash.net.URLRequestMethod;
import flash.net.URLRequestHeader;
import flash.net.URLStream;
import flash.utils.ByteArray;
import flash.utils.Dictionary;
import flash.system.Security;
import mx.utils.Base64Encoder;
import flash.external.ExternalInterface;
import net.aircable.XHRMultipartEvent;
public class XHRMultipart extends EventDispatcher{
private function trc(what: String): void{
//ExternalInterface.call("console.log", what); //for android
trace(what);
}
private var uri: String;
private var username: String;
private var password: String;
private var stream: URLStream;
private var buffer: ByteArray;
private var pending: int;
private var flag: Boolean;
private var type: String;
private var browser: String;
private function connect(): void {
stream = new URLStream();
trc("connect")
var request:URLRequest = new URLRequest(uri);
request.method = URLRequestMethod.POST;
request.contentType = "multipart/x-mixed-replace";
trc(request.contentType)
/* request.requestHeaders = new Array(
new URLRequestHeader("Content-type", "multipart/x-mixed-replace"),
new URLRequestHeader("connection", "keep-alive"),
new URLRequestHeader("keep-alive", "115"));
*/
trace(request.requestHeaders);
trc("request.requestHeaders")
configureListeners();
try {
trc("connecting");
stream.load(request);
trc("connected")
} catch (error:Error){
trc("Unable to load requested resource");
}
this.pending = 0;
this.flag = false;
this.buffer = new ByteArray();
}
public function XHRMultipart(uri: String = null,
username: String = null,
password: String = null){
trc("XHRMultipart()");
var v : String = ExternalInterface.call("function(){return navigator.appVersion+'-'+navigator.appName;}");
trc(v);
v=v.toLowerCase();
if (v.indexOf("chrome") > -1){
browser="chrome";
} else if (v.indexOf("safari") > -1){
browser="safari";
}
else {
browser=null;
}
trc(browser);
if (uri == null)
uri = "../stream?ohhworldIhatethecrap.mjpeg";
this.uri = uri;
connect();
}
private function configureListeners(): void{
stream.addEventListener(Event.COMPLETE, completeHandler, false, 0, true);
stream.addEventListener(HTTPStatusEvent.HTTP_STATUS, httpStatusHandler, false, 0, true);
stream.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler, false, 0, true);
stream.addEventListener(Event.OPEN, openHandler, false, 0, true);
stream.addEventListener(ProgressEvent.PROGRESS, progressHandler, false, 0, true);
stream.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler, false, 0, true);
}
private function propagatePart(out: ByteArray, type: String): void{
trc("found " + out.length + " mime: " + type);
dispatchEvent(new XHRMultipartEvent(XHRMultipartEvent.GOT_DATA, true, false, out));
}
private function readLine(): String {
var out: String = "";
var temp: String;
while (true){
if (stream.bytesAvailable == 0)
break;
temp = stream.readUTFBytes(1);
if (temp == "\n")
break;
out+=temp;
}
return out;
}
private function extractHeader(): void {
var line: String;
var headers: Object = {};
var head: Array;
while ( (line=readLine()) != "" ){
if ( stream.bytesAvailable == 0)
return;
if (line.indexOf('--') > -1){
continue;
}
head = line.split(":");
if (head.length==2){
headers[head[0].toLowerCase()]=head[1];
}
}
pending=int(headers["content-size"]);
type = headers["content-type"];
if ( pending > 0 && type != null)
flag = true;
trc("pending: " + pending + " type: " + type);
}
private function firefoxExtract(): void {
trc("firefoxPrepareToExtract");
if (stream.bytesAvailable == 0){
trc("No more bytes, aborting")
return;
}
while ( flag == false ) {
if (stream.bytesAvailable == 0){
trc("No more bytes, aborting - can't extract headers");
return;
}
extractHeader()
}
trc("so far have: " + stream.bytesAvailable);
trc("we need: " + pending);
if (stream.bytesAvailable =0; x-=1){
buffer.position=x;
buffer.readBytes(temp, 0, 2);
// check if we found end marker
if (temp[0]==0xff && temp[1]==0xd9){
end=x;
break;
}
}
trc("findImageInBuffer, start: " + start + " end: " + end);
if (start >-1 && end > -1){
var output: ByteArray = new ByteArray();
buffer.position=start;
buffer.readBytes(output, 0 , end-start);
propagatePart(output, type);
buffer.position=0; // drop everything
buffer.length=0;
}
}
private function safariExtract(): void {
trc("safariExtract()");
stream.readBytes(buffer, buffer.length);
findImageInBuffer();
}
private function chromeExtract(): void {
trc("chromeExtract()");
stream.readBytes(buffer, buffer.length);
findImageInBuffer();
}
private function extractImage(): void {
trc("extractImage");
if (browser == null){
firefoxExtract();
}
else if (browser == "safari"){
safariExtract();
}
else if (browser == "chrome"){
chromeExtract();
}
}
private function isCompressed():Boolean {
return (stream.readUTFBytes(3) == ZLIB_CODE);
}
private function completeHandler(event:Event):void {
trc("completeHandler: " + event);
//extractImage();
//connect();
}
private function openHandler(event:Event):void {
trc("openHandler: " + event);
}
private function progressHandler(event:ProgressEvent):void {
trc("progressHandler: " + event)
trc("available: " + stream.bytesAvailable);
extractImage();
if (event.type == ProgressEvent.PROGRESS)
if (event.bytesLoaded > 1048576) { //1*1024*1024 bytes = 1MB
trc("transfered " + event.bytesLoaded +" closing")
stream.close();
connect();
}
}
private function securityErrorHandler(event:SecurityErrorEvent):void {
trc("securityErrorHandler: " + event);
}
private function httpStatusHandler(event:HTTPStatusEvent):void {
trc("httpStatusHandler: " + event);
trc("available: " + stream.bytesAvailable);
extractImage();
//connect();
}
private function ioErrorHandler(event:IOErrorEvent):void {
trc("ioErrorHandler: " + event);
}
}
};
The client is working quite well on Firefox where I get all the http header:
--myBOUNDARY Content-Type: image/jpeg Content-Size: 25992
So I use content-size to know how many bytes to go ahead. Same happens in IE8 (even buggy IE is compatible!)
On Safari it works a bit differently (maybe it's webkit doing it) I don't get the http piece just the Binary content, which forces me to search over the buffer for the start and end of frame.
Problem is Chrome, believe or not, it's not working. Something weird is going on, apparently I get the first tcp/ip package and then for some reason Chrome decides to close the connection, the output of the log is this:
XHRMultipart() 5.0 (X11; U; Linux i686; en-US) AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.114 Safari/534.16-Netscape chrome connect multipart/x-mixed-replace request.requestHeaders connecting connected openHandler: [Event type="open" bubbles=false cancelable=false eventPhase=2] openHandler: [Event type="open" bubbles=false cancelable=false eventPhase=2] progressHandler: [ProgressEvent type="progress" bubbles=false cancelable=false eventPhase=2 bytesLoaded=3680 bytesTotal=0] available: 3680 extractImage chromeExtract() findImageInBuffer, start: 0 end: -1 httpStatusHandler: [HTTPStatusEvent type="httpStatus" bubbles=false cancelable=false eventPhase=2 status=200 responseURL=null] available: 0 extractImage chromeExtract() findImageInBuffer, start: 0 end: -1
I shouldn't be getting httpStatus until the server closes the connection which is not the case here.
Please don't tell me to use HTML5 Canvas or Video I all ready been that way, problem is we want this application to run in many OSes and compiling a video encoder for all them (ffmpeg for example) will not make the work any easier. Also we want to provide with SCO audio which is just a PCM stream, so I can't use plain mjpeg. Canvas is too slow, I tested that, specially on Android.
