Add region screen recording (#791)

* Add region screen recording

* Update readme

* Use get-default-sink and software encoding

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>

* Remove log file creation logic

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>

---------

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>

README.md

@@ -59,7 +59,7 @@ power-profiles-daemon
 grimblast
 
 ## To record screen through the dashboard record shortcut
-gpu-screen-recorder
+wf-recorder
 
 ## To enable the eyedropper color picker with the default snapshot shortcut in the dashboard
 hyprpicker
@@ -88,7 +88,7 @@ pacman:
 AUR:
 
 ```bash
-yay -S --needed aylurs-gtk-shell-git grimblast-git gpu-screen-recorder-git hyprpicker matugen-bin python-gpustat hyprsunset-git
+yay -S --needed aylurs-gtk-shell-git grimblast-git wf-recorder-git hyprpicker matugen-bin python-gpustat hyprsunset-git
 ```
 
 ### Fedora
@@ -104,7 +104,7 @@ sudo dnf config-manager --save --setopt=copr:copr.fedorainfracloud.org:heus-sueh
 DNF:
 
 ```sh
-sudo dnf install wireplumber upower libgtop2 bluez bluez-tools grimblast hyprpicker btop NetworkManager wl-clipboard swww brightnessctl gnome-bluetooth aylurs-gtk-shell power-profiles-daemon gvfs nodejs
+sudo dnf install wireplumber upower libgtop2 bluez bluez-tools grimblast hyprpicker btop NetworkManager wl-clipboard swww brightnessctl gnome-bluetooth aylurs-gtk-shell power-profiles-daemon gvfs nodejs wf-recorder
 ```
 
 npm:
@@ -113,12 +113,6 @@ npm:
 npm install -g sass
 ```
 
-flatpak:
-
-```bash
-flatpak install flathub --system com.dec05eba.gpu_screen_recorder
-```
-
 #### Optional Dependencies
 
 pip:

scripts/screen_record.sh

@@ -1,9 +1,12 @@
 #!/usr/bin/env bash
+# Requires wf-recorder: https://github.com/ammen99/wf-recorder
 
 outputDir="$HOME/Videos/Screencasts"
+defaultSink=$(pactl get-default-sink)
+WF_RECORDER_OPTS="--audio=$defaultSink.monitor -c libx264rgb"
 
 checkRecording() {
-    if pgrep -f "gpu-screen-recorder" >/dev/null; then
+    if pgrep -f "wf-recorder" >/dev/null; then
         return 0
     else
         return 1
@@ -18,24 +21,24 @@ startRecording() {
 
     target="$2"
 
-    outputFile="recording_$(date +%Y-%m-%d_%H-%M-%S).mp4"
+    outputFile="recording_$(date +%Y-%m-%d_%H-%M-%S)"
-    outputPath="$outputDir/$outputFile"
+    outputPath="$outputDir/${outputFile}.mp4"
     mkdir -p "$outputDir"
 
-    if [ -z "$target" ]; then
+    if [ "$target" == "screen" ]; then
-        echo "Usage: $0 start screen [screen_name]"
+        monitor_info=$(hyprctl -j monitors | jq -r ".[] | select(.name == \"$3\")")
+        w=$(echo $monitor_info | jq -r '.width')
+        h=$(echo $monitor_info | jq -r '.height')
+        x=$(echo $monitor_info | jq -r '.x')
+        y=$(echo $monitor_info | jq -r '.y')
+        wf-recorder $WF_RECORDER_OPTS --geometry "${x},${y} ${w}x${h}" --file "$outputPath" &
+    elif [ "$target" == "region" ]; then
+        wf-recorder $WF_RECORDER_OPTS --geometry "$(slurp)" --file "$outputPath" &
+    else
+        echo "Usage: $0 start {region|screen [screen_name]}"
         exit 1
     fi
-
+    disown "$(jobs -p | tail -n 1)"
-    GPU_TYPE=$(lspci | grep -E 'VGA|3D' | grep -Ev '00:02.0|Integrated' >/dev/null && echo "" || echo "-encoder cpu")
-
-    gpu-screen-recorder \
-        -w "$target" \
-        -f 60 \
-        -k h264 \
-        -a "$(pactl get-default-sink).monitor" \
-        -o "$outputPath" \
-        $GPU_TYPE &
 
     echo "Recording started. Output will be saved to $outputPath"
 }
@@ -46,7 +49,7 @@ stopRecording() {
         exit 1
     fi
 
-    pkill -SIGINT -f gpu-screen-recorder
+    pkill -SIGINT -f wf-recorder
 
     recentFile=$(ls -t "$outputDir"/recording_*.mp4 | head -n 1)
 
@@ -74,7 +77,7 @@ status)
     fi
     ;;
 *)
-    echo "Usage: $0 {start [screen_name|window_id]|stop|status}"
+    echo "Usage: $0 {start [screen screen_name|region]|stop|status}"
     exit 1
     ;;
 esac

src/components/menus/dashboard/shortcuts/buttons/RecordingButton.tsx

@@ -29,13 +29,27 @@ const MonitorListDropdown = (): JSX.Element => {
 
                             App.get_window('dashboardmenu')?.set_visible(false);
 
-                            execAsync(`${SRC_DIR}/scripts/screen_record.sh start ${monitor.name}`).catch((err) =>
+                            execAsync(`${SRC_DIR}/scripts/screen_record.sh start screen ${monitor.name}`).catch((err) =>
                                 console.error(err),
                             );
                         }}
                     />
                 ));
             })}
+            <MenuItem
+                label="Region"
+                onButtonPressEvent={(_, event) => {
+                    const buttonClicked = event.get_button()[1];
+
+                    if (buttonClicked !== Gdk.BUTTON_PRIMARY) {
+                        return;
+                    }
+
+                    App.get_window('dashboardmenu')?.set_visible(false);
+
+                    execAsync(`${SRC_DIR}/scripts/screen_record.sh start region`).catch((err) => console.error(err));
+                }}
+            />
         </Menu>
     );
 };