[JS]関数内で得られた変数を関数外で使いたい

前提・実現したいこと

現在，Mediapipeというライブラリを用いてカメラに写った手の検出とその座標の取得をおこなおうとしています．

MediaPipe Hands JavaScript Solution API
上記のページにあるJavascriptのコードを参考に，MediapipeライブラリをCDNで読み込みJavascriptを使って検出された手の座標を得ようとしているのですが．関数内で得られた座標を関数の外に出すことができません．

問題点・試したこと

以下のjavascriptコードにて，function onResults(results)という関数内のfor文中で得られたlandmarksという値を関数の外(もっといえばasync funcion main()の中)で使用したいです．
しかし，グローバル変数で宣言したconst landmarkに代入してもうまくいきません（関数内でconsole.logした場合はちゃんと確認できました）．

hands.onResults(onResults)がおそらくその関数を呼び出しているようなので，landmark=hands.onResults(onResults)とし関数内にreturn landmarkを入れたりとしてみましたが依然うまくいきませんでした．
そもそもhandsというコンストラクタにonResultsという関数をつけてさらに引数にonResultsをいれるという構造が全く理解出来ません．

フロントエンド全般に関して初心者ですが，何卒解決方法をご教示いただきたいです．

該当のソースコード(抜粋)

html
1<html>
2<head>
3  <meta charset="utf-8">
4  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
5  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
6  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
7  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>
8  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"></script>
9</head>
10
11<body>
12  <div class="container">
13    <video class="input_video"></video>
14  </div>
15</body>
16</html>

javascript
1<script type="module">
2const videoElement = document.getElementsByClassName('input_video')[0];
3
4const landmark;
5
6function onResults(results) {
7  if (results.multiHandLandmarks) {
8    for (const landmarks of results.multiHandLandmarks) {
9      landmark = landmarks;
10    }
11  }
12}
13
14const hands = new Hands({locateFile: (file) => {
15  return `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`;
16}});
17hands.setOptions({
18  maxNumHands: 2,
19  modelComplexity: 1,
20  minDetectionConfidence: 0.5,
21  minTrackingConfidence: 0.5
22});
23
24hands.onResults(onResults);
25
26const camera = new Camera(videoElement, {
27  onFrame: async () => {
28    await hands.send({image: videoElement});
29  },
30  width: 1280,
31  height: 720
32});
33camera.start();
34
35async function main(){
36　　//このなかでlandmarkを使いたい
37}
38
39</script>

修正後のコードとコンソール画面

javascript
1async function main() {
2  let results = await new Promise(resolve => {
3    hands.onResults(resolve);
4  });
5  let landmark;
6  if (results.multiHandLandmarks) {
7    for (const landmarks of results.multiHandLandmarks) {
8      landmark = landmarks;
9      console.log(landmark);
10    }
11  }
12}
13main();
14

行動規範の内容に同意します

回答1件

ベストアンサー

そもそもhandsというコンストラクタにonResultsという関数をつけてさらに引数にonResultsをいれるという構造が全く理解出来ません．

コールバック関数の登録ですね。引数に指定した関数は処理が終わった後で呼ばれます。
引数の onResults は質問者さんが書いたコードの関数名で、名前はなんでもよいです。

「いつmain()が呼ばれるか」が不明ですが、hands.onResults() に渡した関数よりも後に main() を呼べばグローバル変数に値が入っているはずです。

で、そもそもmain()がasyncであるなら、もっと楽にmain()で hands.onResults() の結果を待つことができそうです。

js
1async main() {
2  let results = await new Promise(resolve => {
3    hands.onResults(resolve);
4  });
5  let landmark;
6  if (results.multiHandLandmarks) {
7    for (const landmarks of results.multiHandLandmarks) {
8      landmark = landmarks;
9    }
10  }
11  ... // ここに landmarkを使った処理

投稿2021/12/02 14:50

編集2021/12/02 14:56

int32_t

総合スコア21695

momendoufu

2021/12/03 03:48

ご回答ありがとうございます！いただいたコードを組みこんで試しにmain()を呼び出してみましたが，どうやらプログラムが一度しか実行されないようです．．．例えばプログラム起動時に手をかざしていないと何も出力されず，かざしていればその瞬間の座標は確かに出力されるものの，一度だけで止まってしまい連続的に座標が出力されませんでした．ちなみに以前のコードのfunction onResults(results)の中にconsole.logを入れた場合は座標が連続的にバーッと出力されていました．おそらくawait new Promiseの部分が問題なのかと思いますが，どう直せばよいのでしょうか？（コンソール画面を添付しておきます）

int32_t

2021/12/03 04:13

ああ、onResults() は何度も呼ばれるのですね。 main() では landmark に対して何かをするだけで他に何もしないなら、単純に main() の中でループして何度も await new Promise(...) を呼べばよいでしょう。 main() で landmark の処理以外にもイロイロすることがあるなら、main() 内で landmark を処理するのは諦めましょう。landmark の処理は onResults() の中でやるべきです。

momendoufu

2021/12/05 14:52

ご回答の通りにmain()内にループ入れることで無事欲しい動作実現出来ました！本当に助かりました．ありがとうございました．

行動規範の内容に同意します