View a markdown version of this page

Integrasikan panggilan video dan berbagi layar ke desktop agen kustom Anda dengan menggunakan Connect Customer Streams JS - Pelanggan Amazon Connect
Tambahkan dukungan untuk videoTambahkan dukungan untuk berbagi layar

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 Connect Customer Streams JS

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 Connect Customer Streams JS.

  1. Gunakan Connect Customer Streams JS untuk memeriksa apakah kontak yang masuk adalah kontak WebRTC. Gunakan subtipe kontak"connect:WebRTC", seperti yang ditunjukkan dalam contoh kode berikut:

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

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

Tambahkan dukungan untuk video

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

  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.getPermissions().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:

  6. Untuk kesederhanaan, 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 grid video, gunakan VideoTileGrid dari Amazon Chime SDK React Components Library atau sesuaikan perilaku UI menggunakan RemoteVideoTileProvider.

  8. Untuk merender pratinjau video, Anda dapat menggunakan VideoPreview dan CameraSelection 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);
}

  9. Untuk menerapkan keburaman latar belakang, lihat penggunaan BackgroundBlur.

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

Tambahkan dukungan untuk berbagi layar

catatan

Jika Anda menggunakan CCP out-box langsung di aplikasi agen kustom Anda, pastikan allowFramedScreenSharing dan disetel ke true saat Anda memulai CCP menggunakan Connect Custom allowFramedScreenSharingPopUp er Streams JS.

Pengaturan allowFramedScreenSharing ke true mengaktifkan tombol berbagi layar hanya pada satu CCP dalam satu jendela atau tab. Men allowFramedScreenSharingPopUp yetel ke true meluncurkan aplikasi berbagi layar di jendela terpisah saat agen memilih tombol berbagi layar. Untuk detail selengkapnya, lihat dokumentasi Connect Customer Streams JS.

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

  2. Periksa apakah agen memiliki izin video.

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

  3. 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');
}

  4. Panggil startScreenSharing untuk memulai sesi berbagi layar. Ini ScreenSharingActivated menambah kontak, memungkinkan Anda untuk mencarinya di catatan kontak. 

    contact.startScreenSharing();

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

  6. Bergabunglah dengan sesi menggunakan Amazon Chime SDK React Components Library. Untuk cuplikan kode, lihat langkah 6 diTambahkan dukungan untuk video.

  7. Gunakan yang sama VideoTileGrid dari Amazon Chime SDK React Components untuk merender ubin video berbagi layar. Untuk informasi selengkapnya, lihat penggunaan ContentShareState dan penggunaan ContentShareControls

  8. Panggil stopScreenSharing saat sesi berakhir.

    contact.stopScreenSharing();

  9. Anda dapat menerima acara untuk aktivitas berbagi layar dengan berlangganan panggilan balik 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
    });
  }
}