Mengaktifkan berbagi file menggunakan Pustaka UI di Obrolan Interoperabilitas Teams - An Azure Communication Services tutorial

Artikel
07/16/2024

Dalam Obrolan Interoperabilitas Teams ("Obrolan Interop"), kami dapat mengaktifkan berbagi file antara pengguna akhir Azure Communication Services dan pengguna Teams. Perhatikan, Interop Chat berbeda dari Obrolan Azure Communication Services. Jika Anda ingin mengaktifkan berbagi file di Obrolan Azure Communication Services, lihat Menambahkan berbagi file dengan Pustaka UI di Obrolan Azure Communication Services. Saat ini, pengguna akhir Azure Communication Services hanya dapat menerima lampiran file dari pengguna Teams. Lihat Kasus Penggunaan Pustaka UI untuk mempelajari lebih lanjut.

Penting

Fitur berbagi file dilengkapi dengan CallWithChat Composite tanpa pengaturan tambahan.

Mengunduh kode

Akses kode untuk tutorial ini di GitHub.

Prasyarat

Akun Azure dengan langganan aktif. Untuk detailnya, lihat Membuat akun gratis.
Visual Studio Code di salah satu platform yang didukung.
Node.js, versi LTS Aktif, dan Pemeliharaan LTS. Gunakan perintah node --version untuk memeriksa versi Anda.
Sumber daya Communication Services aktif dan string koneksi. Buat sumber daya Azure Communication Services.
Menggunakan pustaka UI versi 1.17.0 atau yang terbaru.
Siapkan rapat Teams dan tautan rapat.
Kenali cara kerja ChatWithChat Composite .

Latar belakang

Pertama-tama, kita perlu memahami bahwa Obrolan Interop Teams harus menjadi bagian dari rapat Teams saat ini. Saat pengguna Teams membuat rapat online, utas obrolan akan dibuat dan dikaitkan dengan rapat. Untuk mengaktifkan pengguna akhir Azure Communication Services yang bergabung dengan obrolan dan mulai mengirim/menerima pesan, peserta rapat (pengguna Teams) harus memasukkan mereka ke panggilan terlebih dahulu. Jika tidak, mereka tidak memiliki akses ke obrolan.

Setelah pengguna akhir Azure Communication Services diakui dalam panggilan, mereka akan dapat mulai mengobrol dengan peserta lain pada panggilan. Dalam tutorial ini, kami sedang memeriksa cara kerja gambar sebaris di obrolan Interop.

Gambaran Umum

Mirip dengan cara kami Menambahkan Dukungan Gambar Sebaris ke pustaka UI, kita memerlukan Composite yang CallWithChat dibuat. Mari kita ikuti contoh dasar dari halaman buku cerita untuk membuat ChatWithChat Composite.

Dari kode sampel, ia membutuhkan CallWithChatExampleProps, yang didefinisikan sebagai cuplikan kode berikut:

export type CallWithChatExampleProps = {
  // Props needed for the construction of the CallWithChatAdapter
  userId: CommunicationUserIdentifier;
  token: string;
  displayName: string;
  endpointUrl: string;
  locator: TeamsMeetingLinkLocator | TeamsMeetingIdLocator | CallAndChatLocator;

  // Props to customize the CallWithChatComposite experience
  fluentTheme?: PartialTheme | Theme;
  compositeOptions?: CallWithChatCompositeOptions;
  callInvitationURL?: string;
};

Untuk dapat memulai Composite untuk obrolan rapat, kita perlu meneruskan TeamsMeetingLinkLocator atau TeamsMeetingIdLocator, yang terlihat seperti ini:

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

Atau

{ "meetingId": "<TEAMS_MEETING_ID>", "passcode": "<TEAMS_MEETING_PASSCODE>"}

Ini semua yang Anda butuhkan - dan tidak ada penyiapan lain yang diperlukan untuk memungkinkan pengguna akhir Azure Communication Services menerima lampiran file dari pengguna Teams!

Izin

Saat file dibagikan dari klien Teams, pengguna Teams memiliki opsi untuk mengatur izin file menjadi:

"Siapa saja"
"Orang di organisasi Anda"
"Orang-orang saat ini dalam obrolan ini"
"Orang dengan akses yang ada"
"Orang yang Anda pilih"

Secara khusus, pustaka UI saat ini hanya mendukung "Siapa pun" dan "Orang yang Anda pilih" (dengan alamat email) dan semua izin lainnya tidak didukung. Jika pengguna Teams mengirim file dengan izin yang tidak didukung, pengguna akhir Azure Communication Services mungkin diminta ke halaman masuk atau akses yang ditolak saat mereka mengklik lampiran file di utas obrolan.

Cuplikan layar klien Teams yang mencantumkan izin file.

Selain itu, admin penyewa pengguna Teams mungkin memberlakukan pembatasan pada berbagi file, termasuk menonaktifkan beberapa izin file atau menonaktifkan opsi berbagi file bersama-sama.

Menjalankan kode

Mari kita jalankan npm run start maka Anda harus dapat mengakses aplikasi sampel kami melalui localhost:3000 seperti cuplikan layar berikut:

Cuplikan layar pustaka antarmuka pengguna Azure Communication Services.

Cukup klik tombol obrolan yang terletak di bagian bawah untuk mengungkapkan panel obrolan dan sekarang jika pengguna Teams mengirim beberapa file, Anda akan melihat sesuatu seperti cuplikan layar berikut:

Cuplikan layar klien Teams yang mengirim satu file.