1. Chishiki

    No comment

    Chishiki
Changes in body
Source | HTML | Preview
@@ -1,75 +1,77 @@
[前回の記事](https://qiita.com/Chishiki/items/ecbca5be4a6a8275159b)から、スマフォカメラを使って、映像の上にボーンを重ねる実験を行いました。
+i
+phone8 Safariブラウザです。
## HTML
tfjs posenetのdemos camera.htmlに、横幅170pxのcanvasを追加。
-Videoタグ、canvas output widthともに、js側で340pxにします。
+Videoタグ、Canvas id=output widthともに、js側で340px、縦240pxにします。
```
<video id="video" playsinline style=" -moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
display: none;">
</video>
<canvas id="output"></canvas>
<canvas id="canvas" width="170" height="240"></canvas>
```
## CSS
追加したcanvasが、映像の中央に来るように調整。
```
#canvas{
position: absolute;
left: 85px;
top: 0;
background-color: yellow;
opacity: 0.4;
z-index:100;
}
```
## Javascript
追加したcanvasに、あらかじめ取得したボーン座標を描画します。
実は、tensoleflow.jsで取得した座標には、少しズレがあったので、learnOpenCVのOpenPoseImage.pyで出力しました。
```
const canvas_t = document.getElementById('canvas');
const ctx_t = canvas_t.getContext('2d');
ctx_t.clearRect(0, 0, 170, 240);
let poses = [];
// Head – 0, Neck – 1, Right Shoulder – 2, Right Elbow – 3, Right Wrist – 4,
// Right Knee – 9, Right Ankle – 10, Left Hip – 11, Left Knee – 12,
// Left Ankle – 13, Chest – 14, Background – 15
var template_pose = {"score": 1,
"keypoints":[
{"score":1, "part":0, "position": {"x":81.30434782608695,"y":15.652173913043478}},
{"score":1, "part":1, "position": {"x":81.30434782608695,"y":46.95652173913044}},
{"score":1, "part":2, "position": {"x":66.52173913043478,"y":52.17391304347826}},
{"score":1, "part":3, "position": {"x":73.91304347826087,"y":83.47826086956522}},
{"score":1, "part":4, "position": {"x":88.69565217391305,"y":114.78260869565217}},
{"score":1, "part":5, "position": {"x":103.47826086956522,"y":41.73913043478261}},
......
]
};
poses.push(template_pose);
poses.forEach(({score, keypoints}) => {
drawKeypoints(keypoints, ctx_t);
drawSkeleton(keypoints, ctx_t);
});
```
## 結果
夜だったので、背景はPC映像でご勘弁を。近々に外で実際のゴルフのアドレスで試してみて、この記事の整理と所感を記載します。端折った内容ですみません。
![IMG_0397.jpg](https://qiita-image-store.s3.amazonaws.com/0/74852/4951636d-f961-12bb-72ad-c0163a129dd1.jpeg)
*estimateSinglePose()には、映像反転を制御するflipHorizontalがありますが、iOS Safariでtrueにしてもfalseにしても、反転したままなのです。。なぜ?
## 次は
どのくらい離れれば実際の映像に合うのかどうか。
もっと大きな映像にしたいのですが、やり方を模索中。。
フォーム判定のロジック組み込み。