Kayıt Oynatıcı

Webfon çağrı kayıtlarını tarayıcıda oynatan, widget'tan bağımsız bir oynatıcıdır. Bir görüşmenin sesi, kamera görüntüleri ve ekran paylaşımı tek bir zaman çizgisinde senkron oynatılır — herhangi bir sunucu tarafı dönüştürme (transcode) olmadan.

Bir kayıt, her biri tek bir track taşıyan birkaç .webm dosyasından oluşur. Hangi dosyanın kime/neye ait olduğu ve zamanlaması dosyaların içine gömülüdür; oynatıcı bunları otomatik hizalar. Tipik bir görüşmede en fazla beş dosya bulunur:

Dosya	İçerik
customer_audio.webm	Müşteri sesi
agent_audio.webm	Temsilci sesi
customer_video.webm	Müşteri kamerası
agent_video.webm	Temsilci kamerası
screen.webm	Ekran paylaşımı

Dosyalar opsiyoneldir: kamerasız ya da ekran paylaşımsız bir görüşme eksik dosyalarla gelir; oynatıcı eldeki dosyaları hizalayıp oynatır.

Hızlıca deneyin

Elinizdeki kayıt dosyalarını gömme yapmadan, doğrudan tarayıcıda açıp oynatmak için Media Player aracına sürükleyip bırakabilirsiniz.

Sayfaya gömme

Oynatıcıyı CDN (script etiketi) veya npm paketi ile kendi sayfanıza ekleyebilirsiniz. Her iki yolda da oynatıcı, boyutunu sizin verdiğiniz bir kapsayıcı elemana mount edilir.

CDN (script etiketi)

<!-- 1) oynatıcının yerleşeceği eleman (boyutu siz verirsiniz) -->
<div id="player" style="width: 960px; height: 540px"></div>

<!-- 2) oynatıcıyı yükle -->
<script src="https://assets.webfon.io/player.js"></script>

<!-- 3) kayıt dosyalarıyla mount et -->
<script>
  const player = WebfonPlayer.mount('#player', {
    sources: [
      'https://cdn.example.com/rec/customer_audio.webm',
      'https://cdn.example.com/rec/agent_audio.webm',
      'https://cdn.example.com/rec/customer_video.webm',
      'https://cdn.example.com/rec/agent_video.webm',
      'https://cdn.example.com/rec/screen.webm',
    ],
  });
</script>

player.js global bir WebfonPlayer nesnesi yayınlar ve kendiliğinden mount etmez — oynatıcıyı yukarıdaki gibi siz mount edersiniz, sayfa düzeni tamamen sizde kalır.

npm

React, Vue, Svelte veya herhangi bir bundler kullanan projeler için:

yarn add webfon-client

import { mountPlayer } from 'webfon-client/player';

const player = mountPlayer('#player', {
  sources: [customerAudio, agentAudio, screen],
});

Kaynak listesinde URL yerine File nesneleri de geçebilirsiniz (örn. bir <input type="file"> ya da sürükle-bırak ile seçilen dosyalar).

Oynatıcıyı sürme (API)

WebfonPlayer.mount() (ve npm'de mountPlayer()) bir imperatif handle döndürür. Oynatıcıyı yeniden mount etmeden bu handle üzerinden sürebilirsiniz:

Metod	Açıklama
load(sources)	Kaynak listesini yükle / değiştir — .webm URL veya File dizisi
clear()	Tüm medyayı bırak, boş duruma dön (oynatıcı mount kalır)
play() / pause()	Oynatmayı sürdür / duraklat
seek(saniye)	Mutlak konuma git (kayda göre kırpılır)
getState()	Anlık durum (yüklendi mi, oynuyor mu, süre, tracklar, hız…)
destroy()	Oynatıcıyı kaldır ve kaynakları serbest bırak

player.pause();
player.seek(30);
player.load([url1, url2]);  // başka bir kaydı yükle
player.clear();             // medyayı bırak
player.destroy();           // tamamen kaldır

Gereksinimler

• Kaynak URL'leri HTTPS ve CORS'a açık (Access-Control-Allow-Origin) olmalıdır; aksi halde tarayıcı dosyayı okuyamaz.
• Dosyalar Webfon kayıt altyapısının ürettiği tek-track WebM biçimindedir.
• Oynatma WebCodecs kullanır; güncel bir masaüstü ya da mobil tarayıcı gerekir.

Oynatıcının arayüzünü ve denetimlerini öğrenmek için → Arayüz & Kullanım.