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

# Integrasikan panggilan video dan berbagi layar ke desktop agen kustom Anda dengan menggunakan Amazon Connect Streams JS
<a name="integrate-video-calling-for-agents"></a>

Topik ini untuk pengembang. Untuk desktop agen khusus, Anda perlu membuat perubahan untuk mendukung panggilan video dan berbagi layar. Berikut ini adalah langkah-langkah tingkat tinggi.

**catatan**  
Jika Anda menyematkan CCP langsung ke aplikasi agen kustom Anda, pastikan `allowFramedVideoCall` disetel ke true saat Anda memulai CCP menggunakan [Amazon](https://github.com/aws/amazon-connect-streams) Connect Streams JS.

1. Gunakan [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams) untuk memeriksa apakah kontak yang masuk adalah kontak WebRTC. Gunakan subtipe kontak`"connect:WebRTC"`, seperti yang ditunjukkan pada contoh kode berikut:

   `contact.getContactSubtype() === "connect:WebRTC"`

1. Anda dapat mengambil nama tampilan pelanggan dengan menggunakan bidang nama di` contact contact.getName()`.

## Tambahkan dukungan untuk video
<a name="support-video"></a>

Selesaikan langkah-langkah berikut untuk menambahkan dukungan untuk penanganan video saat pelanggan Anda mengaktifkannya.

1. Untuk memeriksa apakah kontak memiliki kemampuan video:

   ```
   // Return true if any connection has video send capability
   contact.hasVideoRTCCapabilities()
   
   // Return true if the agent connection has video send capability
   contact.canAgentSendVideo()
   
   // Return true if other non-agent connection has video send capability
   contact.canAgentReceiveVideo()
   ```

1. Untuk memeriksa apakah agen memiliki izin video untuk menangani panggilan video:

   `agent.getPermissions().includes('videoContact');`

1. Untuk menerima panggilan video, kontak harus memiliki kemampuan video dan agen harus memiliki izin video.

   ```
   function shouldRenderVideoUI() {
       return contact.getContactSubtype() === "connect:WebRTC" &&
       contact.hasVideoRTCCapabilities() &&
       agent.getPermissions().includes('videoContact');
   }
   ```

1. Untuk bergabung dengan sesi video, hubungi`getVideoConnectionInfo`:

   ```
   if (shouldRenderVideoUI()) {
      const response = await
      contact.getAgentConnection().getVideoConnectionInfo();
   }
   ```

1. Untuk membuat UI video dan bergabung dengan sesi rapat video, lihat:
   + [Amazon Chime SDK untuk aktif JavaScript](https://github.com/aws/amazon-chime-sdk-js) GitHub 
   + [Amazon Chime Pustaka Komponen SDK React](https://github.com/aws/amazon-chime-sdk-component-library-react) di GitHub

1. Untuk mempermudah, cuplikan kode berikut menggunakan contoh dari Amazon Chime SDK React Components Library.

   ```
   import { MeetingSessionConfiguration } from "amazon-chime-sdk-js";
   import {
     useMeetingStatus,
     useMeetingManager,
     MeetingStatus,
     DeviceLabels,
     useLocalAudioOutput
   } from 'amazon-chime-sdk-component-library-react';
   
   const App = () => (
     <MeetingProvider>
       <MyVideoManager />
     </MeetingProvider>
   );
   
   const MyVideoManager = () => {
       const meetingManager = useMeetingManager();
       if (shouldRenderVideoUI()) {
           const response = await contact.getAgentConnection().getVideoConnectionInfo();
           const configuration = new MeetingSessionConfiguration(
               response.meeting, response.attendee);
           await meetingManager.join(configuration, { deviceLabels: DeviceLabels.Video });
           await meetingManager.start();
       }
       
       function endContact() {
           meetingManager.leave();
       }
   }
   ```

1. Untuk merender kisi video, gunakan [VideoTileGrid](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-videotilegrid--page)dari Amazon Chime SDK React Components Library atau sesuaikan perilaku UI menggunakan [RemoteVideoTileProvider](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-providers-remotevideotileprovider--page). 

1. Untuk membuat pratinjau video, Anda dapat menggunakan [VideoPreview](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-previewvideo--page)dan [CameraSelection](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-deviceselection-camera-cameraselection--page)komponen. Untuk memilih atau mengubah video kamera, Anda dapat menggunakan `meetingManager.selectVideoInputDevice` atau `meetingManager.startVideoInput ` jika rapat sedang berlangsung.

   ```
   const meetingManager = useMeetingManager();
   const { isVideoEnabled } = useLocalVideo();
   if (isVideoEnabled) {
       await meetingManager.startVideoInputDevice(current);
    } else {
       meetingManager.selectVideoInputDevice(current);
   }
   ```

1. Untuk menerapkan blur latar belakang, lihat [useBackgroundBlur](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usebackgroundblur--page). 

1. Untuk contoh kode tentang cara membuat pengalaman video kustom, lihat contoh Amazon Chime SDK ini: [Demo Amazon Chime React Meeting](https://github.com/aws-samples/amazon-chime-sdk/tree/main/apps/meeting). 

## Tambahkan dukungan untuk berbagi layar
<a name="support-screen-sharing"></a>

**catatan**  
Jika Anda menggunakan out-of-box CCP secara langsung di aplikasi agen kustom Anda, pastikan `allowFramedScreenSharing` dan `allowFramedScreenSharingPopUp` disetel ke true saat Anda memulai CCP menggunakan [Amazon](https://github.com/aws/amazon-connect-streams) Connect Streams JS.   
Pengaturan `allowFramedScreenSharing` ke true memungkinkan tombol berbagi layar hanya pada satu CCP dalam satu jendela atau tab. Pengaturan `allowFramedScreenSharingPopUp` ke true akan meluncurkan aplikasi berbagi layar di jendela terpisah saat agen memilih tombol berbagi layar. Untuk detail selengkapnya, lihat dokumentasi [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams).

Selesaikan langkah-langkah berikut untuk mengaktifkan berbagi layar di desktop agen kustom Anda. 

1. Periksa apakah kontak memiliki kemampuan berbagi layar. 

   ```
   // Return true if any connection has screen sharing send capability
   contact.hasScreenShareCapability()
   
   // Return true if the agent connection has screen sharing send capability
   contact.canAgentSendScreenShare()
   
   // Return true if customer connection has screen sharing send capability
   contact.canCustomerSendScreenShare()
   ```

1. Periksa apakah agen memiliki izin video.

   ```
   agent.getPermissions().includes('videoContact');
   ```

1. Periksa apakah agen dapat memulai sesi berbagi layar untuk kontak yang memenuhi syarat.

   ```
   fun canStartScreenSharingSession() {
       return contactgetContactSubtype() === "connect:WebRTC" &&
       contact.hasScreenShareCapability() &&
       agent.getPermissions().includes('videoContact');
   }
   ```

1. Panggilan `startScreenSharing` untuk memulai sesi berbagi layar. Ini `ScreenSharingActivated` menambah kontak, memungkinkan Anda untuk mencarinya di [catatan kontak](ctr-data-model.md). 

   ```
   contact.startScreenSharing();
   ```

1. Panggilan `getVideoConnectionInfo` untuk bergabung dengan sesi. Anda dapat melewati langkah jika agen telah bergabung dengan sesi video untuk menangani video.

   ```
   if (canStartScreenSharingSession) {
       contact.startScreenSharing();
       const response = await
       contact.getAgentConnection().getVideoConnectionInfo();
   }
   ```

1. Bergabunglah dengan sesi dengan menggunakan Amazon Chime SDK React Components Library. Untuk cuplikan kode, lihat langkah 6 di. [Tambahkan dukungan untuk video](#support-video)

1. Gunakan hal yang sama [VideoTileGrid](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-videotilegrid--page)dari Amazon Chime SDK React Components untuk merender ubin video berbagi layar. Untuk informasi selengkapnya, lihat [useContentShareStatus](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usecontentsharestate--page) dan [useContentShareKontrol](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usecontentsharecontrols--page) 

1. Panggil `stopScreenSharing` saat mengakhiri sesi.

   ```
   contact.stopScreenSharing();
   ```

1. Anda dapat menerima acara untuk aktivitas berbagi layar dengan berlangganan callback berikut:

   ```
   initScreenSharingListeners() {
       this.contact.onScreenSharingStarted(() => {
           // Screen sharing session started
       });
   
       this.contact.onScreenSharingStopped(() => {
           // Screen sharing session ended
       });
   
       this.contact.onScreenSharingError((error) => {
           // Screen sharing session error occurred
       });
     }
   }
   ```