From 777f422873c544f461f9b6af12dd5e5613555b1b Mon Sep 17 00:00:00 2001 From: abdussamedulutas Date: Wed, 17 Jun 2026 13:02:58 +0300 Subject: [PATCH] =?UTF-8?q?#38/#34:=20CanvasCompositor=20ve=20demo=20g?= =?UTF-8?q?=C3=BCncellemesi?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit sdk/webrtc/CanvasCompositor.js (#38): - Gelen video track'lerini tek canvas'ta birleştirme (grid/pip/side-by-side/focus) - OffscreenCanvas öncelikli (DOM gerektirmiyor), yoksa kullanır - setFPS(), setLayout(), setFocus() ile runtime kontrol - stream() → MediaStream; StreamManager.addStream('composite', ...) ile gönderilir - setEncodings() ile bitrate/fps zaten StreamManager üzerinden destekleniyor sdk/webrtc/index.js: CanvasCompositor re-export eklendi public/demos/ (#34): Tüm demo'lar yeni SDK API'sine güncellendi: -

MWSE Sesli Görüşme Demo

Aynı anda birden fazla sekme ya da kullanıcı açın. Odaya katılan herkese - otomatik çift yönlü ses bağlantısı kurulur (P2P WebRTC, max ~10–15 kişi için - mesh topolojisi; daha fazlası için SRS entegrasyonu gerekir). + otomatik çift yönlü ses bağlantısı kurulur (P2P WebRTC mesh, küçük gruplar için).

Bağlanıyor…
- diff --git a/public/demos/chat.html b/public/demos/chat.html index 6479bab..f66ec96 100644 --- a/public/demos/chat.html +++ b/public/demos/chat.html @@ -3,7 +3,6 @@ MWSE — Chat Demo - @@ -37,111 +26,98 @@

MWSE Video Demo

Bağlanıyor… -
+
- diff --git a/sdk/webrtc/CanvasCompositor.js b/sdk/webrtc/CanvasCompositor.js new file mode 100644 index 0000000..43dbb83 --- /dev/null +++ b/sdk/webrtc/CanvasCompositor.js @@ -0,0 +1,220 @@ +// CanvasCompositor — gelen video track'lerini tek bir canvas'ta birleştirir. +// +// Kullanım: +// const comp = new CanvasCompositor({ width: 1280, height: 720, fps: 30 }); +// comp.addTrack('alice', videoTrack); +// comp.addTrack('bob', videoTrack2); +// comp.setLayout('grid'); // 'grid' | 'pip' | 'side-by-side' | 'focus' +// const stream = comp.stream(); // MediaStream → StreamManager.addStream() ile gönder +// comp.destroy(); // cleanup +// +// Ses için AudioContext mix bus: +// const { ctx, dest, stream: audioStream } = MediaSources.createAudioMix(); +// ctx.createMediaStreamSource(peerAudioStream).connect(dest); +// // audioStream'ı da StreamManager.addStream('audio-mix', audioStream) ile gönder +export default class CanvasCompositor { + constructor({ width = 1280, height = 720, fps = 30, background = '#000' } = {}) { + this._width = width; + this._height = height; + this._fps = fps; + this._bg = background; + + // Use OffscreenCanvas when available (no DOM required, runs in workers too). + if (typeof OffscreenCanvas !== 'undefined') { + this._canvas = new OffscreenCanvas(width, height); + } else { + this._canvas = document.createElement('canvas'); + this._canvas.width = width; + this._canvas.height = height; + } + this._ctx = this._canvas.getContext('2d'); + this._tracks = new Map(); // label → { track, video, active } + this._layout = 'grid'; + this._focus = null; // label of the focused track in 'focus' mode + this._timer = null; + this._stream = null; + + this._start(); + } + + // ---- Track management ----------------------------------------------- + + // Add a VideoTrack to the compositor. A hidden