Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Memulai dengan IVS Web Broadcast SDK | Streaming Real-Time

Dokumen ini membawa Anda melalui langkah-langkah yang terlibat dalam memulai dengan SDK siaran Web streaming real-time IVS.

Impor

Blok bangunan untuk real-time terletak di namespace yang berbeda dari modul penyiaran root.

Menggunakan Tag Script

SDK siaran Web didistribusikan sebagai JavaScript perpustakaan dan dapat diambil di https://web-broadcast.live-video.net/1.38.0/amazon-ivs-web-broadcast.js.

Kelas dan enum yang didefinisikan dalam contoh di bawah ini dapat ditemukan pada objek global: IVSBroadcastClient

const { Stage, SubscribeType } = IVSBroadcastClient;

Menggunakan npm

Untuk menginstal npm paket:

npm install amazon-ivs-web-broadcast

Kelas, enum, dan tipe juga dapat diimpor dari modul paket:

import { Stage, SubscribeType, LocalStageStream } from 'amazon-ivs-web-broadcast'

Server-Side Dukungan Rendering

Pustaka Web Broadcast SDK Stages tidak dapat dimuat dalam konteks sisi server, karena mereferensikan primitif browser yang diperlukan untuk fungsi perpustakaan saat dimuat. Untuk mengatasi hal ini, muat pustaka secara dinamis, seperti yang ditunjukkan dalam Demo Siaran Web menggunakan Next dan React.

Minta Izin

Aplikasi Anda harus meminta izin untuk mengakses kamera dan mikrofon pengguna, dan harus disajikan menggunakan HTTPS. (Ini tidak khusus untuk Amazon IVS; diperlukan untuk situs web apa pun yang membutuhkan akses ke kamera dan mikrofon.)

Berikut adalah contoh fungsi yang menunjukkan bagaimana Anda dapat meminta dan menangkap izin untuk perangkat audio dan video:

async function handlePermissions() {
   let permissions = {
       audio: false,
       video: false,
   };
   try {
       const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
       for (const track of stream.getTracks()) {
           track.stop();
       }
       permissions = { video: true, audio: true };
   } catch (err) {
       permissions = { video: false, audio: false };
       console.error(err.message);
   }
   // If we still don't have permissions after requesting them display the error message
   if (!permissions.video) {
       console.error('Failed to get video permissions.');
   } else if (!permissions.audio) {
       console.error('Failed to get audio permissions.');
   }
}

Untuk informasi tambahan, lihat Izin API dan MediaDevices.getUserMedia ().

Daftar Perangkat yang Tersedia

Untuk melihat perangkat apa yang tersedia untuk diambil, kueri metode browser MediaDevices.enumerateDevices ():

const devices = await navigator.mediaDevices.enumerateDevices();
window.videoDevices = devices.filter((d) => d.kind === 'videoinput');
window.audioDevices = devices.filter((d) => d.kind === 'audioinput');

Mengambil MediaStream dari Perangkat

Setelah memperoleh daftar perangkat yang tersedia, Anda dapat mengambil aliran dari sejumlah perangkat. Misalnya, Anda dapat menggunakan getUserMedia() metode untuk mengambil aliran dari kamera.

Jika Anda ingin menentukan perangkat mana yang akan diambil streaming, Anda dapat secara eksplisit mengatur deviceId di video bagian audio atau batasan media. Sebagai alternatif, Anda dapat menghilangkan deviceId dan meminta pengguna memilih perangkat mereka dari prompt browser.

Anda juga dapat menentukan resolusi kamera yang ideal menggunakan height batasan width dan. (Baca lebih lanjut tentang kendala ini di sini.) SDK secara otomatis menerapkan batasan lebar dan tinggi yang sesuai dengan resolusi siaran maksimum Anda; namun, sebaiknya Anda juga menerapkannya sendiri untuk memastikan bahwa rasio aspek sumber tidak berubah setelah Anda menambahkan sumber ke SDK.

Untuk streaming real-time, pastikan media dibatasi hingga resolusi 720p. Secara khusus, nilai Anda getUserMedia dan getDisplayMedia batasan untuk lebar dan tinggi tidak boleh melebihi 921600 (1280* 720) ketika dikalikan bersama.

const videoConfiguration = {
  maxWidth: 1280,
  maxHeight: 720,
  maxFramerate: 30,
}

window.cameraStream = await navigator.mediaDevices.getUserMedia({
   video: {
       deviceId: window.videoDevices[0].deviceId,
       width: {
           ideal: videoConfiguration.maxWidth,
       },
       height: {
           ideal:videoConfiguration.maxHeight,
       },
   },
});
window.microphoneStream = await navigator.mediaDevices.getUserMedia({
   audio: { deviceId: window.audioDevices[0].deviceId },
});