1+ // Copyright (C) 2018 Cristobal Valenzuela
2+ //
3+ // This file is part of RunwayML.
4+ //
5+ // RunwayML is free software: you can redistribute it and/or modify
6+ // it under the terms of the GNU General Public License as published by
7+ // the Free Software Foundation, either version 3 of the License, or
8+ // (at your option) any later version.
9+ //
10+ // RunwayML is distributed in the hope that it will be useful,
11+ // but WITHOUT ANY WARRANTY; without even the implied warranty of
12+ // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13+ // GNU General Public License for more details.
14+ //
15+ // You should have received a copy of the GNU General Public License
16+ // along with RunwayML. If not, see <http://www.gnu.org/licenses/>.
17+ //
18+ // ===============================================================
19+ //
20+ // Runway: YOLO Webcam Demo
21+ // This example receives incoming data from Runway.
22+ // p5.js is used to draw rectangles
23+ // You should select Camera from the Input Panel
24+ //
25+ // Cristóbal Valenzuela
26+ // cris@runwayml .com
27+ //
28+ // ===============================================================
29+
30+ var capture ;
31+ var WIDTH = 432 ;
32+ var HEIGHT = 368 ;
33+
34+ // All the objects detected with YOLO will be in this results variable
35+ var results = [ ] ;
36+
37+ // Wait until the page is loaded
38+ document . addEventListener ( "DOMContentLoaded" , function ( event ) {
39+ // A variable to hold the status of the connection
40+ var status = document . getElementById ( 'status' ) ;
41+
42+ // Create a connection with Runway
43+ // *You should update this address to match the URL provided by the app
44+ var socket = io . connect ( 'http://127.0.0.1:3333' ) ;
45+
46+ // When a connection is established
47+ socket . on ( 'connect' , function ( ) {
48+ status . innerHTML = 'Connected' ;
49+ } ) ;
50+
51+ // Whenever there is data coming fron Runway, update the results variable
52+ socket . on ( 'data' , function ( data ) {
53+ results = data . results ;
54+ } ) ;
55+ } ) ;
56+
57+ // p5 setup function
58+ function setup ( ) {
59+ // Create a canvas
60+ createCanvas ( WIDTH , HEIGHT ) ;
61+ // Create a video element.
62+ // Although we are getting the images from Runway, this is just to show the video behind
63+ capture = createCapture ( VIDEO ) ;
64+ capture . size ( WIDTH , HEIGHT ) ;
65+ // Hide the video element. We will be showing only the canvas
66+ capture . hide ( ) ;
67+ }
68+
69+ // p5 draw function
70+ function draw ( ) {
71+ // Every frame, draw the current video frame
72+ image ( capture , 0 , 0 , WIDTH , HEIGHT ) ;
73+ // Loop through all the elements detected and draw a bounding box around them
74+ results . forEach ( function ( object , i ) {
75+ var bounds = object . bounds ;
76+ var x = bounds [ 0 ] ;
77+ var y = bounds [ 1 ] ;
78+ var w = bounds [ 2 ] ;
79+ var h = bounds [ 3 ] ;
80+ fill ( 0 , 255 , 0 )
81+ noStroke ( ) ;
82+ // Draw a text over the bounding box
83+ text ( object . cat , x * WIDTH , y * HEIGHT - 5 ) ;
84+ noFill ( ) ;
85+ strokeWeight ( 4 ) ;
86+ stroke ( 0 , 255 , 0 ) ;
87+ // Draw the bounding box
88+ rect ( x * WIDTH , y * HEIGHT , w * WIDTH , h * HEIGHT ) ;
89+ } )
90+ }
0 commit comments