ios html camera,camera.html

PoseNet - Camera Feed Demo

body {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

.canvas-container {

width: 800px;

max-width: 100%;

display: flex;

justify-content: center;

position: relative;

}

.camera-canvas {

position: absolute;

transform: scale(0.5, 0.5);

transform-origin: 0 0;

left: 10px;

top: 10px;

}

#main {

left: 0;

top: 0;

position: absolute;

}

.illustration-canvas {

border: 1px solid #eeeeee;

}

.footer {

position: fixed;

left: 0;

bottom: 0;

width: 100%;

color: black;

}

.footer-text {

max-width: 600px;

text-align: center;

margin: auto;

}

@media only screen and (max-width: 600px) {

.footer-text,

.dg {

display: none;

}

}

/*

* The following loading spinner CSS is from SpinKit project

* https://github.com/tobiasahlin/SpinKit

*/

.sk-spinner-pulse {

width: 20px;

height: 20px;

margin: auto 10px;

float: left;

background-color: #333;

border-radius: 100%;

-webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;

animation: sk-pulseScaleOut 1s infinite ease-in-out;

}

@-webkit-keyframes sk-pulseScaleOut {

0% {

-webkit-transform: scale(0);

transform: scale(0);

}

100% {

-webkit-transform: scale(1.0);

transform: scale(1.0);

opacity: 0;

}

}

@keyframes sk-pulseScaleOut {

0% {

-webkit-transform: scale(0);

transform: scale(0);

}

100% {

-webkit-transform: scale(1.0);

transform: scale(1.0);

opacity: 0;

}

}

.spinner-text {

float: left;

}

Loading PoseNet model...

Pose Animator runs TF.js FaceMesh and PoseNet models to animate SVG illustrations with camera feed / static images.

It currently supports single-pose, single-face detection, and has been tested on Destkop Chrome & iOS Safari.

(PoseNet model config - MobileNetV1, output stride 16, quant bytes 2)

一键复制

编辑

Web IDE

原始数据

按行查看

历史