video streaming using websocket. but,streaming is very slower than 0.1fps.

Dependencies:   BaseUsbHost EthernetInterface WebSocketClient mbed-rtos mbed

Fork of BaseUsbHost_example by Norimasa Okamoto

viewer

viewer.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>

var channel = "public-ch";
var url = "ws://sockets.mbed.org/ws/" + channel + "/rw";

$('#top').live('pageinit', function(e, d) {
    var ws = new WebSocket(url);
    var img_str = "";
    var frame = 0;
    var received = 0;
    ws.onopen = function(evt) {
        $("#status").text("CONNECTED")
    };
    ws.onclose = function(evt) {
        $("#status").text("DISCONNECTED")
    };
    ws.onmessage = function(evt) {
       var s = evt.data;
       received += s.length;
       console.log(s);
       if (s == ".") {
           var src = "data:image/jpeg;base64," + img_str;
           $("#image").attr("src", src);
           img_str = "";
           frame++;
       } else {
           img_str += s;
       }
       $("#status").text("received:" + received + " frame:"+ frame)
    }
});
</script>
</head>
<body>
<div data-role="page" id="top">
  <div data-role="header" data-theme="b">
    <h1>viewer</h1>
  </div>
  <div data-role="content">
    <img id="image" width="160" height="120">
  </div>
  <div data-role="footer" data-theme="b">
    <h5 id="status">DISCONNECTED</h5>
  </div>
</div>
</body>
</html>