

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

# Integrasikan in-app, web, panggilan video, dan berbagi layar secara native ke dalam aplikasi Anda
<a name="config-com-widget2"></a>

Untuk mengintegrasikan Amazon Connect dalam aplikasi, web, panggilan video, dan berbagi layar dengan aplikasi Anda:

1. Gunakan Amazon Connect [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API untuk membuat kontak.

1. Kemudian gunakan detail yang ditampilkan oleh panggilan API untuk bergabung dengan panggilan menggunakan pustaka Amazon Chime klien untuk [iOS](https://github.com/aws/amazon-chime-sdk-ios), [Android](https://github.com/aws/amazon-chime-sdk-android), atau [JavaScript](https://github.com/aws/amazon-chime-sdk-js). 

Untuk informasi tentang membuat peserta tambahan, lihat[Aktifkan panggilan dalam aplikasi, web, dan video multi-pengguna](enable-multiuser-inapp.md). 

[Lihat repositori Github berikut untuk contoh aplikasi: -calling-examples. amazon-connect-in-app](https://github.com/amazon-connect/amazon-connect-in-app-calling-examples) 

**Topics**
+ [Bagaimana perangkat klien memulai panggilan dalam aplikasi atau web](#diagram-option2)
+ [Memulai](#diagram-option2-gs)
+ [Langkah opsional](#optional-steps)

## Bagaimana perangkat klien memulai panggilan dalam aplikasi atau web
<a name="diagram-option2"></a>

Diagram berikut menunjukkan urutan peristiwa untuk perangkat klien (aplikasi seluler atau browser) untuk memulai panggilan dalam aplikasi atau web.

![\[Diagram konseptual yang menunjukkan bagaimana perangkat klien memulai panggilan.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/netra-gs-diagram.png)


1. Pelanggan Anda menggunakan aplikasi klien (situs web atau aplikasi) untuk memulai panggilan dalam aplikasi atau web.

1. Aplikasi klien (situs web atau aplikasi seluler) atau server web menggunakan Amazon Connect [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API untuk memulai kontak yang meneruskan atribut atau konteks apa pun ke Amazon Connect.

1. Aplikasi klien bergabung dengan panggilan menggunakan detail yang dikembalikan dari [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)dalam langkah 2.

1. (Opsional) Klien menggunakan [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)API untuk menerima `ConnectionToken` yang digunakan untuk mengirim DTMF melalui API. [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)

1. Kontak mencapai aliran dan dirutekan berdasarkan aliran dan ditempatkan dalam antrian.

1. Agen menerima kontak.

1. (Opsional) Jika video diaktifkan untuk pelanggan dan agen, mereka dapat memulai video mereka.

1. (Opsional - tidak ditampilkan dalam diagram) Peserta tambahan dapat ditambahkan menggunakan [CreateParticipant](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipant.html)dan [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html) APIs. 

## Memulai
<a name="diagram-option2-gs"></a>

Berikut ini adalah langkah-langkah tingkat tinggi untuk memulai:

1. Gunakan [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API untuk membuat kontak. API mengembalikan detail yang diperlukan untuk klien Amazon Chime SDK untuk bergabung dengan panggilan.

1. Buat instance objek `MeetingSessionConfiguration` klien Amazon Chime SDK menggunakan konfigurasi yang dikembalikan oleh. [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)

1. Instantiate `DefaultMeetingSession` klien Amazon Chime SDK `MeetingSessionConfiguration` dengan, yang dibuat pada langkah 2 untuk membuat sesi rapat klien. 
   + iOS

     ```
     let logger = ConsoleLogger(name: "logger") 
     let meetingSession = DefaultMeetingSession(
         configuration: meetingSessionConfig, 
         logger: logger
     )
     ```
   + Android

     ```
     val logger = ConsoleLogger()
     val meetingSession = DefaultMeetingSession(
         configuration = meetingSessionConfig,
         logger = logger,
         context = applicationContext
     )
     ```
   + JavaScript

     ```
     const logger = new ConsoleLogger('MeetingLogs', LogLevel.INFO);
     const deviceController = new DefaultDeviceController(logger);
     const configuration = new MeetingSessionConfiguration(
         meetingResponse, 
         attendeeResponse
     );
     const meetingSession = new DefaultMeetingSession(
         configuration, 
         logger, 
         deviceController
     );
     ```

1. Gunakan `meetingSession.audioVideo.start()` metode ini untuk bergabung dengan kontak WebRTC dengan audio.
   + iOS/Android

     ```
     meetingSession.audioVideo.start()
     ```
   + JavaScript

     ```
     await meetingSession.audioVideo.start();
     ```

1. Gunakan `meetingSession.audioVideo.stop()` metode untuk menggantung kontak WebRTC.
   + iOS/Android

     ```
     meetingSession.audioVideo.stop()
     ```
   + JavaScript

     ```
     meetingSession.audioVideo.stop();
     ```

## Langkah opsional
<a name="optional-steps"></a>

Untuk operasi tambahan dan dokumentasi API yang komprehensif, lihat panduan ikhtisar API khusus platform:
+ **iOS: Ikhtisar** [API](https://aws.github.io/amazon-chime-sdk-ios/guides/api_overview.html)
+ **Android**: [Ikhtisar API](https://aws.github.io/amazon-chime-sdk-android/guides/api_overview.html)
+ **JavaScript**: [Ikhtisar API](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/03_API_Overview.md)

### Kirim nada DTMF
<a name="send-dtmf-tones"></a>

Untuk mengirim DTMF ke panggilan, diperlukan dua Layanan Peserta Amazon Connect: APIs [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)dan masing-masing. [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)

**catatan**  
`contentType`untuk SendMessage API harus`audio/dtmf`.

1. Memohon [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)untuk mengambil`ConnectionToken`. (`ParticipantToken`diperlukan untuk memanggil API ini. Anda dapat menemukannya di [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)jawabannya.)

1. Dengan`ConnectionToken`, panggil [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)untuk mengirim digit DTMF.

### Pilih perangkat audio
<a name="select-audio-devices"></a>

Untuk memilih input/output perangkat audio, Anda dapat menggunakan metode dari klien Amazon Chime SDK untuk Android dan iOS atau kemampuan iOS asli [untuk iOS](https://developer.apple.com/documentation/avkit/avroutepickerview).

**iOS/Android**

```
meetingSession.audioVideo.listAudioDevices()
meetingSession.audioVideo.chooseAudioDevice(mediaDevice)
```

**JavaScript**

```
await meetingSession.audioVideo.listAudioInputDevices();
await meetingSession.audioVideo.listAudioOutputDevices();
await meetingSession.audioVideo.startAudioInput(device);
await meetingSession.audioVideo.chooseAudioOutput(deviceId);
```

### Bisukan dan nyahbisukan audio
<a name="mute-unmute-audio"></a>

Untuk bisu dan unmute, gunakan dan. `meetingSession.audioVideo.realtimeLocalMute()` `meetingSession.audioVideo.realtimeLocalUnmute()`

**iOS/Android**

```
meetingSession.audioVideo.realtimeLocalMute()
meetingSession.audioVideo.realtimeLocalUnmute()
```

**JavaScript**

```
meetingSession.audioVideo.realtimeMuteLocalAudio();
meetingSession.audioVideo.realtimeUnmuteLocalAudio();
```

### Mulai video diri
<a name="start-self-video"></a>

Untuk memulai video sendiri, gunakan`meetingSession.audioVideo.startLocalVideo()`. Lihat panduan API pustaka klien untuk informasi selengkapnya tentang cara menghitung dan memilih perangkat tertentu.

**iOS/Android**

```
meetingSession.audioVideo.startLocalVideo()
```

**JavaScript**

```
meetingSession.audioVideo.startLocalVideoTile();
```

### Hentikan video diri
<a name="stop-self-video"></a>

Untuk menghentikan video diri, gunakan`meetingSession.audioVideo.stopLocalVideo()`.

**iOS/Android**

```
meetingSession.audioVideo.stopLocalVideo()
```

**JavaScript**

```
meetingSession.audioVideo.stopLocalVideoTile();
```

### Aktifkan video agen
<a name="enable-agent-video"></a>

Untuk memungkinkan menerima dan memuat video agen di dalam aplikasi, gunakan file`meetingSession.audioVideo.startRemoteVideo()`. Anda juga perlu menerapkan pengamat ubin video dan mengikat ubin video untuk menampilkan tampilan.

**iOS/Android**

```
meetingSession.audioVideo.startRemoteVideo()
// Implement VideoTileObserver to handle video tiles
meetingSession.audioVideo.addVideoTileObserver(observer)
// In videoTileDidAdd callback:
meetingSession.audioVideo.bindVideoView(videoView, tileId: tileState.tileId)
```

**JavaScript**

```
// Remote video is received automatically when available
// Implement AudioVideoObserver to handle video tiles
meetingSession.audioVideo.addObserver(observer);
// In videoTileDidUpdate callback:
meetingSession.audioVideo.bindVideoElement(tileId, videoElement);
```

Referensikan panduan SDK khusus platform untuk detail implementasi ubin video yang lengkap.

### Nonaktifkan video agen
<a name="disable-agent-video"></a>

Untuk melarang menerima dan memuat video agen di dalam aplikasi, gunakan file. `meetingSession.audioVideo.stopRemoteVideo()`

**iOS/Android**

```
meetingSession.audioVideo.stopRemoteVideo()
meetingSession.audioVideo.unbindVideoView(tileId)
```

**JavaScript**

```
meetingSession.audioVideo.unbindVideoElement(tileId);
```

### Gunakan pesan data
<a name="use-data-messages"></a>

Anda dapat menggunakan [pesan data](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/03_API_Overview.md#9-send-and-receive-data-messages-optional) jika Anda perlu mengirim status apa pun dari sisi agen ke pengguna akhir. Misalnya, ketika pelanggan ditahan, Anda dapat mengirim pesan data ke aplikasi pelanggan untuk menampilkan pesan yang memberi tahu mereka bahwa mereka ditahan dan video/screen berbagi mereka masih dikirim, atau Anda dapat mematikan video/screen pembagian.

**iOS/Android**

```
meetingSession.audioVideo.realtimeSendDataMessage(topic, data, lifetimeMs)
meetingSession.audioVideo.addRealtimeDataMessageObserver(topic, observer)
```

**JavaScript**

```
meetingSession.audioVideo.realtimeSendDataMessage(topic, data, lifetimeMs);
meetingSession.audioVideo.realtimeSubscribeToReceiveDataMessage(topic, callback);
```

### Dengarkan acara berhenti
<a name="listen-for-stop-events"></a>

Anda dapat mendengarkan acara ketika partisipasi Kontak berakhir melalui `audioVideoDidStop` pengamat. Kode status tertentu dapat bervariasi menurut platform.

#### Panggilan mencapai kapasitas
<a name="call-reaches-capacity"></a>

Ketika lebih dari 6 orang mencoba untuk bergabung dengan panggilan, peserta tambahan akan menerima kesalahan berikut dan tidak dapat bergabung sampai orang lain pergi.
+ **iOS:** `MeetingSessionStatusCode.audioCallAtCapacity` atau `MeetingSessionStatusCode.audioAuthenticationRejected`
+ **Android:** `MeetingSessionStatusCode.AudioCallAtCapacity` atau `MeetingSessionStatusCode.AudioAuthenticationRejected`
+ **JavaScript:** `MeetingSessionStatusCode.AudioCallAtCapacity` atau `MeetingSessionStatusCode.AudioAuthenticationRejected`

#### Peserta dihapus dari panggilan
<a name="participant-removed-from-call"></a>

Ketika peserta dihapus dari panggilan oleh agen tetapi kontak berlanjut untuk peserta lain, mereka akan menerima kode status berikut. Perhatikan bahwa jika penghapusan peserta mengarah ke akhir kontak, mereka akan menerima salah satu dari status ini atau status akhir kontak.
+ **iOS:** `MeetingSessionStatusCode.audioServerHungup` atau `MeetingSessionStatusCode.audioAuthenticationRejected`
+ **Android:** `MeetingSessionStatusCode.AudioServerHungup` atau `MeetingSessionStatusCode.AudioAuthenticationRejected`
+ **JavaScript:** `MeetingSessionStatusCode.AudioAttendeeRemoved` atau `MeetingSessionStatusCode.AudioAuthenticationRejected`

#### Kontak berakhir
<a name="contact-ends"></a>

Ketika kontak yang sebenarnya berakhir sepenuhnya untuk semua peserta, mereka akan menerima kode status berikut.
+ **iOS:** `MeetingSessionStatusCode.audioCallEnded`
+ **Android:** `MeetingSessionStatusCode.AudioCallEnded`
+ **JavaScript:** `MeetingSessionStatusCode.AudioCallEnded`