Spaces:
No application file
No application file
| <!-- Copyright 2023 The MediaPipe Authors. | |
| Licensed under the Apache License, Version 2.0 (the "License"); | |
| you may not use this file except in compliance with the License. | |
| You may obtain a copy of the License at | |
| http://www.apache.org/licenses/LICENSE-2.0 | |
| Unless required by applicable law or agreed to in writing, software | |
| distributed under the License is distributed on an "AS IS" BASIS, | |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| See the License for the specific language governing permissions and | |
| limitations under the License. --> | |
| <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script> | |
| </script> | |
| <body> | |
| <h1>Pose detection using the MediaPipe PoseLandmarker task</h1> | |
| <section id="demos" class="invisible"> | |
| <h2>Demo: Detecting Images</h2> | |
| <p><b>Click on an image below</b> to see the key landmarks of the body.</p> | |
| <div class="detectOnClick"> | |
| <!-- source: https://pixabay.com/photos/woman-asia-beautiful-cambodia-1822514/ --> | |
| <img src="https://assets.codepen.io/9177687/woman-ge0f199f92_640.jpg" width="100%" crossorigin="anonymous" title="Click to get detection!" /> | |
| </div> | |
| <div class="detectOnClick"> | |
| <!-- source: https://pixabay.com/photos/woman-relaxation-portrait-3053489/ --> | |
| <img src="https://assets.codepen.io/9177687/woman-g1af8d3deb_640.jpg" width="100%" crossorigin="anonymous" title="Click to get detection!" /> | |
| </div> | |
| <h2>Demo: Webcam continuous pose landmarks detection</h2> | |
| <p>Stand in front of your webcam to get real-time pose landmarker detection.</br>Click <b>enable webcam</b> below and grant access to the webcam if prompted.</p> | |
| <div id="liveView" class="videoView"> | |
| <button id="webcamButton" class="mdc-button mdc-button--raised"> | |
| <span class="mdc-button__ripple"></span> | |
| <span class="mdc-button__label">ENABLE WEBCAM</span> | |
| </button> | |
| <div style="position: relative;"> | |
| <video id="webcam" style="width: 1280px; height: 720px; position: abso" autoplay playsinline></video> | |
| <canvas class="output_canvas" id="output_canvas" width="1280" height="720" style="position: absolute; left: 0px; top: 0px;"></canvas> | |
| </div> | |
| </div> | |
| </section> |