From eb6192960f385b01cdc2d6bbfe1837c7600e8f8a Mon Sep 17 00:00:00 2001 From: rishikanthc Date: Thu, 25 Dec 2025 12:47:23 -0800 Subject: [PATCH] refactor: restrict system audio to Chromium browsers only Removed Firefox/Safari support as only Chromium browsers (Chrome, Edge, Brave) reliably support tab audio capture via getDisplayMedia API. Changes: - Added Chromium browser detection (Chrome, Edge, Brave, Chromium) - Show compatibility error dialog for non-Chromium browsers - Removed all Firefox-specific code and constraints - Simplified UI instructions (tab selection only) - Cleaner error messages focused on tab audio Tested working on: Chrome, Edge, Brave Not supported: Firefox, Safari, other browsers --- .serena/.gitignore | 1 + .serena/project.yml | 84 +++++++++++++++++++ scriberr-icon-dark.svg | 25 ++++++ scriberr-icon-light.svg | 25 ++++++ scriberr_text_logo.svg | 52 ++++++++++++ .../src/components/SystemAudioRecorder.tsx | 70 +++++++++++++--- 6 files changed, 244 insertions(+), 13 deletions(-) create mode 100644 .serena/.gitignore create mode 100644 .serena/project.yml create mode 100644 scriberr-icon-dark.svg create mode 100644 scriberr-icon-light.svg create mode 100644 scriberr_text_logo.svg diff --git a/.serena/.gitignore b/.serena/.gitignore new file mode 100644 index 00000000..14d86ad6 --- /dev/null +++ b/.serena/.gitignore @@ -0,0 +1 @@ +/cache diff --git a/.serena/project.yml b/.serena/project.yml new file mode 100644 index 00000000..e953a1d2 --- /dev/null +++ b/.serena/project.yml @@ -0,0 +1,84 @@ +# list of languages for which language servers are started; choose from: +# al bash clojure cpp csharp csharp_omnisharp +# dart elixir elm erlang fortran go +# haskell java julia kotlin lua markdown +# nix perl php python python_jedi r +# rego ruby ruby_solargraph rust scala swift +# terraform typescript typescript_vts yaml zig +# Note: +# - For C, use cpp +# - For JavaScript, use typescript +# Special requirements: +# - csharp: Requires the presence of a .sln file in the project folder. +# When using multiple languages, the first language server that supports a given file will be used for that file. +# The first language is the default language and the respective language server will be used as a fallback. +# Note that when using the JetBrains backend, language servers are not used and this list is correspondingly ignored. +languages: +- typescript + +# the encoding used by text files in the project +# For a list of possible encodings, see https://docs.python.org/3.11/library/codecs.html#standard-encodings +encoding: "utf-8" + +# whether to use the project's gitignore file to ignore files +# Added on 2025-04-07 +ignore_all_files_in_gitignore: true + +# list of additional paths to ignore +# same syntax as gitignore, so you can use * and ** +# Was previously called `ignored_dirs`, please update your config if you are using that. +# Added (renamed) on 2025-04-07 +ignored_paths: [] + +# whether the project is in read-only mode +# If set to true, all editing tools will be disabled and attempts to use them will result in an error +# Added on 2025-04-18 +read_only: false + +# list of tool names to exclude. We recommend not excluding any tools, see the readme for more details. +# Below is the complete list of tools for convenience. +# To make sure you have the latest list of tools, and to view their descriptions, +# execute `uv run scripts/print_tool_overview.py`. +# +# * `activate_project`: Activates a project by name. +# * `check_onboarding_performed`: Checks whether project onboarding was already performed. +# * `create_text_file`: Creates/overwrites a file in the project directory. +# * `delete_lines`: Deletes a range of lines within a file. +# * `delete_memory`: Deletes a memory from Serena's project-specific memory store. +# * `execute_shell_command`: Executes a shell command. +# * `find_referencing_code_snippets`: Finds code snippets in which the symbol at the given location is referenced. +# * `find_referencing_symbols`: Finds symbols that reference the symbol at the given location (optionally filtered by type). +# * `find_symbol`: Performs a global (or local) search for symbols with/containing a given name/substring (optionally filtered by type). +# * `get_current_config`: Prints the current configuration of the agent, including the active and available projects, tools, contexts, and modes. +# * `get_symbols_overview`: Gets an overview of the top-level symbols defined in a given file. +# * `initial_instructions`: Gets the initial instructions for the current project. +# Should only be used in settings where the system prompt cannot be set, +# e.g. in clients you have no control over, like Claude Desktop. +# * `insert_after_symbol`: Inserts content after the end of the definition of a given symbol. +# * `insert_at_line`: Inserts content at a given line in a file. +# * `insert_before_symbol`: Inserts content before the beginning of the definition of a given symbol. +# * `list_dir`: Lists files and directories in the given directory (optionally with recursion). +# * `list_memories`: Lists memories in Serena's project-specific memory store. +# * `onboarding`: Performs onboarding (identifying the project structure and essential tasks, e.g. for testing or building). +# * `prepare_for_new_conversation`: Provides instructions for preparing for a new conversation (in order to continue with the necessary context). +# * `read_file`: Reads a file within the project directory. +# * `read_memory`: Reads the memory with the given name from Serena's project-specific memory store. +# * `remove_project`: Removes a project from the Serena configuration. +# * `replace_lines`: Replaces a range of lines within a file with new content. +# * `replace_symbol_body`: Replaces the full definition of a symbol. +# * `restart_language_server`: Restarts the language server, may be necessary when edits not through Serena happen. +# * `search_for_pattern`: Performs a search for a pattern in the project. +# * `summarize_changes`: Provides instructions for summarizing the changes made to the codebase. +# * `switch_modes`: Activates modes by providing a list of their names +# * `think_about_collected_information`: Thinking tool for pondering the completeness of collected information. +# * `think_about_task_adherence`: Thinking tool for determining whether the agent is still on track with the current task. +# * `think_about_whether_you_are_done`: Thinking tool for determining whether the task is truly completed. +# * `write_memory`: Writes a named memory (for future reference) to Serena's project-specific memory store. +excluded_tools: [] + +# initial prompt for the project. It will always be given to the LLM upon activating the project +# (contrary to the memories, which are loaded on demand). +initial_prompt: "" + +project_name: "Scriberr" +included_optional_tools: [] diff --git a/scriberr-icon-dark.svg b/scriberr-icon-dark.svg new file mode 100644 index 00000000..5ba3c8b4 --- /dev/null +++ b/scriberr-icon-dark.svg @@ -0,0 +1,25 @@ + + + + + + + + + + diff --git a/scriberr-icon-light.svg b/scriberr-icon-light.svg new file mode 100644 index 00000000..79cf4949 --- /dev/null +++ b/scriberr-icon-light.svg @@ -0,0 +1,25 @@ + + + + + + + + + + diff --git a/scriberr_text_logo.svg b/scriberr_text_logo.svg new file mode 100644 index 00000000..5580d988 --- /dev/null +++ b/scriberr_text_logo.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + diff --git a/web/frontend/src/components/SystemAudioRecorder.tsx b/web/frontend/src/components/SystemAudioRecorder.tsx index 77ea3e52..f5396c2a 100644 --- a/web/frontend/src/components/SystemAudioRecorder.tsx +++ b/web/frontend/src/components/SystemAudioRecorder.tsx @@ -73,15 +73,33 @@ export function SystemAudioRecorder({ const { toast } = useToast(); - // Browser compatibility check + // Browser compatibility check - only Chromium browsers supported const checkCompatibility = (): { supported: boolean; error?: string } => { + // Check if browser supports getDisplayMedia at all if (!navigator.mediaDevices?.getDisplayMedia) { return { supported: false, error: - "Your browser doesn't support system audio capture. Please use Chrome, Edge, or Firefox.", + "Your browser doesn't support screen capture. Please use Chrome, Edge, or Brave.", }; } + + // Check if it's a Chromium-based browser + const userAgent = navigator.userAgent.toLowerCase(); + const isChromium = userAgent.includes('chrome') || + userAgent.includes('chromium') || + userAgent.includes('edg/') || + userAgent.includes('brave'); + + if (!isChromium) { + return { + supported: false, + error: + "System audio recording is only supported on Chromium-based browsers (Chrome, Edge, Brave). " + + "Please switch to one of these browsers to use this feature.", + }; + } + return { supported: true }; }; @@ -247,6 +265,13 @@ export function SystemAudioRecorder({ }, }); + // Debug: Log what tracks we got + console.log("Display stream tracks:", { + video: displayStream.getVideoTracks().length, + audio: displayStream.getAudioTracks().length, + allTracks: displayStream.getTracks().map(t => ({ kind: t.kind, label: t.label })) + }); + // Stop the video track immediately since we only want audio const videoTrack = displayStream.getVideoTracks()[0]; if (videoTrack) { @@ -257,7 +282,15 @@ export function SystemAudioRecorder({ // Create a new MediaStream with only audio tracks const audioTracks = displayStream.getAudioTracks(); if (audioTracks.length === 0) { - throw new Error("NotFoundError"); + alert( + "No audio track found!\n\n" + + "Make sure to:\n" + + "1. Select a Chrome TAB (not window or screen)\n" + + "2. Check the 'Share tab audio' checkbox\n" + + "3. Choose a tab that's actually playing audio" + ); + cleanupStreams(); + return; } const sysStream = new MediaStream(audioTracks); @@ -441,7 +474,12 @@ export function SystemAudioRecorder({ // Render browser compatibility error if (compatibilityError) { return ( - + { + if (!open) { + setCompatibilityError(null); + onClose(); + } + }}> @@ -470,7 +508,10 @@ export function SystemAudioRecorder({
-
@@ -725,19 +766,22 @@ export function SystemAudioRecorder({ 2. -
-
- Chrome/Edge: Select "Chrome Tab", choose your tab, and check "Share tab audio" -
-
- Firefox: Select "Application Window", choose the window with audio (e.g., browser window), and check "Share system audio" -
-
+ + Select a Chrome Tab from the browser picker (not window or screen) +
  • 3. + + Check "Share tab audio" checkbox at the bottom + +
    • +
  • + + 4. + Allow microphone access when prompted (optional)