Mengaktifkan berbagi file menggunakan Library UI di Obrolan Interoperabilitas Microsoft Teams

Dalam Obrolan Interoperabilitas Teams atau Obrolan Interop, kita dapat mengaktifkan file sharing antara pengguna akhir Azure Communication Services dan pengguna Teams. Obrolan Interop berbeda dengan Azure Communication Services Chat. 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. Untuk informasi selengkapnya, lihat Kasus Penggunaan Pustaka UI.

Important

Fitur berbagi file dilengkapi dengan CallWithChat Composite tanpa pengaturan tambahan.

Mengunduh kode

Akses kode untuk tutorial ini di Sampel Pustaka UI - Berbagi File menggunakan Interop Teams dalam Obrolan Rapat Pustaka UI.

Prerequisites

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

Background

Obrolan Interop Teams harus menjadi bagian dari rapat Teams yang ada. Saat pengguna Teams membuat rapat online, utas obrolan dibuat dan dikaitkan dengan rapat. Untuk memungkinkan pengguna akhir Azure Communication Services bergabung dengan obrolan dan mulai mengirim/menerima pesan, seorang peserta rapat (pengguna Teams) perlu mengizinkan mereka masuk ke panggilan terlebih dahulu. Jika tidak, mereka tidak memiliki akses ke obrolan.

Setelah pengguna akhir Azure Communication Services masuk ke panggilan, mereka dapat mulai mengobrol dengan peserta lain pada panggilan. Artikel ini menjelaskan cara kerja berbagi gambar sebaris di obrolan Interop Teams.

Overview

Mirip dengan cara Anda Menambahkan Dukungan Gambar Inline ke pustaka UI, Anda perlu membuat sebuah CallWithChat Komposit.

Untuk membuat ChatWithChat Composite, lihat Tutorial CallWithChatComposite.

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 fitur Composite untuk obrolan rapat, kita perlu meneruskan TeamsMeetingLinkLocator atau TeamsMeetingIdLocator, yang terlihat seperti ini:

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

Or

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

Itu saja! Anda tidak memerlukan penyiapan lain untuk mengaktifkan pengguna akhir Azure Communication Services untuk menerima lampiran file dari pengguna Teams!

Permissions

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

• "Anyone"
• "Orang di organisasi Anda"
• Orang-orang yang sedang berada dalam obrolan ini
• Orang-orang yang sudah memiliki akses
• "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 untuk masuk atau menolak akses saat mereka mengklik lampiran file di utas obrolan.

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

Saat menjalankan npm run start, Anda dapat mengakses aplikasi sampel kami melalui localhost:3000 seperti yang ditunjukkan pada cuplikan layar berikut:

Klik tombol obrolan yang terletak di bagian bawah untuk mengungkapkan panel obrolan. Jika pengguna Teams mengirim beberapa file, Anda akan melihat sesuatu seperti cuplikan layar berikut:

Dan sekarang jika pengguna mengklik kartu lampiran file, tab baru terbuka seperti cuplikan layar berikut di mana pengguna dapat mengunduh file:

Langkah selanjutnya

Periksa Pustaka UI lainnya

Artikel terkait

• Memeriksa kasus penggunaan Pustaka UI
• Menambahkan obrolan ke aplikasi Anda
• Membuat token akses pengguna
• Pelajari tentang arsitektur klien dan server
• Mempelajari autentikasi
• Menambahkan berbagi file dengan Pustaka UI di Obrolan Layanan pengguna akhir Azure Azure Communication Services
• Tambahkan gambar di dalam teks menggunakan Pustaka UI di Obrolan Interoperabilitas Teams