-
Notifications
You must be signed in to change notification settings - Fork 28
/
Body-Segment.html
103 lines (82 loc) · 2.49 KB
/
Body-Segment.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix"></script>
</head>
<body>
<video width=640 height=480 autoplay muted id="camera">
</video>
<canvas width=640 height=480 id="body_pix"> </canvas>
<script>
// function to process input video feed and create segmentation
async function body_segment()
{
const frame = document.getElementById("camera");
// load HTML canvas
const canvas = document.getElementById("body_pix");
const draw = canvas.getContext("2d");
draw.globalAlpha = 0.3;
// color codes for segments
const Color_Codes = ["#663399", "#663399", "#BA55D3", "#BA55D3", "#BA55D3", "#BA55D3", "#BA55D3", "#BA55D3", "#BA55D3", "#BA55D3", "#DA70D6", "#DA70D6", "#4682B4", "#4682B4", "#008080", "#008080", "#008080", "#008080", "#008080", "#008080", "#008080", "#008080", "#008000", "#008000"];
// load body segmentation model
const model = await bodyPix.load();
while(1)
{
// draw frame on canvas
draw.drawImage(frame, 0, 0, 640, 480);
// extract person from frame
const result = await model.segmentPersonParts(frame);
const pixels = result.data;
// colorizing pixels based on their segment ids
for(x=0; x < canvas.width; x++)
{
for(y=0; y < canvas.height; y++)
{
const xy = x * canvas.width + y;
var color_code = "";
if(pixels[xy] != -1)
{
// get color code of the segment
color_code = Color_Codes[pixels[xy]];
}
else
{
// fill background with black color
color_code = "#000000";
}
draw.fillStyle = color_code;
draw.fillRect(y, x, 1, 1);
}
}
// loop to process the next frame
await tf.nextFrame();
}
}
</script>
<script>
video = document.getElementById("camera");
// capture live video stream from web camera
if(navigator.mediaDevices.getUserMedia)
{
navigator.mediaDevices.getUserMedia({video: true})
.then(function (stream) {video.srcObject = stream; });
}
// run segmentation once the video is ready for processing
main();
function main()
{
// check if the video is loaded and ready for processing
if(video.readyState == 4)
{
console.log("video is ready for processing..");
body_segment();
}
else
{
console.log("nope, not ready yet..");
setTimeout(main, 1000/30);
}
}
</script>
</body>
</html>