Probleme beim Zugriff auf Werte in einer Javascript-Map, mögliches Problem bei der Ausführungsreihenfolge der Funktion

Question

Ich arbeite an einer Twilio-Videoanwendung und habe Probleme beim Zugriff auf Video/Audio-Tracks von Remote-Teilnehmern, die über eine Karte geliefert werden. Das Herumspielen mit Dev-Tools hat mir gezeigt, dass die Werte, die ich brauche, mit den Methoden, die ich verwende, zugänglich sein sollen, aber es scheint nicht zu funktionieren.
Der Code für die Einrichtung der Raum:

function connectVid(){ 
Twilio.Video.connect(localStorage.vidToken, { 
    audio: true, 
    video: {width: 520} 
}).then(function(room){ 
    window.room = room; 
    console.log('Connected to Room: ', room.name); 
    Twilio.Video.createLocalTracks().then(function(localTracks) { 
     console.log('Creating tracks in Room: '); 
     console.log(room); 
     console.log('Got default audio and video tracks: ', localTracks); 
     var localParticipant = room.localParticipant; 
     trackArray = localTracks; 
     console.log(trackArray); 
     console.log('Connected to the Room as localParticipant "%s"', localParticipant.identity); 
     var localMediaContainer = document.getElementById('lstream'); 
     localTracks.forEach(function(track) { 
      localMediaContainer.appendChild(track.attach()); 
     }); 
    }) 
}).then(function(room){ 
    attachRemoteParticipant(); 
}).catch(function(err){ 
    console.log(err.message); 
    if(err.code === 20104) { 
     getVidToken(); 
    }; 
}) 
}; 

Die attachRemoteParticipant(); Code:

function attachRemoteParticipant() { 
room.participants.forEach(function(participant) { 
    console.log('Participant "%s" is connected to the Room', participant.identity); 
    var remoteContainer = document.getElementById('rstream'); 
    var remoteTracks = Array.from(participant.tracks.values()); 
    console.log("Remote Tracks COMING:"); 
    console.log(remoteTracks); 
    remoteTracks.forEach(function(track){ 
     console.log('In Remote 4 each'); 
     console.log(track); 
     remoteContainer.appendChild(track.attach()); 
    }); 
}); 
}; 

Ich habe die attachRemoteParticipant Funktion versucht, einschließlich un-abstrahiert im connectVid() Code, am Ende des ersten dann (function (...) {...}) als ein Anruf außerhalb connectVid, die später wie so kommen sollte:

$('#new-twilio-video').click(function(){ 
    if(localStorage.vidToken == undefined) { 
     getVidToken(); 
     // attachRemoteParticipant(); 
    } else { 
     connectVid(); 
     // attachRemoteParticipant(); 
    } 
    addVidModal(); 
}); 

unkommentiert natürlich. Was mit console.log('Participant "%s" is connected to the Room', participant.identity); geloggt wird, ist korrekt, aber console.log(remoteTracks); erzeugt ein leeres Array. JEDOCH, wenn ich Dev Tools verwende, um room.participants.forEach(function(participant) {console.log(Array.from(participant.tracks.values());}) zu laufen, erhalte ich genau, was ich will.
Ich nehme an, das Problem hat mit dem Array.from(...) Aufruf zu tun, bevor die Werte bereit sind, extrahiert werden, daher meine Versuche, eine vorzeitige Ausführung zu verhindern, aber ich könnte falsch liegen. Irgendwelche Vorschläge würden geschätzt werden.
EDIT: Die dev-Tools bietet das Array, das ich will, sondern auch eine undefined als zweites Ergebnis. Würde das ein Problem verursachen?

Answer 1

Aus irgendeinem Grund musste ich meine Methoden aufrufen, um nach einem setTimeout auf die Kartenwerte zuzugreifen. Irgendwie sind die Werte, die in der console.log erscheinen, erst später zugänglich. Ich konnte keine anmutige Art und Weise finden, dies zu tun (mit einfachen Versprechungen und async/await funktionierte nicht), aber gutes ol 'setTimeout hat es geschafft.