Share via

Mulai Cepat: Menambahkan efek video ke panggilan video Anda

  • Artikel

Anda dapat menggunakan fitur Efek video untuk menambahkan efek ke video Anda dalam panggilan video. Fitur ini memungkinkan pengembang untuk membangun efek visual latar belakang dan penggantian video latar belakang ke dalam pengalaman panggilan. Kabur latar belakang memberi pengguna mekanisme untuk menghapus gangguan di belakang peserta sehingga peserta dapat berkomunikasi tanpa aktivitas yang mengganggu atau informasi rahasia di latar belakang. Ini sangat berguna konteks telehealth, di mana penyedia atau pasien mungkin ingin mengaburkan lingkungan mereka untuk melindungi informasi sensitif atau informasi identitas pribadi. Kabur latar belakang dapat diterapkan di semua skenario janji temu virtual, termasuk telebanking dan pendengaran virtual, untuk melindungi privasi pengguna. Selain kerahasiaan yang ditingkatkan, kabur latar belakang memungkinkan lebih banyak kreativitas ekspresi, memungkinkan pengguna mengunggah latar belakang kustom untuk menghosting pengalaman panggilan yang lebih menyenangkan dan dipersonalisasi.

Catatan

Pustaka efek panggilan tidak dapat digunakan mandiri dan hanya dapat berfungsi saat digunakan dengan pustaka klien Panggilan Komunikasi Azure untuk WebJS (https://www.npmjs.com/package/@azure/communication-calling).

Menggunakan efek video

Instal paketnya

npm install Gunakan perintah untuk menginstal Azure Communication Services Effects SDK untuk JavaScript.

Penting

Mulai cepat ini menggunakan versi SDK Panggilan Azure Communication Services (1.13.1atau lebih besar) dan versi SDK Efek Panggilan Azure Communication Services lebih besar dari atau setara 1.0.1dengan .

npm install @azure/communication-calling-effects --save

Lihat di sini untuk detail selengkapnya tentang halaman paket npm efek komunikasi panggilan.

Catatan

Saat ini dukungan browser untuk membuat efek latar belakang video hanya didukung di Chrome dan Edge Desktop Browser (Windows dan Mac) dan Mac Safari Desktop.

Catatan

Saat ini ada dua efek video yang tersedia:

  • Latar belakang blur
  • Penggantian latar belakang dengan gambar (rasio aspek harus 16:9 agar kompatibel)

Untuk menggunakan efek video dengan Azure Communication Calling SDK, setelah membuat LocalVideoStream, Anda perlu mendapatkan VideoEffects API fitur efek LocalVideoStream video untuk memulai/menghentikan:

import * as AzureCommunicationCallingSDK from '@azure/communication-calling'; 

import { BackgroundBlurEffect, BackgroundReplacementEffect } from '@azure/communication-calling-effects'; 

// Get the video effects feature api on the LocalVideoStream 
// (here, localVideoStream is the LocalVideoStream object you created while setting up video calling)
const videoEffectsFeatureApi = localVideoStream.feature(AzureCommunicationCallingSDK.Features.VideoEffects); 


// Subscribe to useful events 
videoEffectsFeatureApi.on(‘effectsStarted’, () => { 
    // Effects started
});

videoEffectsFeatureApi.on(‘effectsStopped’, () => { 
    // Effects stopped
}); 

videoEffectsFeatureApi.on(‘effectsError’, (error) => { 
    // Effects error
});

Latar belakang blur

// Create the effect instance 
const backgroundBlurEffect = new BackgroundBlurEffect(); 

// Recommended: Check support by using the isSupported method on the feature API
const backgroundBlurSupported = await videoEffectsFeatureApi.isSupported(backgroundBlurEffect);

if (backgroundBlurSupported) { 
    // Use the video effects feature api we created to start effects
    await videoEffectsFeatureApi.startEffects(backgroundBlurEffect); 
}

Penggantian latar belakang dengan gambar

Anda perlu memberikan URL gambar yang Anda inginkan sebagai latar belakang untuk efek ini.

Penting

Metode startEffects akan gagal jika URL bukan gambar atau tidak dapat dijangkau/tidak dapat dibaca.

Catatan

Format gambar yang didukung saat ini adalah: png, jpg, jpeg, tiff, bmp.

Rasio aspek yang didukung saat ini adalah 16:9.

const backgroundImage = 'https://linkToImageFile'; 

// Create the effect instance 
const backgroundReplacementEffect = new BackgroundReplacementEffect({ 
    backgroundImageUrl: backgroundImage
}); 

// Recommended: Check support by using the isSupported method on the feature API
const backgroundReplacementSupported = await videoEffectsFeatureApi.isSupported(backgroundReplacementEffect);

if (backgroundReplacementSupported) { 
    // Use the video effects feature api as before to start/stop effects 
    await videoEffectsFeatureApi.startEffects(backgroundReplacementEffect); 
}

Mengubah gambar untuk efek ini dapat dilakukan dengan meneruskannya melalui metode konfigurasi:

const newBackgroundImage = 'https://linkToNewImageFile'; 

await backgroundReplacementEffect.configure({ 
    backgroundImageUrl: newBackgroundImage
});

Beralih efek dapat dilakukan menggunakan metode yang sama pada api fitur efek video:

// Switch to background blur 
await videoEffectsFeatureApi.startEffects(backgroundBlurEffect); 

// Switch to background replacement 
await videoEffectsFeatureApi.startEffects(backgroundReplacementEffect);

Kapan saja jika Anda ingin memeriksa efek apa yang aktif, Anda dapat menggunakan activeEffects properti . Properti activeEffects mengembalikan array dengan nama efek aktif saat ini, dan mengembalikan array kosong jika tidak ada efek yang aktif.

// Using the video effects feature api
const currentActiveEffects = videoEffectsFeatureApi.activeEffects;

Untuk menghentikan efek:

await videoEffectsFeatureApi.stopEffects();

Catatan

Untuk menggunakan Efek Video pada IOS Calling SDK, model pembelajaran mesin diunduh ke perangkat pelanggan. Kami mendorong Anda untuk meninjau catatan privasi di aplikasi Anda dan memperbaruinya, jika perlu.

Anda dapat menggunakan fitur Efek Video untuk menambahkan efek ke video Anda dalam panggilan video. Kabur latar belakang memberi pengguna mekanisme untuk menghapus gangguan di belakang peserta sehingga peserta dapat berkomunikasi tanpa aktivitas yang mengganggu atau informasi rahasia di latar belakang. Fitur ini sangat berguna konteks telehealth, di mana penyedia atau pasien mungkin ingin mengaburkan lingkungan mereka untuk melindungi informasi sensitif atau data pribadi. Kabur latar belakang dapat diterapkan di semua skenario janji temu virtual, termasuk telebanking dan pendengaran virtual, untuk melindungi privasi pengguna.

Menggunakan efek video

Catatan

Dukungan efek video di iOS terbatas pada dua versi utama terbaru iOS. Misalnya, ketika iOS versi utama baru dirilis, persyaratan iOS adalah versi baru dan versi terbaru yang mendahuluinya.

Saat ini ada satu Efek Video yang tersedia: Blur Latar Belakang.

Objek LocalVideoEffectsFeature memiliki struktur API berikut:

  • enable: Mengaktifkan Efek Video pada LocalVideoStream instans.
  • disable: Menonaktifkan Efek Video pada LocalVideoStream instans.
  • isSupported: Menunjukkan apakah Efek Video didukung pada LocalVideoStream instans.
  • onVideoEffectEnabled: Peristiwa yang dipicu ketika Efek Video telah berhasil diaktifkan.
  • onVideoEffectDisabled: Peristiwa yang dipicu saat Efek Video berhasil dinonaktifkan.
  • onVideoEffectError: Peristiwa yang dipicu saat operasi Efek Video gagal.

Setelah Anda memiliki LocalVideoEffectsFeature objek , Anda dapat berlangganan peristiwa, peristiwa memiliki delegasi berikut: didEnableVideoEffect, , didDisableVideoEffectdidReceiveVideoEffectError.

Untuk menggunakan Efek Video dengan Azure Communication Calling SDK, setelah membuat LocalVideoStream, Anda perlu mendapatkan VideoEffects API LocalVideoStream fitur untuk mengaktifkan/menonaktifkan Efek Video:

// Obtain the Video Effects feature from the LocalVideoStream object that is sending the video.
@State var localVideoEffectsFeature: LocalVideoEffectsFeature?
localVideoEffectsFeature = self.localVideoStreams.first.feature(Features.localVideoEffects)

// Subscribe to the events
public func localVideoEffectsFeature(_ videoEffectsLocalVideoStreamFeature: LocalVideoEffectsFeature, didEnableVideoEffect args: VideoEffectEnabledEventArgs) {
        os_log("Video Effect Enabled, VideoEffectName: %s", log:log, args.videoEffectName)
    }
public func localVideoEffectsFeature(_ videoEffectsLocalVideoStreamFeature: LocalVideoEffectsFeature, didDisableVideoEffect args: VideoEffectDisabledEventArgs) {
    os_log("Video Effect Disabled, VideoEffectName: %s", log:log, args.videoEffectName)
}
public func localVideoEffectsFeature(_ videoEffectsLocalVideoStreamFeature: LocalVideoEffectsFeature, didReceiveVideoEffectError args: VideoEffectErrorEventArgs) {
    os_log("Video Effect Error, VideoEffectName: %s, Code: %s, Message: %s", log:log, args.videoEffectName, args.code, args.message)
}

dan mulai menggunakan API untuk mengaktifkan dan menonaktifkan Efek Video:

localVideoEffectsFeature.enable(effect: backgroundBlurVideoEffect)
localVideoEffectsFeature.disable(effect: backgroundBlurVideoEffect)

Latar belakang blur

Latar Belakang Kabur adalah Efek Video yang memungkinkan latar belakang seseorang menjadi kabur. Untuk menggunakan Efek Video Latar Belakang, Anda perlu mendapatkan LocalVideoEffectsFeature fitur dari yang valid LocalVideoStream.

  • Buat objek Efek Video Kabur Latar Belakang baru:
@State var backgroundBlurVideoEffect: BackgroundBlurEffect?
  • Periksa apakah BackgroundBlurEffect didukung dan panggil Enable pada videoEffectsFeature objek:
if((localVideoEffectsFeature.isSupported(effect: backgroundBlurVideoEffect)) != nil)
{
    localVideoEffectsFeature.enable(effect: backgroundBlurVideoEffect)
}

Untuk menonaktifkan Efek Video Kabur Latar Belakang:

localVideoEffectsFeature.disable(effect: backgroundBlurVideoEffect)

Catatan

Untuk menggunakan Efek Video pada Android Calling SDK, model pembelajaran mesin diunduh ke perangkat pelanggan. Kami mendorong Anda untuk meninjau catatan privasi di aplikasi Anda dan memperbaruinya, jika perlu.

Anda dapat menggunakan fitur Efek Video untuk menambahkan efek ke video Anda dalam panggilan video. Kabur latar belakang memberi pengguna mekanisme untuk menghapus gangguan di belakang peserta sehingga peserta dapat berkomunikasi tanpa aktivitas yang mengganggu atau informasi rahasia di latar belakang. Fitur ini sangat berguna konteks telehealth, di mana penyedia atau pasien mungkin ingin mengaburkan lingkungan mereka untuk melindungi informasi sensitif atau data pribadi. Kabur latar belakang dapat diterapkan di semua skenario janji temu virtual, termasuk telebanking dan pendengaran virtual, untuk melindungi privasi pengguna.

Mulai cepat ini dibangun di Mulai Cepat: Menambahkan panggilan video 1:1 ke aplikasi Anda untuk Android.

Menggunakan efek video

Catatan

Dukungan efek video di Android terbatas pada empat versi utama Android terakhir . Misalnya, ketika Android versi utama baru dirilis, persyaratan Android adalah versi baru dan tiga versi terbaru yang mendahuluinya.

Saat ini ada satu Efek Video yang tersedia: Blur Latar Belakang.

Objek VideoEffectsLocalVideoStreamFeature memiliki struktur API berikut:

  • enableEffect: Mengaktifkan Efek Video pada LocalVideoStream instans.
  • disableEffect: Menonaktifkan Efek Video pada LocalVideoStream instans.
  • OnVideoEffectEnabledListener: Peristiwa yang dipicu ketika Efek Video telah berhasil diaktifkan.
  • OnVideoEffectDisabledListener: Peristiwa yang dipicu saat Efek Video berhasil dinonaktifkan.
  • OnVideoEffectErrorListener: Peristiwa yang dipicu saat operasi Efek Video gagal.

Objek VideoEffectEnabledEvent, VideoEffectDisabledEvent dan VideoEffectErrorEvent memiliki struktur API berikut:

  • getVideoEffectName: Mendapatkan nama Efek Video yang memicu peristiwa.

Setelah memiliki VideoEffectsLocalVideoStreamFeature objek , Anda dapat berlangganan peristiwa:

Untuk menggunakan Efek Video dengan Azure Communication Calling SDK, setelah membuat LocalVideoStream, Anda perlu mendapatkan VideoEffects API LocalVideoStream fitur untuk mengaktifkan/menonaktifkan Efek Video:

// Obtain the Video Effects feature from the LocalVideoStream object that is sending the video.
VideoEffectsLocalVideoStreamFeature videoEffectsFeature = currentVideoStream.feature(Features.LOCAL_VIDEO_EFFECTS);

// Create event handlers for the events
private void handleOnVideoEffectEnabled(VideoEffectEnabledEvent args) {
}
private void handleOnVideoEffectDisabled(VideoEffectDisabledEvent args) {
}
private void handleOnVideoEffectError(VideoEffectErrorEvent args) {
}
 
// Subscribe to the events
videoEffectsFeature.addOnVideoEffectEnabledListener(this::handleOnVideoEffectEnabled);
videoEffectsFeature.addOnVideoEffectDisabledListener(this::handleOnVideoEffectDisabled);
videoEffectsFeature.addOnVideoEffectErrorListener(this::handleOnVideoEffectError);

dan mulai menggunakan API untuk mengaktifkan dan menonaktifkan Efek Video:

videoEffectsFeature.enableEffect( {{VIDEO_EFFECT_TO_DISABLE}} );
videoEffectsFeature.disableEffect( {{VIDEO_EFFECT_TO_DISABLE}} );

Latar belakang blur

Latar Belakang Kabur adalah Efek Video yang memungkinkan latar belakang seseorang menjadi kabur. Untuk menggunakan Efek Video Latar Belakang, Anda perlu mendapatkan VideoEffectsLocalVideoStreamFeature fitur dari yang valid LocalVideoStream.

Untuk mengaktifkan Efek Video Kabur Latar Belakang:

  • Buat metode yang mendapatkan VideoEFfects Fitur berlangganan peristiwa:
private void handleOnVideoEffectEnabled(VideoEffectEnabledEvent args) {
   Log.i("VideoEfects", "Effect enabled for effect " + args.getVideoEffectName());
}
private void handleOnVideoEffectDisabled(VideoEffectDisabledEvent args) {
   Log.i("VideoEfects", "Effect disabled for effect " + args.getVideoEffectName());
}
private void handleOnVideoEffectError(VideoEffectErrorEvent args) {
   Log.i("VideoEfects", "Error " + args.getCode() + ":" + args.getMessage()
           + " for effect " + args.getVideoEffectName());
}

VideoEffectsLocalVideoStreamFeature videoEffectsFeature;
public void createVideoEffectsFeature() {
    videoEffectsFeature = currentVideoStream.feature(Features.LOCAL_VIDEO_EFFECTS);
    videoEffectsFeature.addOnVideoEffectEnabledListener(this::handleOnVideoEffectEnabled);
    videoEffectsFeature.addOnVideoEffectDisabledListener(this::handleOnVideoEffectDisabled);
    videoEffectsFeature.addOnVideoEffectErrorListener(this::handleOnVideoEffectError);
}
  • Buat objek Efek Video Kabur Latar Belakang baru:
BackgroundBlurEffect backgroundBlurVideoEffect = new BackgroundBlurEffect();
  • Panggil EnableEffect pada videoEffectsFeature objek:
public void enableBackgroundBlur() {
    videoEffectsFeature.enableEffect(backgroundBlurEffect);
}

Untuk menonaktifkan Efek Video Kabur Latar Belakang:

public void disableBackgroundBlur() {
    videoEffectsFeature.disableEffect(backgroundBlurEffect);
}

Catatan

Untuk menggunakan Efek Video pada Windows Calling SDK, model pembelajaran mesin diunduh ke perangkat pelanggan. Kami mendorong Anda untuk meninjau catatan privasi di aplikasi Anda dan memperbaruinya, jika perlu.

Anda dapat menggunakan fitur Efek Video untuk menambahkan efek ke video Anda dalam panggilan video. Kabur latar belakang memberi pengguna mekanisme untuk menghapus gangguan di belakang peserta sehingga peserta dapat berkomunikasi tanpa aktivitas yang mengganggu atau informasi rahasia di latar belakang. Fitur ini sangat berguna konteks telehealth, di mana penyedia atau pasien mungkin ingin mengaburkan lingkungan mereka untuk melindungi informasi sensitif atau data pribadi. Kabur latar belakang dapat diterapkan di semua skenario janji temu virtual, termasuk telebanking dan pendengaran virtual, untuk melindungi privasi pengguna.

Mulai cepat ini dibangun di Mulai Cepat: Menambahkan panggilan video 1:1 ke aplikasi Anda untuk Windows.

Menggunakan efek video

Saat ini ada satu Efek Video yang tersedia: Blur Latar Belakang.

Objek VideoEffectsLocalVideoStreamFeature memiliki struktur API berikut:

  • EnableEffect: Mengaktifkan Efek Video pada LocalVideoStream instans.
  • DisableEffect: Menonaktifkan Efek Video pada LocalVideoStream instans.
  • VideoEffectEnabled: Peristiwa yang dipicu ketika Efek Video telah berhasil diaktifkan.
  • VideoEffectDisabledListener: Peristiwa yang dipicu saat Efek Video berhasil dinonaktifkan.
  • VideoEffectErrorListener: Peristiwa yang dipicu saat operasi Efek Video gagal.

Objek VideoEffectEnabledEvent, VideoEffectDisabledEvent dan VideoEffectErrorEvent memiliki struktur API berikut:

  • VideoEffectName: Mendapatkan nama Efek Video yang memicu peristiwa.

Setelah memiliki VideoEffectsLocalVideoStreamFeature objek , Anda dapat berlangganan peristiwa:

Untuk menggunakan Efek Video dengan Azure Communication Calling SDK, tambahkan variabel ke MainPage.

public sealed partial class MainPage : Page
{
    private LocalVideoEffectsFeature localVideoEffectsFeature;
}

Setelah membuat LocalVideoStream, Anda perlu mendapatkan VideoEffects API LocalVideoStream fitur untuk mengaktifkan/menonaktifkan Efek Video.

private async void CameraList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var selectedCamerea = CameraList.SelectedItem as VideoDeviceDetails;
    cameraStream = new LocalOutgoingVideoStream(selectedCamerea);
    InitVideoEffectsFeature(cameraStream);
    
    var localUri = await cameraStream.StartPreviewAsync();
    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
    {
        LocalVideo.Source = MediaSource.CreateFromUri(localUri);
    });
}

public void InitVideoEffectsFeature(LocalOutgoingVideoStream videoStream){
    localVideoEffectsFeature = videoStream.Features.VideoEffects;
    localVideoEffectsFeature.VideoEffectEnabled += LocalVideoEffectsFeature_VideoEffectEnabled;
    localVideoEffectsFeature.VideoEffectDisabled += LocalVideoEffectsFeature_VideoEffectDisabled;
    localVideoEffectsFeature.VideoEffectError += LocalVideoEffectsFeature_VideoEffectError;
}

// Create event handlers for the events
private void LocalVideoEffectsFeature_VideoEffectEnabled(object sender, VideoEffectEnabledEventArgs args)
{
}

private void LocalVideoEffectsFeature_VideoEffectDisabled(object sender, VideoEffectDisabledEventArgs args)
{
}

private void LocalVideoEffectsFeature_VideoEffectError(object sender, VideoEffectErrorEventArgs args)
{
}
 
// Subscribe to the events
videoEffectsFeature.VideoEffectEnabled += VideoEffectsFeature_OnVideoEffectEnabled;
videoEffectsFeature.VideoEffectDisabled += VideoEffectsFeature_OnVideoEffectDisabled;
videoEffectsFeature.VideoEffectError += VideoEffectsFeature_OnVideoEffectError;

dan mulai menggunakan API untuk mengaktifkan dan menonaktifkan Efek Video:

videoEffectsLocalVideoStreamFeature.EnableEffect( {{VIDEO_EFFECT_TO_ENABLE}} );
videoEffectsLocalVideoStreamFeature.DisableEffect( {{VIDEO_EFFECT_TO_DISABLE}} );

Latar belakang blur

Latar Belakang Kabur adalah Efek Video yang memungkinkan latar belakang seseorang menjadi kabur. Untuk menggunakan Efek Video Latar Belakang, Anda perlu mendapatkan VideoEffectsLocalVideoStreamFeature fitur dari yang valid LocalVideoStream.

Untuk mengaktifkan Efek Video Kabur Latar Belakang:

  • BackgroundBlurEffect Tambahkan instans ke MainPage.
public sealed partial class MainPage : Page
{
    private BackgroundBlurEffect backgroundBlurVideoEffect = new BackgroundBlurEffect();
}
  • Buat metode yang mendapatkan VideoEFfects Fitur berlangganan peristiwa:
private async void LocalVideoEffectsFeature_VideoEffectEnabled(object sender, VideoEffectEnabledEventArgs e)
{
    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, async () =>
    {
        BackgroundBlur.IsChecked = true;
    });
}

private async void LocalVideoEffectsFeature_VideoEffectDisabled(object sender, VideoEffectDisabledEventArgs e)
{
    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, async () =>
    {
        BackgroundBlur.IsChecked = false;
    });
}

private void LocalVideoEffectsFeature_VideoEffectError(object sender, VideoEffectErrorEventArgs e)
{
    String effectName = args.VideoEffectName;
    String errorCode = args.Code;
    String errorMessage = args.Message;

    Trace.WriteLine("VideoEffects VideoEffectError on effect " + effectName + "with code "
        + errorCode + "and error message " + errorMessage);
}
  • Aktifkan dan nonaktifkan efek Blur Latar Belakang:
private async void BackgroundBlur_Click(object sender, RoutedEventArgs e)
{
    if (localVideoEffectsFeature.IsEffectSupported(backgroundBlurVideoEffect))
    {
        var backgroundBlurCheckbox = sender as CheckBox;
        if (backgroundBlurCheckbox.IsChecked.Value)
        {
            localVideoEffectsFeature.EnableEffect(backgroundBlurVideoEffect);
        }
        else
        {
            localVideoEffectsFeature.DisableEffect(backgroundBlurVideoEffect);
        }
    }
}

Langkah berikutnya

Untuk informasi selengkapnya, lihat artikel berikut ini: