diff --git a/index.html b/index.html
index e6e24cf..6258e86 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
-
+
diff --git a/script.js b/script.js
index 6b22a92..8b24e87 100644
--- a/script.js
+++ b/script.js
@@ -47,16 +47,19 @@ const colors = ['lime', 'red', 'cyan', 'magenta']
let lastVideoTime = -1
const effect_funcs = {
- 'pose_landmarks': (videoFrame, poseLandmarker, drawingUtils) => {
+ 'pose_landmarks': (W, H, videoFrame, poseLandmarker, canvasCtx, drawingUtils) => {
const startTimeMs = performance.now()
if (lastVideoTime != videoFrame.timestamp) {
lastVideoTime = videoFrame.timestamp
poseLandmarker.detectForVideo(videoFrame, startTimeMs, result => {
+ canvasCtx.save()
+ canvasCtx.clearRect(0, 0, W, H)
result.landmarks.forEach((landmarks, i) => {
drawingUtils.drawConnectors(landmarks, PoseLandmarker.POSE_CONNECTIONS, { color: colors[i % colors.length], lineWidth: 1 })
const color = colors[(i+1) % colors.length]
drawingUtils.drawLandmarks(landmarks, { color: color, fillColor: color, lineWidth: 0, radius: 1 })
})
+ canvasCtx.restore()
})
}
},
@@ -236,14 +239,9 @@ async function capture() {
async transform(videoFrame, controller) {
const W = videoFrame.codedWidth
const H = videoFrame.codedHeight
- canvasCtx.clearRect(0, 0, canvas.width, canvas.height)
-
let rgba = new Uint8ClampedArray(W * H * 4)
- if (effect.value.includes('landmarks')) {
- canvasCtx.save()
- effect_funcs['pose_landmarks'](videoFrame, poseLandmarker, drawingUtils)
- canvasCtx.restore()
- }
+ if (effect.value.includes('landmarks'))
+ effect_funcs['pose_landmarks'](W, H, videoFrame, poseLandmarker, canvasCtx, drawingUtils)
if (effect.value == 'pose_landmarks')
rgba = rgba.map((_, i) => ((i+1) % 4 == 0) * 255)
else {