wooooo streaming files over a series of sockets!!

1 files changed, 25 insertions, 22 deletions

diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index 87cb48d..0ea5eeb 100644
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -1,28 +1,40 @@
-var socket = io.connect('/client');
+const container = document.querySelector('#container')
 
-ss(socket).on('frame', (stream, data) => {
-  console.log('received frame', data)
-  Object.values(client.connected).map(socket => {
-    ss(socket).emit('frame', stream, data)
-  })
-})
+let socket = io.connect('/client')
+let got_frame = false
 
 socket.on('res', (data) => {
   console.log(data)
 })
 
-socket.on('frame', (fn, data) => {
-  console.log('frame', fn, data.length)
-  document.write(data)
+socket.on('frame', (data) => {
+  got_frame = true
+  console.log('frame', data.fn)
+  // console.log(data.frame)
+  // return
+  const blob = new Blob([data.frame], { type: 'image/jpg' })
+  const url = URL.createObjectURL(blob)
+
+  const img = new Image ()
+  img.onload = function() {
+    URL.revokeObjectURL(url)
+    container.innerHTML = ''
+    container.appendChild(img)
+  }
+  img.src = url
 })
 
 socket.emit('cmd', {
   cmd: 'get_params',
 })
 
-socket.emit('cmd', {
-  cmd: 'get_last_frame',
-})
+setTimeout(() => {
+  if (!got_frame) {
+    socket.emit('cmd', {
+      cmd: 'get_last_frame',
+    })
+  }
+}, 500)
 
 socket.emit('cmd', {
   cmd: 'send_param',
@@ -31,12 +43,3 @@ socket.emit('cmd', {
     'value': 'test',
   }
 })
-
-// $('#file').change(function(e) {
-//   var file = e.target.files[0];
-//   var stream = ss.createStream();
-
-//   // // upload a file to the server.
-//   // ss(socket).emit('file', stream, {size: file.size});
-//   // ss.createBlobReadStream(file).pipe(stream);
-// })
\ No newline at end of file