Send component data on stop_recording event (#4554)

* Send audio data

* Fix webcam input

* CHANGELOG

CHANGELOG.md

@@ -10,6 +10,7 @@
 - Restored missing imports in `gr.components` by [@abidlabs](https://github.com/abidlabs) in [PR 4566](https://github.com/gradio-app/gradio/pull/4566)
 - Fix bug where `select` event was not triggered in `gr.Gallery` if `height` was set to be large with `allow_preview=False` by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4551](https://github.com/gradio-app/gradio/pull/4551)
 - Fix bug where setting `visible=False` in `gr.Group` event did not work by [@abidlabs](https://github.com/abidlabs) in [PR 4567](https://github.com/gradio-app/gradio/pull/4567)
+- Send captured data in `stop_recording` event for `gr.Audio` and `gr.Video` components by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4554](https://github.com/gradio-app/gradio/pull/4554)
 
 ## Other Changes:
 

js/audio/src/Audio.svelte

@@ -86,7 +86,7 @@
 
 	const dispatch_blob = async (
 		blobs: Array<Uint8Array> | Blob[],
-		event: "stream" | "change"
+		event: "stream" | "change" | "stop_recording"
 	) => {
 		let audio_blob = new Blob(blobs, { type: "audio/wav" });
 		value = {
@@ -150,6 +150,7 @@
 			recorder.addEventListener("stop", async () => {
 				recording = false;
 				await dispatch_blob(audio_chunks, "change");
+				await dispatch_blob(audio_chunks, "stop_recording");
 				audio_chunks = [];
 			});
 		}
@@ -185,7 +186,6 @@
 	});
 
 	const stop = async () => {
-		dispatch("stop_recording");
 		recorder.stop();
 		if (streaming) {
 			recording = false;

js/image/src/Webcam.svelte

@@ -74,7 +74,6 @@
 
 	function take_recording() {
 		if (recording) {
-			dispatch("stop_recording");
 			media_recorder.stop();
 			let video_blob = new Blob(recorded_blobs, { type: mimeType });
 			let ReaderObj = new FileReader();
@@ -85,6 +84,7 @@
 						name: "sample." + mimeType.substring(6),
 						is_example: false
 					});
+					dispatch("stop_recording");
 				}
 			};
 			ReaderObj.readAsDataURL(video_blob);