InputBlackBoxOutput · February 5, 2022 07:25
diff --git a/pose.html b/pose.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8" />
    <title>Pose</title>
    <script
      src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/camera_utils.js"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/control_utils.js"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/drawing_utils.js"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/pose.js"
      crossorigin="anonymous"
    ></script>
  </head>

  <body>
    <style>
      .container {
        position: absolute;
        top: 50%;
        left: 50%;
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);

        text-align: center;
      }
    </style>

    <div class="container">
      <h2>Mediapipe: Pose</h2>
      <canvas id="output" width="640px" height="480px"></canvas>
    </div>

    <script>
      const video = document.createElement("video");
      const output = document.getElementById("output");
      const canvasContext = output.getContext("2d");

      function zColor(data) {
        const z = clamp(data.from.z + 0.5, 0, 1);
        return `rgba(0, ${255 * z}, ${255 * (1 - z)}, 1)`;
      }

      function onResultsPose(results) {
        canvasContext.save();
        canvasContext.clearRect(0, 0, output.width, output.height);
        canvasContext.drawImage(
          results.image,
          0,
          0,
          output.width,
          output.height
        );
        drawConnectors(canvasContext, results.poseLandmarks, POSE_CONNECTIONS, {
          color: (data) => {
            const x0 = output.width * data.from.x;
            const y0 = output.height * data.from.y;
            const x1 = output.width * data.to.x;
            const y1 = output.height * data.to.y;

            const z0 = clamp(data.from.z + 0.5, 0, 1);
            const z1 = clamp(data.to.z + 0.5, 0, 1);

            const gradient = canvasContext.createLinearGradient(x0, y0, x1, y1);
            gradient.addColorStop(
              0,
              `rgba(0, ${255 * z0}, ${255 * (1 - z0)}, 1)`
            );
            gradient.addColorStop(
              1.0,
              `rgba(0, ${255 * z1}, ${255 * (1 - z1)}, 1)`
            );
            return gradient;
          },
        });
        drawLandmarks(
          canvasContext,
          Object.values(POSE_LANDMARKS_LEFT).map(
            (index) => results.poseLandmarks[index]
          ),
          { color: zColor, fillColor: "#FF0000" }
        );
        drawLandmarks(
          canvasContext,
          Object.values(POSE_LANDMARKS_RIGHT).map(
            (index) => results.poseLandmarks[index]
          ),
          { color: zColor, fillColor: "#00FF00" }
        );
        drawLandmarks(
          canvasContext,
          Object.values(POSE_LANDMARKS_NEUTRAL).map(
            (index) => results.poseLandmarks[index]
          ),
          { color: zColor, fillColor: "#AAAAAA" }
        );
        canvasContext.restore();
      }

      const pose = new Pose({
        locateFile: (file) => {
          return `https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/${file}`;
        },
      });
      pose.onResults(onResultsPose);

      const camera = new Camera(video, {
        onFrame: async () => {
          await pose.send({ image: video });
        },
        width: 640,
        height: 480,
      });
      camera.start();

      new ControlPanel(document.createElement("div"), {
        selfieMode: true,
        upperBodyOnly: false,
        smoothLandmarks: true,
        minDetectionConfidence: 0.5,
        minTrackingConfidence: 0.5,
      }).on((options) => {
        video.classList.toggle("selfie", options.selfieMode);
        pose.setOptions(options);
      });
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Pose</title>
	<script
	src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/camera_utils.js"
	crossorigin="anonymous"
	></script>
	<script
	src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/control_utils.js"
	crossorigin="anonymous"
	></script>
	<script
	src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/drawing_utils.js"
	crossorigin="anonymous"
	></script>
	<script
	src="https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/pose.js"
	crossorigin="anonymous"
	></script>
	</head>

	<body>
	<style>
	.container {
	position: absolute;
	top: 50%;
	left: 50%;
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);

	text-align: center;
	}
	</style>

	<div class="container">
	<h2>Mediapipe: Pose</h2>
	<canvas id="output" width="640px" height="480px"></canvas>
	</div>

	<script>
	const video = document.createElement("video");
	const output = document.getElementById("output");
	const canvasContext = output.getContext("2d");

	function zColor(data) {
	const z = clamp(data.from.z + 0.5, 0, 1);
	return `rgba(0, ${255 * z}, ${255 * (1 - z)}, 1)`;
	}

	function onResultsPose(results) {
	canvasContext.save();
	canvasContext.clearRect(0, 0, output.width, output.height);
	canvasContext.drawImage(
	results.image,
	0,
	0,
	output.width,
	output.height
	);
	drawConnectors(canvasContext, results.poseLandmarks, POSE_CONNECTIONS, {
	color: (data) => {
	const x0 = output.width * data.from.x;
	const y0 = output.height * data.from.y;
	const x1 = output.width * data.to.x;
	const y1 = output.height * data.to.y;

	const z0 = clamp(data.from.z + 0.5, 0, 1);
	const z1 = clamp(data.to.z + 0.5, 0, 1);

	const gradient = canvasContext.createLinearGradient(x0, y0, x1, y1);
	gradient.addColorStop(
	0,
	`rgba(0, ${255 * z0}, ${255 * (1 - z0)}, 1)`
	);
	gradient.addColorStop(
	1.0,
	`rgba(0, ${255 * z1}, ${255 * (1 - z1)}, 1)`
	);
	return gradient;
	},
	});
	drawLandmarks(
	canvasContext,
	Object.values(POSE_LANDMARKS_LEFT).map(
	(index) => results.poseLandmarks[index]
	),
	{ color: zColor, fillColor: "#FF0000" }
	);
	drawLandmarks(
	canvasContext,
	Object.values(POSE_LANDMARKS_RIGHT).map(
	(index) => results.poseLandmarks[index]
	),
	{ color: zColor, fillColor: "#00FF00" }
	);
	drawLandmarks(
	canvasContext,
	Object.values(POSE_LANDMARKS_NEUTRAL).map(
	(index) => results.poseLandmarks[index]
	),
	{ color: zColor, fillColor: "#AAAAAA" }
	);
	canvasContext.restore();
	}

	const pose = new Pose({
	locateFile: (file) => {
	return `https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/${file}`;
	},
	});
	pose.onResults(onResultsPose);

	const camera = new Camera(video, {
	onFrame: async () => {
	await pose.send({ image: video });
	},
	width: 640,
	height: 480,
	});
	camera.start();

	new ControlPanel(document.createElement("div"), {
	selfieMode: true,
	upperBodyOnly: false,
	smoothLandmarks: true,
	minDetectionConfidence: 0.5,
	minTrackingConfidence: 0.5,
	}).on((options) => {
	video.classList.toggle("selfie", options.selfieMode);
	pose.setOptions(options);
	});
	</script>
	</body>
	</html>