Skip to content
This repository was archived by the owner on Mar 6, 2025. It is now read-only.

Commit 543cc7e

Browse files
cvalenzuelacvalenzuela
committed
add openpose examples and better docs
1 parent 966619c commit 543cc7e

16 files changed

Lines changed: 455 additions & 120 deletions

File tree

‎.vscode/settings.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"useSingleLineStyle": true
77
},
88
"cSpell.words": [
9+
"cris",
910
"cristobal",
1011
"cristóbal",
1112
"runwayml"

‎README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,11 @@ Examples are separated by current available models.
1212

1313
- [im2txt](/im2txt)
1414
- [Receiving data from Runway](/im2txt/receivesOnly)
15-
- [Sending live webcam feed](/im2txt/sendImages)
15+
- [Sending live webcam feed](/im2txt/sendWebcam)
1616
- [OpenPose](/openpose)
17+
- [Receiving data from Runway](/openpose/receivesOnly)
18+
- [Sending live webcam feed](/openpose/sendWebcam)
19+
- [Sending static images](/openpose/sendImage)
1720

1821
## Library
1922

‎im2txt/receivesOnly/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@
1919
-->
2020

2121
<!--
22-
This examples has the bare minimum to establish
22+
im2Txt Example: This examples has the bare minimum to establish
2323
a socket connection with Runway and the im2txt model
2424
2525
Cristóbal Valenzuela
26-
hello@runwayml.com
26+
cris@runwayml.com
2727
-->
2828

2929
<!DOCTYPE HTML>

‎im2txt/receivesOnly/script.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,16 @@
2020
// Runway: im2txt receiving data Demo
2121
// This example just receives incoming data from Runway.
2222
// No need to send images or data from here.
23+
// You should select Camera from the Input Panel
24+
//
25+
// Cristóbal Valenzuela
26+
// cris@runwayml.com
27+
//
28+
// ===============================================================
29+
2330

2431
// Create a connection to the Runway HTTP Server
32+
// You should select Camera from the Input Panel
2533
// *You should update this address to match the URL provided by the app
2634
var socket = io.connect('http://127.0.0.1:3333');
2735

im2txt/sendImages/index.html renamed to im2txt/sendWebcam/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@
1919
-->
2020

2121
<!--
22-
This example creates a video stream and send images to Runway
22+
im2txt Example: This example creates a video stream and send images to Runway
2323
2424
Cristóbal Valenzuela
25-
hello@runwayml.com
25+
cris@runwayml.com
2626
-->
2727

2828
<!DOCTYPE HTML>

im2txt/sendImages/script.js renamed to im2txt/sendWebcam/script.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,16 @@
1919
//
2020
// Runway: im2txt Webcam Demo
2121
// This example sends images from your webcam and receives incoming data from Runway.
22+
// You should select HTTP from the INPUT Panel
23+
//
24+
// Cristóbal Valenzuela
25+
// cris@runwayml.com
26+
//
27+
// ===============================================================
28+
2229

2330
// Create a connection to the Runway HTTP Server
31+
// You should select HTTP from the INPUT Panel
2432
// *You should update this address to match the URL provided by the app
2533
var socket = io.connect('http://10.0.1.5:33100/query');
2634

‎openpose/index.html‎

Lines changed: 0 additions & 115 deletions
This file was deleted.

‎openpose/p1.jpg‎

-10.6 KB
Binary file not shown.

‎openpose/receiveOnly/index.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!--
2+
Copyright (C) 2018 Cristobal Valenzuela
3+
4+
This file is part of RunwayML.
5+
6+
RunwayML is free software: you can redistribute it and/or modify
7+
it under the terms of the GNU General Public License as published by
8+
the Free Software Foundation, either version 3 of the License, or
9+
(at your option) any later version.
10+
11+
RunwayML is distributed in the hope that it will be useful,
12+
but WITHOUT ANY WARRANTY; without even the implied warranty of
13+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14+
GNU General Public License for more details.
15+
16+
You should have received a copy of the GNU General Public License
17+
along with RunwayML. If not, see <http://www.gnu.org/licenses/>.
18+
19+
-->
20+
21+
<!--
22+
OpenPose Demo: This example creates a video stream and send images to Runway
23+
24+
Cristóbal Valenzuela
25+
[email protected]
26+
-->
27+
28+
<!DOCTYPE html>
29+
<html lang="en">
30+
31+
<head>
32+
<meta charset="UTF-8">
33+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
34+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
35+
<title>Runway: OpenPose Demo</title>
36+
<!-- We are using socket.io to establish a socket connection to Runway -->
37+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
38+
<!-- We are using p5.js to draw in the canvas -->
39+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
40+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.js"></script>
41+
42+
<style>
43+
* {
44+
font-family: Arial, Helvetica, sans-serif;
45+
font-weight: lighter;
46+
}
47+
48+
</style>
49+
</head>
50+
51+
<body>
52+
<!-- Information about the model -->
53+
<div>
54+
<h2>OpenPose Demo: receiving data coming from Runway</h2>
55+
<p>About the model: Real-time multi-person keypoint detection library for body, face, and hands estimation.</p>
56+
<p>More information: <a href="https://runwayml.com/tutorials/openpose/">https://runwayml.com/tutorials/openpose/</a></p>
57+
<p>This example uses <a href="https://p5js.org/">p5.js</a> to draw body connections</p>
58+
<hr />
59+
</div>
60+
61+
<!-- A log element to show the connection status -->
62+
<div id="status">Not Connected</div>
63+
64+
<script src="script.js"></script>
65+
</body>
66+
67+
</html>

‎openpose/receiveOnly/script.js‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
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: OpenPose Webcam Demo
21+
// This example sends images from your webcam and receives incoming data from Runway.
22+
// p5.js is used to draw the human data sent from Runway
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 w = 432;
32+
var h = 368;
33+
var colors;
34+
35+
// This are all the body connections we want to draw
36+
var bodyConnections = [
37+
['Nose', 'Left_Eye'],
38+
['Left_Eye', 'Left_Ear'],
39+
['Nose', 'Right_Eye'],
40+
['Right_Eye', 'Right_Ear'],
41+
['Nose', 'Neck'],
42+
['Neck', 'Right_Shoulder'],
43+
['Right_Shoulder', 'Right_Elbow'],
44+
['Right_Elbow', 'Right_Wrist'],
45+
['Neck', 'Left_Shoulder'],
46+
['Left_Shoulder', 'Left_Elbow'],
47+
['Left_Elbow', 'Left_Wrist'],
48+
['Neck', 'Right_Hip'],
49+
['Right_Hip', 'Right_Knee'],
50+
['Right_Knee', 'Right_Ankle'],
51+
['Neck', 'Left_Hip'],
52+
['Left_Hip', 'Left_Knee'],
53+
['Left_Knee', 'Left_Ankle'],
54+
]
55+
56+
// This array will get updated with all the humans detected in the image
57+
var humans = [];
58+
59+
// Wait until the page is loaded
60+
document.addEventListener("DOMContentLoaded", function(event) {
61+
// A variable to hold the status of the connection
62+
var status = document.getElementById('status');
63+
64+
// Create a connection with Runway
65+
// *You should update this address to match the URL provided by the app
66+
var socket = io.connect('http://127.0.0.1:3333');
67+
68+
// When a connection is established
69+
socket.on('connect', function() {
70+
status.innerHTML = 'Connected';
71+
});
72+
73+
// When there is a data event, update the humans array
74+
socket.on('data', function(data) {
75+
humans = data.results.humans;
76+
});
77+
});
78+
79+
// p5 setup function
80+
function setup() {
81+
// Create a canvas
82+
createCanvas(w, h);
83+
// Create a video element.
84+
// Although we are getting the images from Runway, this is just to show the video behind
85+
capture = createCapture(VIDEO);
86+
capture.size(w, h);
87+
// Hide the video element. We will be showing only the canvas
88+
capture.hide();
89+
// Set some style and colors
90+
strokeWeight(2);
91+
colors = [color('#00ff00'), color('#ffff00'), color('#ff0000'), color('#00ffff'), color('#ffffff'), color('#f4f'), color('#00ff'), color('#ffaf00'), color('#aff'), color('#aaf'), color('#33a'), color('#55f'), color('#771'), color('#15f'), color('#ff0000'), color('#00ff00'), color('#ffff00'), color('#ff0000')];
92+
}
93+
94+
// p5 draw function
95+
function draw() {
96+
// Every frame, draw the current video frame
97+
image(capture, 0, 0, w, h);
98+
// If there are humans detected, draw them in top of video frames
99+
if (humans.length > 0) {
100+
humans.forEach(human => drawHuman(human));
101+
}
102+
}
103+
104+
// A function that connects joints based on data coming from OpenPose
105+
function drawHuman(human) {
106+
bodyConnections.forEach((connection, i) => {
107+
let start = null;
108+
let endA = null;
109+
let endB = null;
110+
human.forEach(bodyPart => {
111+
const name = bodyPart[0];
112+
if (name === connection[0]) {
113+
start = bodyPart;
114+
} else if (name === connection[1]) {
115+
endA = bodyPart;
116+
} else if (connection[2] && name === connection[2]) {
117+
endB = bodyPart;
118+
}
119+
});
120+
stroke(colors[i]);
121+
if (start && endA && !endB) {
122+
line(start[1] * w, start[2] * h, endA[1] * w, endA[2] * h);
123+
} else if (start && endA && endB) {
124+
line(start[1] * w, start[2] * h, (endA[1] + endB[1]) / 2 * w, (endB[2] + endB[2]) / 2 * h);
125+
}
126+
});
127+
}

0 commit comments

Comments
 (0)