Add ADB-based Android screen capture engine with display picker integration
New scrcpy/ADB capture engine that captures Android device screens over ADB using screencap polling. Supports USB and WiFi ADB connections with device auto-discovery. Engine-aware display picker shows Android devices when scrcpy engine is selected, with inline ADB connect form for WiFi devices. Key changes: - New scrcpy_engine.py using adb screencap polling (~1-2 FPS over WiFi) - Engine-aware GET /config/displays?engine_type= API - ADB connect/disconnect API endpoints (POST /adb/connect, /adb/disconnect) - Display picker supports engine-specific device lists - Stream/test modals pass engine type to display picker - Test template handler changed to sync def to prevent event loop blocking - Restart script merges registry PATH for newly-installed tools - All engines (including unavailable) shown in engine list with status flag Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,29 +1,38 @@
|
||||
/**
|
||||
* Display picker lightbox — display selection for streams and tests.
|
||||
* Supports engine-specific displays (e.g. scrcpy → Android devices).
|
||||
*/
|
||||
|
||||
import {
|
||||
_cachedDisplays, _displayPickerCallback, _displayPickerSelectedIndex,
|
||||
set_displayPickerCallback, set_displayPickerSelectedIndex,
|
||||
set_displayPickerCallback, set_displayPickerSelectedIndex, set_cachedDisplays,
|
||||
} from '../core/state.js';
|
||||
import { t } from '../core/i18n.js';
|
||||
import { loadDisplays } from '../core/api.js';
|
||||
import { fetchWithAuth } from '../core/api.js';
|
||||
import { showToast } from '../core/ui.js';
|
||||
|
||||
export function openDisplayPicker(callback, selectedIndex) {
|
||||
/** Currently active engine type for the picker (null = desktop monitors). */
|
||||
let _pickerEngineType = null;
|
||||
|
||||
export function openDisplayPicker(callback, selectedIndex, engineType = null) {
|
||||
set_displayPickerCallback(callback);
|
||||
set_displayPickerSelectedIndex((selectedIndex !== undefined && selectedIndex !== null && selectedIndex !== '') ? Number(selectedIndex) : null);
|
||||
_pickerEngineType = engineType || null;
|
||||
const lightbox = document.getElementById('display-picker-lightbox');
|
||||
|
||||
lightbox.classList.add('active');
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
if (_cachedDisplays && _cachedDisplays.length > 0) {
|
||||
// Always fetch fresh when engine type is specified (different list each time)
|
||||
if (_pickerEngineType) {
|
||||
_fetchAndRenderEngineDisplays(_pickerEngineType);
|
||||
} else if (_cachedDisplays && _cachedDisplays.length > 0) {
|
||||
renderDisplayPickerLayout(_cachedDisplays);
|
||||
} else {
|
||||
const canvas = document.getElementById('display-picker-canvas');
|
||||
canvas.innerHTML = '<div class="loading-spinner"></div>';
|
||||
loadDisplays().then(() => {
|
||||
// Re-import to get updated value
|
||||
import('../core/state.js').then(({ _cachedDisplays: displays }) => {
|
||||
if (displays && displays.length > 0) {
|
||||
renderDisplayPickerLayout(displays);
|
||||
@@ -36,11 +45,86 @@ export function openDisplayPicker(callback, selectedIndex) {
|
||||
});
|
||||
}
|
||||
|
||||
async function _fetchAndRenderEngineDisplays(engineType) {
|
||||
const canvas = document.getElementById('display-picker-canvas');
|
||||
canvas.innerHTML = '<div class="loading-spinner"></div>';
|
||||
|
||||
try {
|
||||
const resp = await fetchWithAuth(`/config/displays?engine_type=${engineType}`);
|
||||
if (!resp.ok) throw new Error(`${resp.status}`);
|
||||
const data = await resp.json();
|
||||
const displays = data.displays || [];
|
||||
|
||||
// Store in cache so selectDisplay() can look them up
|
||||
set_cachedDisplays(displays);
|
||||
|
||||
if (displays.length > 0) {
|
||||
renderDisplayPickerLayout(displays, engineType);
|
||||
} else {
|
||||
_renderEmptyAndroidPicker(canvas);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching engine displays:', error);
|
||||
canvas.innerHTML = `<div class="loading">${t('displays.failed')}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function _renderEmptyAndroidPicker(canvas) {
|
||||
canvas.innerHTML = `
|
||||
<div class="loading">${t('displays.picker.no_android')}</div>
|
||||
${_buildAdbConnectHtml()}
|
||||
`;
|
||||
}
|
||||
|
||||
function _buildAdbConnectHtml() {
|
||||
return `
|
||||
<div class="adb-connect-form" style="margin-top: 1rem; display: flex; gap: 0.5rem; align-items: center; justify-content: center;">
|
||||
<input type="text" id="adb-connect-ip"
|
||||
placeholder="${t('displays.picker.adb_connect.placeholder')}"
|
||||
style="width: 200px; padding: 0.35rem 0.5rem; border-radius: 4px; border: 1px solid var(--border-color);">
|
||||
<button class="btn btn-primary btn-sm" onclick="window._adbConnectFromPicker()">
|
||||
${t('displays.picker.adb_connect.button')}
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/** Called from the inline Connect button inside the display picker. */
|
||||
window._adbConnectFromPicker = async function () {
|
||||
const input = document.getElementById('adb-connect-ip');
|
||||
if (!input) return;
|
||||
const address = input.value.trim();
|
||||
if (!address) return;
|
||||
|
||||
input.disabled = true;
|
||||
try {
|
||||
const resp = await fetchWithAuth('/adb/connect', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ address }),
|
||||
});
|
||||
if (!resp.ok) {
|
||||
const err = await resp.json().catch(() => ({}));
|
||||
throw new Error(err.detail || 'Connection failed');
|
||||
}
|
||||
showToast(t('displays.picker.adb_connect.success'), 'success');
|
||||
|
||||
// Refresh the picker with updated device list
|
||||
if (_pickerEngineType) {
|
||||
await _fetchAndRenderEngineDisplays(_pickerEngineType);
|
||||
}
|
||||
} catch (error) {
|
||||
showToast(`${t('displays.picker.adb_connect.error')}: ${error.message}`, 'error');
|
||||
} finally {
|
||||
if (input) input.disabled = false;
|
||||
}
|
||||
};
|
||||
|
||||
export function closeDisplayPicker(event) {
|
||||
if (event && event.target && event.target.closest('.display-picker-content')) return;
|
||||
const lightbox = document.getElementById('display-picker-lightbox');
|
||||
lightbox.classList.remove('active');
|
||||
set_displayPickerCallback(null);
|
||||
_pickerEngineType = null;
|
||||
}
|
||||
|
||||
export function selectDisplay(displayIndex) {
|
||||
@@ -54,7 +138,7 @@ export function selectDisplay(displayIndex) {
|
||||
});
|
||||
}
|
||||
|
||||
export function renderDisplayPickerLayout(displays) {
|
||||
export function renderDisplayPickerLayout(displays, engineType = null) {
|
||||
const canvas = document.getElementById('display-picker-canvas');
|
||||
|
||||
if (!displays || displays.length === 0) {
|
||||
@@ -97,11 +181,18 @@ export function renderDisplayPickerLayout(displays) {
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
canvas.innerHTML = `
|
||||
let html = `
|
||||
<div class="layout-container" style="width: 100%; padding-bottom: ${aspect * 100}%; position: relative;">
|
||||
${displayElements}
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Show ADB connect form below devices for scrcpy engine
|
||||
if (engineType === 'scrcpy') {
|
||||
html += _buildAdbConnectHtml();
|
||||
}
|
||||
|
||||
canvas.innerHTML = html;
|
||||
}
|
||||
|
||||
export function formatDisplayLabel(displayIndex, display) {
|
||||
|
||||
@@ -53,6 +53,7 @@ async function loadCaptureTemplates() {
|
||||
}
|
||||
|
||||
function getEngineIcon(engineType) {
|
||||
if (engineType === 'scrcpy') return '📱';
|
||||
return '🚀';
|
||||
}
|
||||
|
||||
@@ -270,8 +271,15 @@ function collectEngineConfig() {
|
||||
|
||||
async function loadDisplaysForTest() {
|
||||
try {
|
||||
if (!_cachedDisplays) {
|
||||
const response = await fetchWithAuth('/config/displays');
|
||||
// Use engine-specific display list when testing a scrcpy template
|
||||
const engineType = window.currentTestingTemplate?.engine_type;
|
||||
const url = engineType === 'scrcpy'
|
||||
? `/config/displays?engine_type=scrcpy`
|
||||
: '/config/displays';
|
||||
|
||||
// Always refetch for scrcpy (devices may change); use cache for desktop
|
||||
if (!_cachedDisplays || engineType === 'scrcpy') {
|
||||
const response = await fetchWithAuth(url);
|
||||
if (!response.ok) throw new Error(`Failed to load displays: ${response.status}`);
|
||||
const displaysData = await response.json();
|
||||
set_cachedDisplays(displaysData.displays || []);
|
||||
@@ -800,6 +808,9 @@ export async function editStream(streamId) {
|
||||
}
|
||||
}
|
||||
|
||||
/** Track which engine type the stream-modal displays were loaded for. */
|
||||
let _streamModalDisplaysEngine = null;
|
||||
|
||||
async function populateStreamModalDropdowns() {
|
||||
const [displaysRes, captureTemplatesRes, streamsRes, ppTemplatesRes] = await Promise.all([
|
||||
fetch(`${API_BASE}/config/displays`, { headers: getHeaders() }),
|
||||
@@ -812,6 +823,7 @@ async function populateStreamModalDropdowns() {
|
||||
const displaysData = await displaysRes.json();
|
||||
set_cachedDisplays(displaysData.displays || []);
|
||||
}
|
||||
_streamModalDisplaysEngine = null; // desktop displays loaded
|
||||
|
||||
if (!document.getElementById('stream-display-index').value && _cachedDisplays && _cachedDisplays.length > 0) {
|
||||
const primary = _cachedDisplays.find(d => d.is_primary) || _cachedDisplays[0];
|
||||
@@ -826,11 +838,15 @@ async function populateStreamModalDropdowns() {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = tmpl.id;
|
||||
opt.dataset.name = tmpl.name;
|
||||
opt.dataset.engineType = tmpl.engine_type;
|
||||
opt.textContent = `${getEngineIcon(tmpl.engine_type)} ${tmpl.name}`;
|
||||
templateSelect.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
// When template changes, refresh displays if engine type switched
|
||||
templateSelect.addEventListener('change', _onCaptureTemplateChanged);
|
||||
|
||||
const sourceSelect = document.getElementById('stream-source');
|
||||
sourceSelect.innerHTML = '';
|
||||
if (streamsRes.ok) {
|
||||
@@ -863,6 +879,47 @@ async function populateStreamModalDropdowns() {
|
||||
}
|
||||
|
||||
_autoGenerateStreamName();
|
||||
|
||||
// If the first template is an scrcpy engine, reload displays immediately
|
||||
const firstOpt = templateSelect.selectedOptions[0];
|
||||
if (firstOpt?.dataset?.engineType === 'scrcpy') {
|
||||
await _refreshStreamDisplaysForEngine('scrcpy');
|
||||
}
|
||||
}
|
||||
|
||||
async function _onCaptureTemplateChanged() {
|
||||
const templateSelect = document.getElementById('stream-capture-template');
|
||||
const engineType = templateSelect.selectedOptions[0]?.dataset?.engineType || null;
|
||||
const needsEngineDisplays = engineType === 'scrcpy';
|
||||
const currentEngine = needsEngineDisplays ? engineType : null;
|
||||
|
||||
// Only refetch if the engine category actually changed
|
||||
if (currentEngine !== _streamModalDisplaysEngine) {
|
||||
await _refreshStreamDisplaysForEngine(currentEngine);
|
||||
}
|
||||
_autoGenerateStreamName();
|
||||
}
|
||||
|
||||
async function _refreshStreamDisplaysForEngine(engineType) {
|
||||
_streamModalDisplaysEngine = engineType;
|
||||
const url = engineType ? `/config/displays?engine_type=${engineType}` : '/config/displays';
|
||||
try {
|
||||
const resp = await fetchWithAuth(url);
|
||||
if (resp.ok) {
|
||||
const data = await resp.json();
|
||||
set_cachedDisplays(data.displays || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error refreshing displays for engine:', error);
|
||||
}
|
||||
|
||||
// Reset display selection and pick the first available
|
||||
document.getElementById('stream-display-index').value = '';
|
||||
document.getElementById('stream-display-picker-label').textContent = t('displays.picker.select');
|
||||
if (_cachedDisplays && _cachedDisplays.length > 0) {
|
||||
const primary = _cachedDisplays.find(d => d.is_primary) || _cachedDisplays[0];
|
||||
onStreamDisplaySelected(primary.index, primary);
|
||||
}
|
||||
}
|
||||
|
||||
export async function saveStream() {
|
||||
|
||||
Reference in New Issue
Block a user