Signatur
Beschreibung
Die Eigenschaft binaryType einer PresentationConnection bestimmt, wie empfangene Binärnachrichten an den Handler des message-Events übergeben werden. Mögliche Werte sind "arraybuffer" und "blob". Eine neu erstellte Verbindung hat immer den Wert "arraybuffer".
Die Presentation API verbindet eine steuernde Seite (Controller) mit einer Präsentation auf einem zweiten Bildschirm, etwa einem Chromecast oder einem externen Monitor. Beide Seiten tauschen Nachrichten über send() aus. Textnachrichten kommen immer als string an. Binärdaten wie Bilder, Audio-Schnipsel oder eigene Protokollpakete kommen je nach binaryType als ArrayBuffer oder als Blob an.
"arraybuffer"eignet sich, wenn du die Bytes sofort auswerten willst, zum Beispiel mitDataViewoder einemUint8Array."blob"eignet sich für größere Dateien, die du weiterreichen willst, etwa überURL.createObjectURL()an ein<img>-Element.
Die Eigenschaft funktioniert genauso wie WebSocket.binaryType und RTCDataChannel.binaryType. Setze sie am besten gleich nach dem Verbindungsaufbau und vor der ersten Nachricht.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | "arraybuffer" | "blob" | "arraybuffer" | Neuer Wert beim Setzen. Legt fest, welcher Typ in event.data bei Binärnachrichten steht. |
Rückgabewert
"arraybuffer" oder "blob".Beispiele
Standardwert prüfen und auf Blob umstellen
const request = new PresentationRequest(['receiver.html']);
const startPresentation = async () => {
const connection = await request.start();
console.log(connection.binaryType); // Standardwert
// Bilder als Blob empfangen
connection.binaryType = 'blob';
console.log(connection.binaryType);
};
document.querySelector('#cast').addEventListener('click', startPresentation);Binäres Protokoll mit ArrayBuffer auswerten
const request = new PresentationRequest(['receiver.html']);
const connect = async () => {
const connection = await request.start();
connection.binaryType = 'arraybuffer';
connection.addEventListener('message', (event) => {
if (typeof event.data === 'string') {
console.log('Text:', event.data);
return;
}
// Erstes Byte = Nachrichtentyp, danach 32-Bit-Wert
const view = new DataView(event.data);
const type = view.getUint8(0);
const value = view.getUint32(1, true);
console.log(`Typ ${type}, Wert ${value}`);
});
};
connect();Empfängerseite: Bilder als Blob anzeigen
// receiver.html – läuft auf dem Präsentationsbildschirm
const setupConnection = (connection) => {
connection.binaryType = 'blob';
connection.onmessage = (event) => {
if (event.data instanceof Blob) {
const img = document.querySelector('#slide');
URL.revokeObjectURL(img.src);
img.src = URL.createObjectURL(event.data);
}
};
};
navigator.presentation.receiver.connectionList.then((list) => {
list.connections.forEach(setupConnection);
list.addEventListener('connectionavailable', (e) => setupConnection(e.connection));
});// Wichtig · Fallstricke
Kompatibilität: Die Presentation API ist experimentell. Sie funktioniert im Wesentlichen nur in Chromium-Browsern wie Chrome und Edge, und auch dort nur mit passender Hardware wie Cast-Geräten. Firefox und Safari unterstützen sie nicht. Prüfe deshalb vorher, ob die API vorhanden ist: 'PresentationRequest' in window. Außerdem ist die API nur in sicheren Kontexten (HTTPS) verfügbar.
- Die Einstellung wirkt nur auf eingehende Nachrichten. Mit
send()kannst du trotzdem jederzeitstring,ArrayBuffer,ArrayBufferViewoderBlobverschicken. - Textnachrichten kommen unabhängig von
binaryTypeimmer alsstringan. Prüfe im Handler daher den Typ vonevent.data. - Ungültige Werte werden laut Spezifikation stillschweigend ignoriert und lösen keinen Fehler aus.
- Jede Verbindung hat ihren eigenen Wert. Controller und Empfänger müssen
binaryTypealso jeweils selbst setzen. - Wenn du Daten als
Blobempfängst und Objekt-URLs erzeugst, gib sie mitURL.revokeObjectURL()wieder frei. Sonst wächst der Speicherverbrauch.