Video Express Entwicklerhandbuch

Dieses Entwicklerhandbuch enthält detaillierte Informationen zur Verwendung von Video Express.

Über Video Express

Vonage Video Express ist eine JavaScript-Bibliothek zur schnellen Erstellung einer Webanwendung für Videokonferenzen mit mehreren Teilnehmern. Videokonferenz-Webanwendung zu erstellen. Sie basiert auf OpenTok.js, der Vonage Video API für Web Anwendungen.

Einrichten eines Video Express Zimmerauf der Grundlage einer Video API-Sitzung, um die mehrere webbasierte Clients zu treffen.

Video Express umfasst Folgendes:

A Layout-Managerdas die Anordnung der Videoelemente in der HTML-Seite übernimmt
Ein Qualitätsmanager, der die Streamauflösung und die Bildrate kontinuierlich optimiert, wodurch die Bandbreitennutzung des Clients reduziert wird.
Ein Experience Manager, der die Priorität der Sprecher dynamisch festlegt und die Teilnehmer automatisch stummschaltet für größere Besprechungen (siehe Aktive Lautsprechererkennung).
Ein Raummanager, der die Interaktion auf niedriger Ebene mit WebRTC handhabt und Primitive auf höherer Ebene liefert, mit denen Primitive, die einfacher zu erstellen sind.

Laden der Video Express-Bibliothek

Video Express ist als Node-Modul erhältlich unter npmjs.de:

npm i --save @vonage/video-express

Sie können die Video Express-Bibliothek auch mit einem script Tag eine HTML-Seite:

<script src="https://static.opentok.com/v1/js/video-express.js"></script>

Derzeit enthält Vonage Video Express keine Standard-Benutzeroberfläche. Sie müssen also CSS hinzufügen hinzufügen, um die Raumkomponenten in Ihrer Anwendung zu gestalten:

Für einen schnellen Start kopieren Sie die video-express-styles.css Datei und fügen Sie sie in die head Abschnitt der Seite mit Video Express:

Einem Raum beitreten und einen Kamerastream veröffentlichen

Rufen Sie die Room Konstruktor zum Beitritt zu einem Video-Express-Raum

const room = new VideoExpress.Room({
  apiKey: 'b28bcf05-b8bf-4c78-9f92-0b7435aa52ee',
  sessionId: '1_this1is2my3new4session5id6',
  token: 'eyJhbGciOiJIU[...]',
});

Die apiKey, sessionIdund token sind die Application ID für Ihre Videoanwendung, eine Sitzungs-ID für den Raum und ein Token. Das Token muss eine "Publisher"-Rolle enthalten. Die Application ID erhalten Sie in Ihrem Vonage Customer Dashboard unter "Erstellen und Verwalten" und dann "Applications".. Erstellen Sie Sitzungs-IDs und Token unter Verwendung der Server-SDKs.

Im Folgenden wird eine Rauminstanz (mit allen Parametern) instanziiert

const room = new VideoExpress.Room({
  apiKey:'b28bcf05-b8bf-4c78-9f92-0b7435aa52ee',
  sessionId: "1_this1is2my3new4session5id6",
  token: "eyJhbGciOiJIU[...]",
  roomContainer: "roomcontainer",
  managedLayoutOptions: {
    layoutMode: "active-speaker",
    cameraPublisherContainer: "cameraPublisherContainerDiv",
    screenPublisherContainer: "screenPublisherContainerDiv",
  }
});

Das folgende Beispiel instanziiert eine Rauminstanz, schließt aber die Kamera und den Herausgeber der Bildschirmfreigabe aus Container aus:

const room = new VideoExpress.Room({
  apiKey: 'b28bcf05-b8bf-4c78-9f92-0b7435aa52ee',
  sessionId: "1_this1is2my3new4session5id6",
  token: "eyJhbGciOiJIU[...]",
  roomContainer: "roomcontainer",
  managedLayoutOptions: {
    layoutMode: "active-speaker",
  }
});

Wenn der Client dem Raum beitritt, sendet das Raumobjekt eine connected Veranstaltung:

room.on('connected', () => {
  console.log('Connected');
  // Can use this event to update visual indicator for connection status
});

Siehe Veranstaltungen für weitere Informationen über das Video Express-Ereignismodell.

Wenn Sie einem Raum beitreten, erstellt Video Express einen Kameraverlag für den Client. Dieser sendet das Video des Clients an die anderen Teilnehmer des Raums. Der Benutzer wird aufgefordert, den Zugriff auf die Kamera und das Mikrofon zu gewähren. Verweigert der Benutzer Zugriff auf Kamera und Mikrofon verweigert, wird der Client vom Raum getrennt. Raum getrennt, da es nicht erlaubt ist, einem Raum beizutreten, ohne einen Kamerastream zu veröffentlichen.

Das ist wichtig: Vonage Video Express 1.0 unterstützt derzeit 25 gleichzeitige Teilnehmer in einem Raum. Wenn Sie mehr als 25 Personen zu einer Sitzung hinzufügen, müssen Sie sicherstellen, dass die Netzwerk- und Hardwareleistung der Teilnehmer ausreichend ist.

Verlassen eines Raumes

Um den Raum zu verlassen, schließen Sie das Browserfenster oder rufen Sie die leave() Methode des des Room-Objekts:

room.leave();

Erkennen, wenn der lokale Client den Raum verlässt

Das Room-Objekt sendet eine disconnected Ereignis, wenn der Kunde den Raum verlässt:

room.on('disconnected', (reason) => {
  console.log('disconnected reason: ', reason);
  // Can use this event to update visual indicator for connection status
});

Das Ereignis sendet reason Zeichenfolge, die den Grund für die Verbindungsunterbrechung des Clients angibt.

Das Objekt Room sendet reconnecting und reconnected Ereignisse, wenn der Client die Verbindung zum Raum verliert und sich wieder verbindet:

// You can use these event to update a UI indicator for connection status
room.on('reconnecting', () => {
  console.log('Temporarily disconnected.');
});

room.on('reconnected', () => {
  console.log('Reconnected.');
});

Erkennen, wenn andere Clients den Raum betreten und verlassen

Das Room-Objekt sendet eine participantJoined Ereignis, wenn ein anderer Teilnehmer (nicht der lokale Benutzer) den Raum betritt:

room.on('participantJoined', (participant) => {
  console.log('participant joined: ', participant.name);
});

Das Ereignis gibt ein Teilnehmerobjekt aus, das den Teilnehmer identifiziert, der beigetreten ist. Siehe die Referenzdokumentation.

Das Room-Objekt sendet eine participantLeft Ereignis, wenn ein Teilnehmer (außer dem lokaler Benutzer) den Raum verlässt:

room.on('participantLeft', (participant, reason) => {
  console.log('participant left: ', participant.name);
  console.log('reason: ', reason);
});

Das Ereignis gibt ein Teilnehmer-Objekt aus, das den Teilnehmer identifiziert, der den Raum verlassen hat und ein reason String, der den Grund für den Austritt des Kunden angibt. Siehe die Referenzdokumentation.

Erkennen, wenn andere Clients Kameraströme veröffentlichen

Wenn andere Benutzer Kamerastreams veröffentlichen, fügt der Video Express-Layoutmanager automatisch das Video zur HTML-Seite hinzu.

Ein Participant-Objekt sendet eine cameraCreated Ereignis, wenn ein Teilnehmer (nicht der lokale Benutzer) einen Kamerastream veröffentlicht:

participant.on('cameraCreated', (cameraSubscriber) => {
  console.log('new camera stream for ', participant.name);
});

Das Ereignis sendet eine CameraSubscriber Objekt. Das CameraSubscriber-Objekt enthält Methoden zum Aktivieren und Deaktivieren der Audio- und und Videowiedergabe im lokalen Client (siehe Aktivieren und Deaktivieren von Audio und Video eines Kamerateilnehmers).

Ein Participant-Objekt sendet eine cameraDestroyed Ereignis, wenn ein Teilnehmer (nicht der lokale Benutzer) die Veröffentlichung eines Kamerastreams beendet:

participant.on('cameraDestroyed', () => {
  console.log('camera destroyed for ', participant.name);
});

UI und Layout

Video Express enthält einen Layout-Manager, der die Videoelemente automatisch im HTML-DOM anordnet anordnet und das Layout auf mobilen Bildschirmen anpasst. Der Layout-Manager hebt automatisch aktive Lautsprecher in einem Raum. Das Layout passt sich automatisch an, um die aktiven Sprecher zu vergrößern. Der Layout-Manager vergrößert automatisch ein Video zur Bildschirmfreigabe, falls ein solches vorhanden ist.

Der Layout-Manager platziert ein Screen-Sharing-Video in der größten Kachel des Layouts, auch wenn ein aktiver Lautsprecher verwendet wird.

Sie können die screenPublisherContainer und cameraPublisherContainer Optionen des Room() Konstruktion, um das Video für die veröffentlichten Kamera- und Bildschirmfreigabevideos des lokalen Clients Kamera- und Bildschirmfreigabevideos außerhalb der Benutzeroberfläche des Layout-Managers angezeigt werden.

Auf einem mobilen Gerät zeigt der Layout-Manager nur 4 Kamera-Videos an. Außerdem nehmen die Videos für die Bildschirmfreigabe und den aktiven Sprecher den gesamten Bildschirm auf einem mobilen Gerät ein. Sie können die participantJoined und participantLeft Ereignisse, die vom Room-Objekt ausgelöst werden, um einen benutzerdefinierten UI-Indikator zu haben, der die Gesamtzahl der Teilnehmer in einem Raum anzeigt.

Standardmäßig bestimmt der Layout-Manager automatisch, ob ein Client auf einem mobilen Gerät läuft. Gerät läuft, basierend auf dem User Agent des Clients. Der managedLayoutOptions Parameter des Raum()-Konstruktor umfasst eine optionale deviceLayoutMode Eigenschaft. Setzen Sie diese auf "desktop" oder "mobile" auf das Gerätelayout explizit festzulegen.

Layout-Optionen

Es gibt zwei Layouts:

grid - Die Videos sind in einem Rasterlayout angeordnet.
active-speaker - Ein aktiver Sprecher (der Teilnehmer, der gerade spricht) wird automatisch in einem größeren DOM-Element hervorgehoben.

Die Room() Konstruktor enthält eine managedLayoutOptions Parameter, mit dem Sie das Layout festlegen können, wenn Sie einem Raum beitreten:

const room = new VideoExpress.Room({
  apiKey: 'b28bcf05-b8bf-4c78-9f92-0b7435aa52ee',
  sessionId: '1_this1is2my3new4session5id6',
  token: 'eyJhbGciOiJIU[...]',
  roomContainer: 'roomContainer',
  managedLayoutOptions: {
    layoutMode: 'active-speaker'
  }
});

Sie können den Layoutmodus auch ändern, indem Sie die Funktion Room.setLayoutMode() Methode:

room.setLayoutMode('grid'); // Set layout mode to grid
room.setLayoutMode('active-speaker'); // Set layout mode to active-speaker

Die managedLayoutOptions Parameter des Raum()-Konstruktor umfasst auch eine optionale deviceLayoutMode Eigenschaft. Setzen Sie diese auf "desktop" oder "mobile" auf das Gerätelayout explizit festzulegen. Standardmäßig bestimmt der Layout-Manager automatisch, ob ein Client auf einem mobilen Gerät läuft, basierend auf dem User Agent des Clients. Benutzer-Agent.

Die fakultative mediaShutoffThreshold Parameter des Raum()-Konstruktor setzt einen Schwellenwert für die aktuelle Anzahl der Teilnehmer im Raum (beim Beitritt), der verhindert, dass der CameraPublisher des lokalen Clients Audio und Video veröffentlicht.

Die fakultative maxVideoParticipantsOnScreen Parameter des Raum()-Konstruktor legt die maximale Anzahl von CameraSubscriber-Videos fest, die gleichzeitig in einem Raum angezeigt werden. Dies betrifft nur die Anzeige von Videos im lokalen Client.

Wechsel der verwendeten Kamera und des Mikrofons

Einstellung der Audio-/Videogeräte des Kameraherausgebers

// Changes the audio input device
room.camera.setAudioDevice(audioDeviceId);

// Changes the video input device
room.camera.setVideoDevice(videoDeviceId);

Abrufen von Audio-/Videogeräten des Kameraherausgebers

// Returns the current audio input device
const currentAudioDevice = await room.camera.getAudioDevice();

// Returns the current video input device
const currentVideoDevice = room.camera.getVideoDevice();

Einstellen des Audioausgabegeräts

Um ein Array der verfügbaren Audio-Ausgabegeräte zu erhalten, rufen Sie die VideoExpress.getAudioOutputDevices() Methode:

const devices = await VideoExpress.getAudioOutputDevices();

Um die Geräte-ID und die Bezeichnung für das aktuelle Audio-Ausgabegerät zu erhalten, rufen Sie die Funktion VideoExpress.getActiveAudioOutputDevice() Methode:

const device = await VideoExpress.getActiveAudioOutputDevice();
console.log(device.deviceId, device.label);

Um das Audio-Ausgabegerät einzustellen, rufen Sie die Funktion VideoExpress.setAudioOutputDevice() Methode, wobei eine Geräte-ID übergeben wird:

const devices = await VideoExpress.setAudioOutputDevice(deviceId);

Der folgende Code zeigt, wie man Methoden implementiert, um durch die verfügbaren Audio-Ausgabegeräte:

const currentAudioIndex;

const devices = await VideoExpress.getAudioOutputDevices;
const currentDevice = await devices.getActiveAudioOutputDevice();
  devices.forEach((device, index) => {
    if (device.label === currentDevice.label) {
      currentAudioIndex = index;
    }
  });

const cycleAudioOutput = () => {
  currentAudioIndex += 1;
  let deviceId = devices[currentAudioIndex % devices.length].deviceId;
  VideoExpress.setAudioOutputDevice(deviceId);
};

Erstellen eines Vorschauverlags

Sie können optional ein Vorschauverlagselement einrichten, bevor Sie dem Raum beitreten:

const previewPublisher = new VideoExpress.PreviewPublisher('previewContainer');
await previewPublisher.previewMedia(
  publisherOptions: {
    targetElement: 'previewContainer',
    publisherProperties: {
      resolution: '1280x720'
    },
  },
);

Der Benutzer wird aufgefordert, den Zugriff auf Kamera und Mikrofon zu gestatten. Wenn der Benutzer den Zugriff Zugriff gewährt, wird das Versprechen, das von der previewPublisher.previewMedia() Methode aufgelöst wird. Andernfalls wird sie abgelehnt.

Sie können den Vorschauverlag verwenden, um den Benutzer die Kamera und das Mikrofon auswählen zu lassen bevor er den Raum betritt:

// Get the current audio input device
const currentAudioDevice = await previewPublisher.getAudioDevice();

// Change the audio input device
previewPublisher.setAudioDevice(audioDeviceId);

// Get the current video input device
const currentVideoDevice = previewPublisher.getVideoDevice();

// Change the video input device
previewPublisher.setVideoDevice(videoDeviceId);

Um eine Reihe von verfügbaren Audio- und Video-Eingabegeräten zu erhalten, rufen Sie die VideoExpress.getDevices() Methode:

const devices = await VideoExpress.getDevices();

Der folgende Code zeigt, wie man Methoden implementiert, um durch die verfügbaren Audio- und Video-Eingabegeräte durchlaufen:

let currentAudioIndex;
let currentVideoIndex;

VideoExpress.getDevices((err, devices) => {
  audioInputs = devices.filter((device) => device.kind === 'audioInput');
  // Find the right starting index for cycleMicrophone
  audioInputs.forEach((device, index) => {
    if (device.label === previewPublisher.getAudioSource().label) {
      currentAudioIndex = index;
    }
  });

  currentAudioIndex = devices
    // Get all video inputs
    .filter((device) => device.kind === 'audioInput')
    // Find the right starting index for cycleMicrophone
    .findIndex((device) => device.label === previewPublisher.getAudioSource().label);

  currentVideoIndex = devices
    // Get all video inputs
    .filter((device) => device.kind === 'videoInput')
    // Find the right starting index for cycleCamera
    .findIndex((device) => device.label === previewPublisher.getVideoDevice().label);
});

const cycleMicrophone = () => {
  currentAudioIndex += 1;
  let deviceId = audioInputs[currentAudioIndex % audioInputs.length].deviceId;
  previewPublisher.setAudioSource(deviceId);
};

const cycleCamera = () => {
  currentVideoIndex += 1;
  let deviceId = videoInputs[currentVideoIndex % videoInputs.length].deviceId;
  previewPublisher.setVideoSource(deviceId);
};

Bevor Sie dem Raum beitreten, können Sie den Vorschauverlag zerstören (ihn von der Seite entfernen) der Seite entfernen):

previewPublisher.destroy();

Aktivieren und Deaktivieren von veröffentlichten Videos

Zugriff auf Audio/Video des Kameraherausgebers

// Check whether a camera publisher video is enabled or not:
room.camera.isVideoEnabled();

// Check whether a camera publisher audio is enabled or not:
room.camera.isAudioEnabled();

// Enable the camera publisher's video:
room.camera.enableVideo();

// Disable the camera publisher's video:
room.camera.disableVideo();

// Enable the camera publisher's audio:
room.camera.enableAudio();

// Disable the camera publisher's audio:
room.camera.disableAudio();

Aktivieren und Deaktivieren von Audio und Video eines Kamerateilnehmers

Diese Methoden wirken sich nur auf die Audio- und Videodaten des Teilnehmers des lokalen Clients aus.

// Check whether a camera subscriber's video is enabled or not:
participant.camera.isVideoEnabled();

// Check whether a camera subscriber's audio is enabled or not:
participant.camera.isAudioEnabled();

// Enable a camera subscriber's video:
participant.camera.enableVideo();

// Disable a camera subscriber's video:
participant.camera.disableVideo();

// Enable a camera subscriber's audio:
participant.camera.enableAudio();

// Disable a camera subscriber's audio:
participant.camera.disableAudio();

Einstellen von Videofiltern

Sie können die Filter "Hintergrundunschärfe" und "Hintergrund ersetzen" auf einen CameraPublisher Video Stream mit dem CameraPublisher.setVideoFilter() Methode. Sie können die Filter mit der Methode CameraPublisher.clearVideoFilter() Methode.

// Applying a background blur filter
room.camera.setVideoFilter({
  type: 'backgroundBlur',
  blurStrength: 'high'
});

// Removing the filter
room.camera.clearVideoFilter();

Bilder einstellen, wenn ein Video deaktiviert ist

Sie können das Hintergrundbild eines Videos mit der Option setDisabledImageURI Methode verfügbar für die CameraSubscriber, CameraPublisher, ScreenSubscriber, ScreenPublisherund PreviewPublisher Klassen. Dieses Bild wird angezeigt, wenn das Video stummgeschaltet ist.

const disabledImageURI = 'https://path-to.file/dog-dance.jpg';
room.camera.setDisabledImageURI(disabledImageURI);

Aktive Lautsprechererkennung

Der Video Express Layout-Manager ordnet Videoelemente automatisch im HTML-DOM an und passt das Layout auf mobilen Bildschirmen an. Der Layout-Manager hebt automatisch aktive Sprecher in einem Raum. Das Layout passt sich automatisch an, um den aktiven Sprecher größer zu machen. Der Layout-Manager vergrößert automatisch ein Video zur Bildschirmfreigabe, wenn ein solches vorhanden ist. Der Layout Manager zeigt automatisch den aktiven Lautsprecher an, wenn dieser ausgeblendet ist.

Um die Markierung des aktiven Lautsprechers zu aktivieren, setzen Sie den managedLayoutOptions.speakerHighlightEnabled Option des Raum()-Konstruktor zu true. Um die Farbe der Hervorhebung anzupassen, stellen Sie den managedLayoutOptions.speakerHighlightColor Option des Room() Konstrukteur.

Das Room-Objekt sendet eine activeSpeakerChanged Ereignis, wenn ein neuer aktiver Sprecher im Raum gibt. Wenn dieses Ereignis ausgelöst wird, können Sie UI-Effekte hinzufügen, die darauf basieren, welcher Teilnehmer aktiv spricht.

room.on('activeSpeakerChanged', (participant) => {
  console.log('Active speaker: ', participant.name);
});

Das Ereignis sendet ein Teilnehmerobjekt, das den aktiven Sprecher identifiziert.

Bildschirmfreigabe

Um die Bildschirmfreigabe zu starten, rufen Sie die Room.startScreensharing() Methode:

room.startScreensharing('screenContainer')
  .then(() => console.log('Started screen sharing'))
  .catch((err) => console.err(err));

Die Methode hat einen optionalen Parameter: das Ziel-HTML-Element, das den Container des Videos zur Bildschirmfreigabe sein soll. Dies kann ein HTMLElement oder ein String sein (die id von des HTML-Elements). Wenn kein Parameter übergeben wird, ist der Container der screenPublisherContainer Eigenschaft der managedLayoutOptions Parameter übergeben in die Raum()-Konstruktoroder zum roomContainer Eigenschaft übergeben in die Room() constructor. Wenn keine dieser Angaben gemacht wird, wird das Video des Screen-Sharing Publisher-Video als untergeordnetes Element des body Element der HTML-Seite.

Der Benutzer wird aufgefordert, den Zugriff auf den Bildschirm zu gewähren. Wenn der Benutzer den Zugriff auf den Bildschirm gewährt, wird das Versprechen, das das Programm Room.startScreensharing() Methode wird aufgelöst, wenn die Bildschirmfreigabe beginnt. Andernfalls wird das Versprechen zurückgewiesen.

Um die Bildschirmfreigabe zu beenden, rufen Sie die Room.stopScreenSharing() Methode:

room.stopScreenSharing();

Wenn der Screen-Sharing-Publisher startet, wird ein entsprechender Screen-Sharing-Abonnent automatisch zum Layout-Manager auf der Seite jedes anderen Teilnehmers hinzugefügt.

Zugriff auf die Audio-/Videodaten des Herausgebers der Bildschirmfreigabe

Der folgende Code prüft, ob das Video des Herausgebers zur Bildschirmfreigabe aktiviert ist oder nicht:

room.screen.isVideoEnabled();

Der folgende Code prüft, ob die Audiofunktion des Herausgebers für die Bildschirmfreigabe aktiviert ist oder nicht:

room.screen.isAudioEnabled();

So aktivieren Sie das Video des Herausgebers für die Bildschirmfreigabe:

room.screen.enableVideo();

So deaktivieren Sie das Video des Herausgebers der Bildschirmfreigabe:

room.screen.disableVideo();

So aktivieren Sie den Ton des Herausgebers der Bildschirmfreigabe:

room.screen.enableAudio();

So deaktivieren Sie den Ton des Herausgebers der Bildschirmfreigabe:

room.screen.disableAudio()

Erkennen, wenn andere Clients Streams zur Bildschirmfreigabe veröffentlichen

Wenn andere Benutzer Streams zur Bildschirmfreigabe veröffentlichen, fügt der Video Express-Layoutmanager automatisch das Video zur HTML-Seite hinzu.

Ein Participant-Objekt sendet eine screenCreated Ereignis, wenn der Teilnehmer (nicht der lokale Benutzer) einen Screen-Sharing-Stream veröffentlicht:

participant.on('screenCreated', (screenSubscriber) => {
  console.log('new screen-sharing stream for ', participant.name);
});

Das Ereignis sendet eine BildschirmTeilnehmer Objekt. Das ScreenSubscriber-Objekt enthält Methoden zum Aktivieren und Deaktivieren der Audio- und und Videowiedergabe für den Screen-Sharing-Stream auf dem lokalen Client (siehe Aktivieren und Deaktivieren der Audio- und Videofunktionen eines Teilnehmers für die Bildschirmfreigabe).

Ein Participant-Objekt sendet eine screenDestroyed Ereignis, wenn ein Teilnehmer (nicht der lokale Benutzer) die Veröffentlichung eines Kamerastreams beendet:

participant.on('screenDestroyed', () => {
  console.log('screen-sharing stream destroyed for ', participant.name);
});

Aktivieren und Deaktivieren der Audio- und Videofunktionen eines Teilnehmers für die Bildschirmfreigabe

// Check whether a screen-sharing subscriber video is enabled or not:
participant.screen.isVideoEnabled();

// Check whether a screen-sharing subscriber audio is enabled or not:
participant.screen.isAudioEnabled();

// Enable a screen-sharing subscriber's video:
participant.screen.enableVideo();

// Disable a screen-sharing subscriber's video:
participant.screen.disableVideo();

// Enable a screen-sharing subscriber's audio:
participant.screen.enableAudio();

// Disable a screen-sharing subscriber's audio:
participant.screen.disableAudio();

Veranstaltungen

Video-Express-Ereignisse verwenden die Ereignisauslöser Muster.

Sie fügen Ereignis-Listener für ein Objekt hinzu, indem Sie dessen on() Methode. Ein Beispiel, der folgende Code fügt einen Listener für die Methode connected Ereignisabwicklung durch das Room Objekt:

room.on('connected', () => {
  console.log('Connected');
});

Die on() Methode nimmt zwei Parameter entgegen: den Namen des Ereignisses (eine Zeichenkette) und eine Callback-Funktion, die aufgerufen wird, wenn das Ereignis ausgelöst wird.

Bei einigen Ereignissen werden Argumente an die Callback-Funktion übergeben. Das Ereignis wird soll ausstrahlen. diese Objekte. Zum Beispiel, der Raum disconnected Ereignis sendet eine reason String:

room.on('disconnected', (reason) => {
  console.log('Disconnected:', reason);
});

Das Zimmer participantLeft Ereignis zwei Objekte aus - ein Teilnehmerobjekt und ein reason String:

room.on('connected', (participant, reason) => {
  console.log('participant left: ', participant.name);
  console.log('reason: ', reason);
});

Erweiterte Funktionen

Ende-zu-Ende-Verschlüsselung

Um die Ende-zu-Ende-Verschlüsselung zu verwenden, instanziieren Sie die Room Objekt mit einem Verschlüsselungsgeheimnis:

const room = new VideoExpress.Room({
  apiKey: 'b28bcf05-b8bf-4c78-9f92-0b7435aa52ee',
  sessionId: '1_this1is2my3new4session5id6',
  token: 'eyJhbGciOiJIU[...]',
  encryptionSecret: 'this-is-a-secret',
});

Nachdem ein Raum mit einem Verschlüsselungsgeheimnis erstellt wurde, kann er aktualisiert werden, um ein neues Geheimnis zu verwenden, indem die Funktion Room.setEncryptionSecret(encryptionSecret) Methode:

room.setEncryptionSecret('this-is-a-secret');

Anmerkung: Die End-To-End-Verschlüsselung muss zunächst über die Server-SDKs aktiviert werden. Siehe die Video Express Entwicklerhandbuch.

Signalisierung

Sobald Sie einem Raum beigetreten sind, können Sie die Funktion Room.signal() Methode zum Senden ein Signal an einen oder mehrere Teilnehmer im Raum zu senden.

Der folgende Code sendet ein Signal an alle Teilnehmer im Raum:

room.signal({
  data: 'hello.'
});

Der folgende Code sendet ein Signal an einen bestimmten Teilnehmer im Raum:

room.signal({
  to: participant, // this is a Participant object
  data: `hello ${participant.name}.`
});

Sie können eine optionale type Eigenschaft des Signals options zur Identifizierung des Signals:

room.signal({
  type: 'greeting',
  data: `hello.`
});

Wenn ein Signal empfangen wird, sendet das Room-Objekt eine signal Ereignis, das ein SignalEvent-Objekt ausgibt, das das Signal definiert:

room.on('signal', (signalEvent) => {
  console.log(`Signal received from ${signalEvent.from}. Data: ${signalEvent.data}.`);
});

Wenn ein Signal, das eine type empfangen wird, sendet das Room-Objekt eine signal:type Ereignis, das ein SignalEvent-Objekt ausgibt, das das Signal definiert:

room.on('signal:greeting', (signalEvent) => {
  console.log(`Signal received from ${signalEvent.from}. Data: ${signalEvent.data}.`);
});

Weitere Informationen finden Sie in der Zimmer.signal() und die Signal und Signal: Ereignisse in der Video Express Referenzdokumentation. Siehe auch die Überblick über die Signalisierung.

Einstellen einer Proxy-URL

Mit der IP-Proxy-Funktion leiten die Clients den gesamten Internetverkehr (mit Ausnahme von Medienstreams) über Ihren Proxyserver. Der Nicht-Medienverkehr umfasst die Kommunikation mit den Video API-Servern und Protokollierungsinfrastruktur.

Die IP-Proxy-Funktion ist verfügbar als Add-on-Feature.

Der folgende Code setzt die URL des IP-Proxy-Servers. Rufen Sie ihn auf, bevor Sie die Room() Konstrukteur:

VideoExpress.setProxyUrl('https://123.123.123.123:8080');

Weitere Informationen finden Sie in der IP-Proxy-Entwicklerhandbuch.

Verwendung benutzerdefinierter TURN-Server

Die konfigurierbare TURN-Server-Funktion ist verfügbar als Add-on-Feature. So konfigurieren Sie die vom Video Express-Client verwendeten TURN-Server, setzen Sie die Optionen des iceConfig Eigenschaft der options Parameter des Raum()-Konstruktor.

Weitere Informationen finden Sie in der konfigurierbarer TURN-Server Entwicklerleitfaden.

Verwendung von Verbindungsdaten

Wenn Sie den Beitritt zu einem Video-Express-Raum aufrufen, geben Sie ein Verbindungs-Token ein. Ein Token kann einen optionalen Verbindungsdatenstring haben, der Metadaten enthält. Sie können auf diese Daten zugreifen mit dem Room.participantConnectionData und Participant.connectionData Eigenschaften.

Server-seitiger Code (Node.js)

Dieses Beispiel zeigt, wie man Verbindungsdaten hinzufügt, wenn man ein Token mit dem OpenTok Node SDK:

// Generating token from your server
const token = opentok.generateToken(sessionId, {
  role: 'moderator',
  data: '{"disabledImageURI":"https://path-to.file/jason.jpg"}',
});

Client-seitiger Code (Video Express)

// Setting a participant's disabledImageURI with data from token
participant.on('cameraCreated', (cameraSubscriber) => {
  // connectionData is a JSON string from some your server
  const { connectionData } = participant;
  const { disabledImageURI } = JSON.parse(connectionData);
  cameraSubscriber.setDisabledImageURI(disabledImageURI);
});

Weitere Informationen finden Sie unter Token-Erstellung Übersicht.

Verwendung von Video Express in der Unternehmensumgebung

Vonage Video Express bietet derzeit nur eine Standardumgebung. Sie können jedoch Enterprise-Projekte mit Video Express verwenden. Dadurch wird sichergestellt, dass Video Express die Infrastruktur von Vonage nutzt. Signalisierungs- und Medienserver, die für Partnerapplikationen mit der Enterprise-Umgebung bestimmt sind. Dies bietet eine größere Stabilität bei Änderungen und eine höhere Widerstandsfähigkeit gegenüber Lastspitzen der Plattform.

Verwendung von Video Express in mobilen Anwendungen

Siehe die Vonage Video Express iOS und Android Demo App auf GitHub. Diese App verwendet Video Express in Webansichten (wie WKWebView in iOS und WebView in Android) für mobile Anwendungen.

Bekannte Probleme und Einschränkungen

Vonage Video Express arbeitet mit OpenTok.js, der Vonage Video API für JavaScript. Alle Clients, die sich mit einem Vonage Video Express-Raum verbinden, sollten Vonage Video Express verwenden. Die Verwendung anderer Vonage Video API Client SDKs (einschließlich Webclients, die direkt mit OpenTok.js APIs) kann einige Funktionen von Vonage Video Express deaktivieren.

Es gibt einige Einschränkungen der OpenTok.js und Video API Plattformfunktionen, die Vonage Video Express nicht unterstützt:

Video Express unterstützt nicht große interaktive Sendungen da Video Express derzeit verlangt, dass jeder Client, der einem Raum beitritt, einen Kamerastream veröffentlicht.
Der Verbindungsaufbau mit Video Express kann etwas länger dauern, wenn Sie die
Erlaubte IP-Liste Funktion. Video Express konzentriert sich auf die Vereinfachung der Entwicklererfahrung. Aus diesem Grund, Video Express versucht daher, die Konfigurationsdateien über ein CDN herunterzuladen (das möglicherweise von Ihrer Firewall blockiert wird) bevor es die Adressen auf der Liste der zulässigen IPs verwendet. Sie können nicht Sie können nicht festlegen, dass ein Client nur die zulässigen IP-Adressen verwenden soll (wie Sie es mit der Option ipWhitelist Option in OpenTok.js OT.initSession() Methode). Ein Video Express-Client braucht möglicherweise etwas länger als ein Client, der OpenTok.js verwendet und mit der Methode ipWhitelist Option eingestellt auf true bei Verwendung von Erlaubte IP-Liste mit Firewalls, die Content Delivery Networks blockieren.

Teilnehmer in Video Express entsprechen Verbindungen. Die Kamera und Bildschirmfreigabe-Streams in Video Express entsprechen Ströme. Daten und Ereignisse für Verbindungen und Streams erscheinen in Entwickler-Tools wie z. B. Inspector, Insights und andere. Video Express bietet Verbindungs-IDs, durch Participant.id, Room.participantIdund die Schlüssel von Room.participants, die verwendet werden können, um bestimmte Benutzer für Verbindungs- und Stream-Ereignisse und -Daten zu identifizieren. Einige Funktionen, die Verbindungs- und Stream-IDs erfordern, werden von Video Express nicht unterstützt. Dazu gehören:

Die meisten Moderationsfunktionen. Sie können jedoch mit der REST-API Methode können Sie jedoch alle Streams in einem Video Express-Raum dazu zwingen, den Ton stumm zu schalten (Sie können jedoch keine eine Liste mit auszuschließenden Stream-IDs enthalten.) Weitere Video Express-Moderationsfunktionen sind in Kürze verfügbar.
Auswahl der zu berücksichtigenden Ströme ein Archiv oder Live-Streaming-Übertragung.
Ändern der Layoutklasse für ein Archiv oder Live-Streaming-Übertragung die ein benutzerdefiniertes Layout verwendet.

Vonage Video Express bietet keinen Zugriff auf die zugrunde liegende OpenTok.js Herausgeber und Abonnent Objekte. Sie können also nicht die getStats() und getRtcStatsReport() Methoden dieser Objekte. Video Express optimiert automatisch die Bildrate und Auflösung aller Videoströme, so dass es nicht notwendig ist, die die setPreferredFrameRate() und setPreferredResolution() Methoden für einen Abonnenten oder Verleger.

Einzelheiten zu bekannten und behobenen Problemen finden Sie in der Vonage Video Express Versionshinweise.

Navigation