chore: dispatch starting_recording and stop_recording. (#342)

Co-authored-by: Ming Xu <albertxu@amazon.com>

backend/fastrtc/webrtc.py

@@ -57,7 +57,7 @@ class WebRTC(Component, WebRTCConnectionMixin):
     Demos: video_identity_2
     """
 
-    EVENTS = ["tick", "state_change", "submit"]
+    EVENTS = ["tick", "state_change", "submit", "start_recording", "stop_recording"]
     data_model = WebRTCModel
 
     def __init__(

frontend/Index.svelte

@@ -208,6 +208,8 @@
       {pulse_color}
       {button_labels}
       {variant}
+      on:start_recording={() => gradio.dispatch("start_recording")}
+      on:stop_recording={() => gradio.dispatch("stop_recording")}
       on:tick={() => gradio.dispatch("tick")}
       on:error={({ detail }) => gradio.dispatch("error", detail)}
       on:warning={({ detail }) => gradio.dispatch("warning", detail)}

frontend/shared/InteractiveAudio.svelte

@@ -104,6 +104,8 @@
     error: string;
     play: undefined;
     stop: undefined;
+    start_recording: undefined;
+    stop_recording: undefined;
   }>();
 
   async function access_mic(): Promise<void> {
@@ -147,6 +149,7 @@
 
   async function start_stream(): Promise<void> {
     if (stream_state === "open") {
+      dispatch("stop_recording");
       stop(pc);
       stream_state = "closed";
       _time_limit = null;
@@ -154,6 +157,8 @@
       await server.quit_output_stream({ webrtc_id: _webrtc_id });
       return;
     }
+
+    dispatch("start_recording");
     _webrtc_id = Math.random().toString(36).substring(2);
     value.webrtc_id = _webrtc_id;
     stream_state = "waiting";
@@ -325,6 +330,8 @@
     bind:this={audio_player}
     on:ended={() => dispatch("stop")}
     on:play={() => dispatch("play")}
+    on:start_recording
+    on:stop_recording
   />
   {#if variant === "textbox"}
     <TextboxWithMic

frontend/shared/Webcam.svelte

@@ -146,6 +146,7 @@
 
   async function start_webrtc(): Promise<void> {
     if (stream_state === "closed") {
+      dispatch("start_recording");
       await server.turn().then((rtc_configuration_) => {
         if (rtc_configuration_.error) {
           dispatch("error", rtc_configuration_.error);
@@ -207,6 +208,7 @@
           stream_state = "closed";
         });
     } else {
+      dispatch("stop_recording");
       stop(pc);
       stream_state = "closed";
       _time_limit = null;