非同期にて処理された結果を、同期的に受け取りたい

Question

electron + vue にてアプリを作っております。

非同期で動作する処理の結果を同期的に受け取りたいと考えております。
具体的には、videoタグの動画の、任意の１フレームを画像データとして取得したいです。

下記の様にすれば、exeFunc関数にて、base64Imageを利用できる事は分かりました。

// vue の methods に定義

getFrame: async function(frameId){
  const video = document.getElementById('videoTag');
  const videoSeek = () => {
    return new Promise((resolve) => {
      video.addEventListener('seeked', () => {
        console.log('seeked');
        resolve();
      },
      {once: true});
      video.currentTime = frameId * deltaTime; // deltaTimeは1フレームあたりの時間
    })
  };
  await videoSeek();
  console.log('seek Done');

  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  context.drawImage(video, 0, 0);
  const base64Image = canvas.toDataURL(); 

  return base64Image;
},


exeFunc: function(num){
  this.getFrame(num).then((base64Image)=>{
    console.log(base64Image);
    // data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4... // DataURL として利用可能
  });
},

このexeFuncを、下記の様に変更したいのですが、pending状態のPromiseオブジェクトが返って来ます。
※なお、exeFunc関数をasyncにして、getFrameの前にawaitを付ければ可能なのは、承知しております。

exeFunc: function(num){
  const base64Image = this.getFrame(num);
  console.log(base64Image); // Promise {<pending>}
},

node.jsの fs.readFileSync では、上記の様な記述方法で、非同期処理の結果を受け取れるので、同じ様ににしたいのです。
getFrame関数をどの様に実装すれば可能でしょうか？

ご教授の程、宜しくお願い致します。

Answer 1

node.jsの fs.readFileSync では、上記の様な記述方法で、非同期処理の結果を受け取れるので

これはNode.js側に相応の仕掛けがしてあるから可能なことです。

getFrame関数をどの様に実装すれば可能でしょうか？

ブラウザの枠内で、非同期処理を同期的に変換する手法はありません。

Comments

[gomigorou]

そのNode.js側の仕掛けを実装するのは、かなり困難な事なのでしょうか？

[maisumakun]

「Node.js側の仕掛け」は、JavaScriptコードの枠外で実装されています。ブラウザに持ってこられるものではありません。