1. Chishiki

    Posted

    Chishiki
Changes in title
+スポーツをITする(2)フォームチェック tensoleflow.js
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,75 @@
+[前回の記事](https://qiita.com/Chishiki/items/ecbca5be4a6a8275159b)から、スマフォカメラを使って、映像の上にボーンを重ねる実験を行いました。
+
+## HTML
+tfjs posenetのdemos camera.htmlに、横幅170pxのcanvasを追加。
+Videoタグ、canvas output widthともに、js側で340pxにします。
+
+```
+<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にしても、反転したままなのです。。なぜ?
+
+## 次は
+どのくらい離れれば実際の映像に合うのかどうか。
+もっと大きな映像にしたいのですが、やり方を模索中。。
+フォーム判定のロジック組み込み。