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

# Memulai dengan SDK Siaran Web IVS \| Streaming Low-Latency
<a name="broadcast-web-getting-started"></a>

Dokumen ini membawa Anda melalui langkah-langkah yang terlibat dalam memulai dengan SDK siaran Web streaming latensi rendah Amazon IVS.

## Instal Perpustakaan
<a name="broadcast-web-install"></a>

Perhatikan bahwa IVSBroadcastClient memanfaatkan [reflekt-metadata](https://www.npmjs.com/package/reflect-metadata), yang memperluas objek Reflect global. Meskipun ini seharusnya tidak menimbulkan konflik, mungkin ada kasus langka di mana hal ini dapat menyebabkan perilaku yang tidak diinginkan.

### Menggunakan Tag Script
<a name="broadcast-web-how-to-install-script"></a>

Web broadcast SDK didistribusikan sebagai JavaScript perpustakaan dan dapat diambil di. [https://web-broadcast.live-video.net/1.35.0/amazon-ivs-web-broadcast.js](https://web-broadcast.live-video.net/1.35.0/amazon-ivs-web-broadcast.js)

Saat dimuat melalui `<script>` tag, pustaka mengekspos variabel global dalam lingkup jendela bernama`IVSBroadcastClient`.

### Menggunakan npm
<a name="broadcast-web-how-to-install-npm"></a>

Untuk menginstal `npm` paket:

```
npm install amazon-ivs-web-broadcast
```

Anda sekarang dapat mengakses `IVSBroadcastClient` objek dan menarik modul dan consts lain seperti`Errors`,`BASIC_LANDSCAPE`:

```
import IVSBroadcastClient, {
   Errors,
   BASIC_LANDSCAPE
} from 'amazon-ivs-web-broadcast';
```

## Sampel
<a name="broadcast-web-samples"></a>

Untuk memulai dengan cepat, lihat contoh di bawah ini:
+ [Siaran tunggal ke saluran IVS (HTML dan JavaScript)](https://codepen.io/amazon-ivs/pen/poLRoPp)
+ [Siaran tunggal dengan berbagi layar ke saluran IVS](https://stream.ivs.rocks/) ([React Source Code](https://github.com/aws-samples/amazon-ivs-broadcast-web-demo))

## Buat sebuah Instance dari AmazonIVSBroadcastClient
<a name="broadcast-web-instance"></a>

Untuk menggunakan perpustakaan, Anda harus membuat instance klien. Anda dapat melakukannya dengan memanggil `create` metode `IVSBroadcastClient` dengan `streamConfig` parameter (menentukan batasan siaran Anda seperti resolusi dan framerate). Anda dapat menentukan titik akhir konsumsi saat membuat klien atau Anda dapat menyetelnya saat memulai streaming.

Titik akhir konsumsi dapat ditemukan di AWS Console or returned by the CreateChannel operation (e.g., UNIQUE\_ID .global-contribute.live-video.net).

```
const client = IVSBroadcastClient.create({
   // Enter the desired stream configuration
   streamConfig: IVSBroadcastClient.BASIC_LANDSCAPE,
   // Enter the ingest endpoint from the AWS console or CreateChannel API
   ingestEndpoint: 'UNIQUE_ID.global-contribute.live-video.net',
});
```

Ini adalah konfigurasi aliran umum yang didukung. Preset `BASIC` hingga 480p dan 1,5 Mbps bitrate, BASIC Full HD hingga 1080p dan 3,5 Mbps bitrate, dan `STANDARD` (atau`ADVANCED`) hingga 1080p dan 8,5 Mbps bitrate. Anda dapat menyesuaikan bitrate, frame rate, dan resolusi jika diinginkan. Untuk informasi selengkapnya, lihat [BroadcastClientConfig](https://aws.github.io/amazon-ivs-web-broadcast/docs/sdk-reference/interfaces/BroadcastClientConfig).

```
IVSBroadcastClient.BASIC_LANDSCAPE;
IVSBroadcastClient.BASIC_FULL_HD_LANDSCAPE;
IVSBroadcastClient.STANDARD_LANDSCAPE;
IVSBroadcastClient.BASIC_PORTRAIT;
IVSBroadcastClient.BASIC_FULL_HD_PORTRAIT;
IVSBroadcastClient.STANDARD_PORTRAIT;
```

Anda dapat mengimpor ini satu per satu jika menggunakan `npm` paket.

Catatan: Pastikan konfigurasi sisi klien Anda sejajar dengan jenis saluran back-end. Misalnya, jika jenis saluran`STANDARD`, `streamConfig` harus diatur ke salah satu `IVSBroadcastClient.STANDARD_*` nilai. Jika jenis saluran`ADVANCED`, Anda harus mengatur konfigurasi secara manual seperti yang ditunjukkan di bawah ini (menggunakan `ADVANCED_HD` sebagai contoh):

```
const client = IVSBroadcastClient.create({
   // Enter the custom stream configuration
   streamConfig: {
      maxResolution: {
         width: 1080,
         height: 1920,
     },
     maxFramerate: 30,
     /**
      * maxBitrate is measured in kbps
      */
     maxBitrate: 3500,
   },
   // Other configuration . . .
});
```

## Permintaan Izin
<a name="broadcast-web-request-permissions"></a>

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 [API Izin](https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API) dan [MediaDevices.getUserMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia).

## Mengatur Pratinjau Stream
<a name="broadcast-web-request-set-up-stream"></a>

Untuk melihat pratinjau apa yang akan disiarkan, berikan SDK dengan `<canvas>` elemen.

```
// where #preview is an existing <canvas> DOM element on your page
const previewEl = document.getElementById('preview');
client.attachPreview(previewEl);
```

## Daftar Perangkat yang Tersedia
<a name="broadcast-web-request-list-devices"></a>

Untuk melihat perangkat apa yang tersedia untuk ditangkap, kueri metode browser [MediaDevices.enumerateDevices()](https://developer.mozilla.org/en-US/docs/Web/API/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
<a name="broadcast-web-retrieve-mediastream"></a>

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.)](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints#properties_of_video_tracks) 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.

```
const streamConfig = IVSBroadcastClient.BASIC_LANDSCAPE;
...
window.cameraStream = await navigator.mediaDevices.getUserMedia({
   video: {
       deviceId: window.videoDevices[0].deviceId,
       width: {
           ideal: streamConfig.maxResolution.width,
       },
       height: {
           ideal: streamConfig.maxResolution.height,
       },
   },
});
window.microphoneStream = await navigator.mediaDevices.getUserMedia({
   audio: { deviceId: window.audioDevices[0].deviceId },
});
```

## Menambahkan Perangkat ke Stream
<a name="broadcast-web-add-device"></a>

Setelah memperoleh streaming, Anda dapat menambahkan perangkat ke tata letak dengan menentukan nama unik (di bawah, ini`camera1`) dan posisi komposisi (untuk video). Misalnya, dengan menentukan perangkat webcam Anda, Anda menambahkan sumber video webcam Anda ke aliran siaran.

Saat menentukan perangkat input video, Anda harus menentukan indeks, yang mewakili “lapisan” yang ingin Anda siarkan. Ini identik dengan pengeditan gambar atau CSS, di mana z-index mewakili urutan lapisan untuk dirender. Secara opsional, Anda dapat memberikan posisi, yang mendefinisikan x/y koordinat (serta ukuran) dari sumber aliran.

Untuk detail tentang parameter, lihat [VideoComposition](https://aws.github.io/amazon-ivs-web-broadcast/docs/sdk-reference/interfaces/VideoComposition).

```
client.addVideoInputDevice(window.cameraStream, 'camera1', { index: 0 }); // only 'index' is required for the position parameter
client.addAudioInputDevice(window.microphoneStream, 'mic1');
```

## Mulai Siaran
<a name="broadcast-web-start-broadcast"></a>

Untuk memulai siaran, berikan kunci streaming untuk saluran Amazon IVS Anda:

```
client
   .startBroadcast(streamKey)
   .then((result) => {
       console.log('I am successfully broadcasting!');
   })
   .catch((error) => {
       console.error('Something drastically failed while broadcasting!', error);
   });
```

## Hentikan Siaran
<a name="broadcast-web-stop-broadcast"></a>

```
client.stopBroadcast();
```

## Tukar Posisi Video
<a name="broadcast-web-swap-video-positions"></a>

Klien mendukung pertukaran posisi komposisi perangkat video:

```
client.exchangeVideoDevicePositions('camera1', 'camera2');
```

## Bisukan Audio
<a name="broadcast-web-muting-audio"></a>

Untuk membisukan audio, hapus perangkat audio yang menggunakan `removeAudioInputDevice` atau mengatur `enabled` properti di trek audio:

```
let audioStream = client.getAudioInputDevice(AUDIO_DEVICE_NAME);
audioStream.getAudioTracks()[0].enabled = false;
```

Di `AUDIO_DEVICE_NAME` mana nama yang diberikan ke perangkat audio asli selama `addAudioInputDevice()` panggilan berlangsung.

Untuk membunyikan:

```
let audioStream = client.getAudioInputDevice(AUDIO_DEVICE_NAME);
audioStream.getAudioTracks()[0].enabled = true;
```

## Sembunyikan Video
<a name="broadcast-web-hiding-video"></a>

Untuk menyembunyikan video, hapus perangkat video menggunakan `removeVideoInputDevice` atau mengatur `enabled` properti di trek video:

```
let videoStream = client.getVideoInputDevice(VIDEO_DEVICE_NAME).source;
videoStream.getVideoTracks()[0].enabled = false;
```

Di `VIDEO_DEVICE_NAME` mana nama yang diberikan ke perangkat video selama `addVideoInputDevice()` panggilan asli.

Untuk menampilkan:

```
let videoStream = client.getVideoInputDevice(VIDEO_DEVICE_NAME).source;
videoStream.getVideoTracks()[0].enabled = true;
```