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

Memulai dengan Siaran IVS Web SDK | Streaming Waktu Nyata

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

Impor

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

Menggunakan Tag Script

Menggunakan impor skrip yang sama, kelas dan enum yang didefinisikan dalam contoh di bawah ini dapat ditemukan pada objek global: IVSBroadcastClient

const { Stage, SubscribeType } = IVSBroadcastClient;

Menggunakan npm

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

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

Dukungan Rendering Sisi Server

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

Permintaan Izin

Aplikasi Anda harus meminta izin untuk mengakses kamera dan mikrofon pengguna, dan itu harus disajikan menggunakanHTTPS. (Ini tidak spesifik untuk AmazonIVS; 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 danMediaDevices. getUserMedia().

Daftar Perangkat yang Tersedia

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

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 ini untuk mengambil aliran dari kamera.

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

Anda juga dapat menentukan resolusi kamera yang ideal menggunakan width dan height kendala. (Baca lebih lanjut tentang kendala ini di sini.) SDKSecara otomatis menerapkan batasan lebar dan tinggi yang sesuai dengan resolusi siaran maksimum Anda; Namun, ada baiknya 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) saat 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 },
});