[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
<html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"></script>
</head>

<body>
  <div class="container">
    <video class="input_video"></video>
  </div>
</body>
</html>

javascript
<script type="module">
const videoElement = document.getElementsByClassName('input_video')[0];

const landmark;

function onResults(results) {
  if (results.multiHandLandmarks) {
    for (const landmarks of results.multiHandLandmarks) {
      landmark = landmarks;
    }
  }
}

const hands = new Hands({locateFile: (file) => {
  return `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`;
}});
hands.setOptions({
  maxNumHands: 2,
  modelComplexity: 1,
  minDetectionConfidence: 0.5,
  minTrackingConfidence: 0.5
});

hands.onResults(onResults);

const camera = new Camera(videoElement, {
  onFrame: async () => {
    await hands.send({image: videoElement});
  },
  width: 1280,
  height: 720
});
camera.start();

async function main(){
　　//このなかでlandmarkを使いたい
}

</script>

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

javascript
async function main() {
  let results = await new Promise(resolve => {
    hands.onResults(resolve);
  });
  let landmark;
  if (results.multiHandLandmarks) {
    for (const landmarks of results.multiHandLandmarks) {
      landmark = landmarks;
      console.log(landmark);
    }
  }
}
main();