Jitsi Meet API Entegrasyonu Nasıl Yapılır? Özellikleri ve Nelere

Jitsi Meet API Entegrasyonu Nasıl Yapılır? Özellikleri ve Nelere İmkan Tanır?

410

11 Haziran 2024 Salı - 10:34 (5 Ay önce)

Jitsi, açık kaynak kodlu bir video konferans çözümüdür ve Jitsi Meet adında bir web uygulamasıyla bilinir. Jitsi'nin API'si, bu uygulamanın işlevselliğini kendi uygulamanıza entegre etmenize olanak tanır.

Jitsi Meet API ile Entegrasyon

1. Temel Jitsi Meet API Entegrasyonu

Jitsi Meet API'sini kullanarak kendi web uygulamanıza video konferans eklemek için aşağıdaki adımları izleyebilirsiniz:

Adım 1: Jitsi Meet API'yi Web Sayfanıza Dahil Edin

Öncelikle, Jitsi Meet API'yi web sayfanıza eklemeniz gerekiyor. Bunu aşağıdaki kodu kullanarak yapabilirsiniz:

<div id="meet"></div>
<script src="https://meet.jit.si/external_api.js"></script>
<script>
const domain = "meet.jit.si";
const options = {
roomName: "ÖrnekOdaAdı",
width: 700,
height: 700,
parentNode: document.querySelector('#meet')
};
const api = new JitsiMeetExternalAPI(domain, options);
</script>

Bu kod parçacığı, Jitsi Meet'i meet.jit.si alan adında çalışacak ve ÖrnekOdaAdı adlı bir oda oluşturacak şekilde yapılandırır. #meet div'inin içinde video konferans penceresi görüntülenecektir.

Adım 2: Jitsi Meet API Opsiyonları

JitsiMeetExternalAPI sınıfının constructor'ına geçilen options nesnesi, video konferansın davranışını ve görünümünü yapılandırmak için kullanılır. Bu nesne aşağıdaki gibi çeşitli parametreleri içerebilir:

roomName: Toplantı odasının adı.
width: Video konferans alanının genişliği.
height: Video konferans alanının yüksekliği.
parentNode: Video konferans bileşeninin yerleştirileceği HTML elementi.
configOverwrite: Konferans yapılandırmasını özelleştirmek için kullanılır.
interfaceConfigOverwrite: Arayüz yapılandırmasını özelleştirmek için kullanılır.
userInfo: (object) Kullanıcı bilgilerini sağlar.
devices: (object) Varsayılan cihaz ayarlarını belirtir

const options = {
roomName: "ÖrnekOdaAdı",
width: '100%',
height: 700,
parentNode: document.querySelector('#meet'),
configOverwrite: {
startWithAudioMuted: true,
startWithVideoMuted: true,
enableWelcomePage: false,
prejoinPageEnabled: false
},
interfaceConfigOverwrite: {
filmStripOnly: true,
SHOW_JITSI_WATERMARK: false,
TOOLBAR_BUTTONS: [
'microphone', 'camera', 'desktop', 'fullscreen', 'fodeviceselection', 'hangup',
'profile', 'chat', 'recording', 'etherpad', 'settings', 'raisehand', 'videoquality',
'filmstrip', 'invite', 'feedback', 'stats', 'shortcuts', 'tileview', 'videobackgroundblur',
'download', 'help'
]
},
userInfo: {
email: '[email protected]',
displayName: 'Kullanıcı Adı'
},
devices: {
audioInput: 'microphoneId',
videoInput: 'cameraId'
}
};
const api = new JitsiMeetExternalAPI(domain, options);

Bu örnek, konferansı startWithAudioMuted ayarını etkinleştirerek başlatır ve filmStripOnly ayarını kullanarak yalnızca katılımcıların küçük resimlerini gösterir.

configOverwrite, Jitsi'nin varsayılan yapılandırma ayarlarını özelleştirmek için kullanılır. İşte bazı yaygın kullanılan configOverwrite ayarları:

startWithAudioMuted: (boolean) Konferansın ses kapalı olarak başlamasını sağlar.
startWithVideoMuted: (boolean) Konferansın video kapalı olarak başlamasını sağlar.
enableWelcomePage: (boolean) Karşılama sayfasının etkinleştirilip etkinleştirilmediğini belirler.
prejoinPageEnabled: (boolean) Kullanıcıların toplantıya katılmadan önce ses ve video ayarlarını yapabilecekleri ön katılım sayfasının etkin olup olmadığını belirler.

`interfaceConfigOverwrite` Parametresi

interfaceConfigOverwrite, Jitsi'nin varsayılan arayüz yapılandırma ayarlarını özelleştirmek için kullanılır. İşte bazı yaygın kullanılan interfaceConfigOverwrite ayarları:

filmStripOnly: (boolean) Yalnızca film şeridi modunu etkinleştirir.
SHOW_JITSI_WATERMARK: (boolean) Jitsi logosunun gösterilip gösterilmeyeceğini belirler.
SHOW_WATERMARK_FOR_GUESTS: (boolean) Misafir kullanıcılar için filigranın gösterilip gösterilmeyeceğini belirler.
TOOLBAR_BUTTONS: (array) Araç çubuğunda hangi düğmelerin gösterileceğini belirler.

2. Jitsi Meet API Olayları (Events)

Jitsi Meet API, çeşitli olaylar (events) için dinleyiciler eklemenize olanak tanır. Bu olaylar, konferansın durumu hakkında bilgi sağlar ve belirli eylemler gerçekleştirilmesini sağlar.

api.addEventListener('participantJoined', (event) => {
    console.log("Katılımcı Katıldı:", event);
});
api.addEventListener('videoConferenceJoined', (event) => {
    console.log("Video Konferansına Katılındı:", event);
});
api.addEventListener('videoConferenceLeft', (event) => {
    console.log("Video Konferansından Ayrıldı:", event);
});

Bu olay dinleyicileri, katılımcıların katılımını ve ayrılmasını izler ve buna göre işlem yapar.

3. Jitsi Meet API Metotları

Jitsi Meet API, konferans sırasında çeşitli işlemleri gerçekleştirebileceğiniz metotlar sağlar. Bazı yaygın kullanılan metotlar şunlardır:

executeCommand: Belirli komutları yürütmek için kullanılır.

// Mikrofonu kapatmak
api.executeCommand('toggleAudio');
// Kamerayı kapatmak
api.executeCommand('toggleVideo');

getParticipantsInfo: Konferanstaki katılımcılar hakkında bilgi almak için kullanılır:

const participants = api.getParticipantsInfo();
console.log(participants);

dispose: Konferansı sonlandırmak ve API örneğini temizlemek için kullanılır:

api.dispose();

Jitsi Meet API'si, güçlü ve esnek bir video konferans çözümü sunar ve bu çözümü web uygulamanıza entegre etmenizi sağlar. Bu rehberde, temel entegrasyon adımlarını, olayları ve metotları açıkladık. Daha fazla bilgi ve detaylı dokümantasyon için Jitsi Meet API belgelerini inceleyebilirsiniz.

Jitsi Meet Kurulumu hakkında bilgi almak için tıklayın.

Web Yazılım
Uzaktan Eğitim
Video Konferans
Meet
Apı

Tepkini Göster

Yorumlar

Sende Yorumunu Ekle

0 karakter