tmk3ki/aibow
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

実況モードの失敗を可視化(エラーレスポンスをconsole.errorに出力、解像度/フレームレート制約で安定化)。チャットパネルのmin-height:0不足によるレイアウト圧迫バグを修正、100vh→100svhに変更

Browse source
This commit is contained in:
tmk3ki 2026-07-22 12:12:19 +09:00
parent d34eec75d2
commit d302287dd7
1 changed files with 14 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
web/index.html
View file

@ -41,8 +41,8 @@
font-size: 20px; line-height: 1; vertical-align: middle; user-select: none; font-size: 20px; line-height: 1; vertical-align: middle; user-select: none;
display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
} }
.app { display: grid; grid-template-columns: 1fr 380px; height: 100vh; } .app { display: grid; grid-template-columns: 1fr 380px; height: 100vh; height: 100svh; }
.videoPane { display: flex; flex-direction: column; min-width: 0; padding: 12px; gap: 10px; position: relative; } .videoPane { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 12px; gap: 10px; position: relative; }
.topBar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .topBar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 6px; margin-right: auto; } .brand { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 6px; margin-right: auto; }
@ -126,7 +126,8 @@
.searchStage .searchList { flex: 1; overflow-y: auto; padding: 8px; } .searchStage .searchList { flex: 1; overflow-y: auto; padding: 8px; }
.chatPane { .chatPane {
display: flex; flex-direction: column; min-width: 0; display: flex; flex-direction: column; min-width: 0; min-height: 0;
max-height: 100vh; max-height: 100svh;
background: var(--surface); border-left: 1px solid var(--outline); background: var(--surface); border-left: 1px solid var(--outline);
} }
.chatHeader { padding: 14px 16px; border-bottom: 1px solid var(--outline); display: flex; flex-direction: column; gap: 8px; } .chatHeader { padding: 14px 16px; border-bottom: 1px solid var(--outline); display: flex; flex-direction: column; gap: 8px; }
@ -609,7 +610,11 @@ async function sendWatchClip(blob) {
form.append('history', JSON.stringify(chatHistory.slice(-6))); form.append('history', JSON.stringify(chatHistory.slice(-6)));
try { try {
const res = await fetch('/api/watch', { method: 'POST', body: form }); const res = await fetch('/api/watch', { method: 'POST', body: form });
if (!res.ok) return; if (!res.ok) {
const bodyText = await res.text().catch(() => '');
console.error('watch clip request failed', res.status, bodyText, 'clip size(bytes):', blob.size);
return;
}
const data = await res.json(); const data = await res.json();
const reaction = (data.reaction || '').trim(); const reaction = (data.reaction || '').trim();
const now = Date.now(); const now = Date.now();
@ -629,11 +634,15 @@ async function startWatchMode() {
return; return;
} }
try { try {
watchStream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }); watchStream = await navigator.mediaDevices.getDisplayMedia({
video: { width: { ideal: 960 }, height: { ideal: 540 }, frameRate: { ideal: 5, max: 10 } },
audio: true,
});
} catch (e) { } catch (e) {
console.error('getDisplayMedia failed', e); console.error('getDisplayMedia failed', e);
return; return;
} }
console.log('watch stream tracks:', watchStream.getVideoTracks().map(t => t.getSettings()), watchStream.getAudioTracks().map(t => t.getSettings()));
if (watchStream.getAudioTracks().length === 0) { if (watchStream.getAudioTracks().length === 0) {
alert('音声トラックが取得できませんでした。共有元は「Chromeタブ」を選び、「タブの音声を共有」にチェックを入れ直してください(画面全体/ウィンドウ共有だとmacOSでは音声が乗りません)。'); alert('音声トラックが取得できませんでした。共有元は「Chromeタブ」を選び、「タブの音声を共有」にチェックを入れ直してください(画面全体/ウィンドウ共有だとmacOSでは音声が乗りません)。');
watchStream.getTracks().forEach((t) => t.stop()); watchStream.getTracks().forEach((t) => t.stop());