You have embedded an Eagle 3D Streaming page in an <iframe>
on your own website, and you want your visitor to be able to choose which
microphone it captures. That takes two commands, not one. This page explains
why, in order, from the beginning.
An <iframe> embed puts two web pages on screen at once, and
they belong to two different websites: yours, and Eagle 3D
Streaming's inside it. That second part matters more than it sounds, and
everything below follows from it.
Say the visitor's computer has two: microphone 1 and microphone 2. Both pages can see both of them. Nothing surprising yet.
Every microphone has an id — that is how code says use this one. The catch is that a browser gives each website its own ids for the very same microphones.
Per website, not per page: two pages on your own site share the same ids, so
you can pass one between them freely. It is only crossing to a different
website — which is exactly what the <iframe> does
— that the ids stop meaning anything.
ID1 to your website and ID3 to Eagle
3D Streaming's. Browsers do this deliberately, so that two websites cannot
compare ids to work out they are looking at the same visitor.
This is the whole problem. Say your page looks up its own microphones and
sends ID1 across, meaning capture this microphone and send
its audio through the stream. The Eagle 3D page has never heard of
ID1. It knows those two microphones as ID3 and
ID4. The message arrives, and there is nothing it can do with it.
Send getMicDevices. The reply carries the ids
that page uses — the ones it will recognise when you
send one back, together with a readable name for each.
How you choose is entirely yours. A dropdown, a settings screen, or nothing on screen at all — your code can simply pick one. Whichever it is, send back an id from the list you were given.
ID4 came from the Eagle 3D page, so that page knows exactly which
microphone it means.
Once that id arrives, your part is done. Eagle 3D Streaming captures that microphone and sends its audio over WebRTC to your Unreal application — without restarting the stream. The picture does not flicker and the visitor is not put back in the queue.
| Direction | Message |
|---|---|
| your page → the Eagle 3D page | { cmd: "getMicDevices" } |
| the Eagle 3D page → your page | { type: "micDevices", ok: true, devices: [{ deviceId, label, isActive }] } |
| your page → the Eagle 3D page | { cmd: "setMicDevice", deviceId: "<an id from that list>" } |
| the Eagle 3D page → your page | { type: "micDeviceChanged", ok: true, deviceId, label } |
| the Eagle 3D page → your page | { type: "micDeviceChanged", ok: false, error, message } |
All four are ordinary postMessage traffic across the iframe
boundary, the same as every other command.
Choose the microphone — when to ask, what the answers mean before permission is granted, and how to check that a switch really took effect.
Last updated