Integrasikan panggilan video ke desktop agen kustom Anda

Untuk desktop agen khusus, Anda perlu membuat perubahan untuk mendukung panggilan video. 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 Connect Streams JS.

1. Gunakan Amazon Connect Streams JS 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"

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

Berikut ini adalah langkah-langkah tambahan untuk penanganan video jika pelanggan Anda telah mengaktifkannya di pihak mereka:

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()

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

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

3. 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.getPermission().includes('videoContact');
   }

4. Untuk bergabung dengan sesi video, hubungigetVideoConnectionInfo:

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

5. Untuk membuat UI video dan bergabung dengan sesi rapat video, lihat:

   • Amazon Chime SDK untuk aktif JavaScript GitHub

   • Amazon Chime Pustaka Komponen SDK React di GitHub

6. 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();
       }
   }    

7. Untuk merender kisi video, gunakan VideoTileGriddari Amazon Chime SDK React Components Library atau sesuaikan perilaku UI menggunakan RemoteVideoTileProvider.

8. Untuk membuat pratinjau video, Anda dapat menggunakan VideoPreviewdan CameraSelectionkomponen. 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);
   }

9. Untuk menerapkan blur latar belakang, lihat useBackgroundBlur.

10. Untuk contoh kode tentang cara membuat pengalaman video kustom, lihat contoh Amazon Chime SDK ini: Demo Amazon Chime React Meeting.