update readme for beta v 0.1.0

cvalenzuela · cvalenzuela · commit 9025adabe77d · 2019-01-07T18:49:34.000-05:00
diff --git a/README.md b/README.md
@@ -1,12 +1,10 @@
 <p align="center">
-  <img src="resources/runway_icon.png" width="95">
-  <img src="resources/js_icon.png" width="90">
+  <img src="https://runway.nyc3.digitaloceanspaces.com/assets/github/cover_runway_javascript_github.jpg">
 </p>
 
 # Runway + JavaScript
 
-A collection of stand alone examples connecting [Runway](https://runwayml.com/) to JavaScript.
-Examples are separated by current available models.
+A collection of examples and tutorials on how to use [Runway](https://runwayml.com/) with JavaScript applications.
 
 ## Examples
 
@@ -25,7 +23,7 @@ Examples are separated by current available models.
 
 ## Library
 
-Ideally this will become a JavaScript Library that manages the socket connections. For now all examples are using [socket.io](https://socket.io/) to get real-time data. Some examples use [p5.js](https://p5js.org/) to draw things on the canvas.
+This will soon become a JavaScript library that manages the connections and data streams with a simple API. 
 
 ## Contributing
 
diff --git a/im2txt/receivesOnly/script.js b/im2txt/receivesOnly/script.js
@@ -31,7 +31,7 @@
 // Create a connection to the Runway HTTP Server
 // You should select Camera from the Input Panel
 // *You should update this address to match the URL provided by the app
-var socket = io.connect('http://127.0.0.1:3333');
+var socket = io.connect('http://127.0.0.1:33000');
 
 // Wait until the page is loaded
 document.addEventListener("DOMContentLoaded", function(event) {
@@ -47,6 +47,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
   
   // When there is a data event, update the log element
   socket.on('data', function(data) {
-    log.innerHTML = data.results[0].caption;
+    console.log(data);
+    // log.innerHTML = data.results[0].caption;
   });
 });
diff --git a/im2txt/sendWebcam/index.html b/im2txt/sendWebcam/index.html
@@ -59,7 +59,7 @@ <h2>im2txt Demo: sending live webcam stream to Runway</h2>
 
   <!-- Camera -->
   <h3>Camera</h3>
-  <video width="300" height="280"></video>
+  <video width="300" height="280" muted="muted"></video>
 
   <!-- Canvas: Just to send base64 images to Runway -->
   <canvas width="300" height="280" style="display: none;"></canvas>
diff --git a/im2txt/sendWebcam/script.js b/im2txt/sendWebcam/script.js
@@ -30,7 +30,7 @@
 // Create a connection to the Runway HTTP Server
 // You should select HTTP from the INPUT Panel
 // *You should update this address to match the URL provided by the app
-var socket = io.connect('http://127.0.0.1:33100/query');
+var socket = io.connect('http://127.0.0.1:3000/');
 
 // Wait until the page is loaded
 document.addEventListener("DOMContentLoaded", function(event) {
@@ -49,7 +49,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
   if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
     navigator.mediaDevices.getUserMedia({ video: true })
       .then((stream) => {
-        video.src = window.URL.createObjectURL(stream);
+        video.srcObject = stream;
         video.play();
       });
   }
@@ -60,8 +60,8 @@ document.addEventListener("DOMContentLoaded", function(event) {
   });
 
   // When there is new data coming in, update the log element
-  socket.on('update_response', function(data) {
-    log.innerHTML = data.results[0].caption;
+  socket.on('data', function(data) {
+    log.innerHTML = data;
     if (shouldLoop) {
       sendImage();
     }
@@ -71,8 +71,8 @@ document.addEventListener("DOMContentLoaded", function(event) {
   function sendImage() {
     ctx.drawImage(video, 0, 0, 300, 280);
     // Send to Runway the current element in the canvas
-    socket.emit('update_request', {
-      data: canvas.toDataURL('image/jpeg')
+    socket.emit('query', {
+      image: canvas.toDataURL('image/jpeg')
     });
   }
 
diff --git a/resources/js_icon.png b/resources/js_icon.png
diff --git a/resources/runway_icon.png b/resources/runway_icon.png
