Media Recording: Fix Canvas audio/controls (#12316)

GoogleForCreators · Sep 19, 2022 · 6243849 · 6243849
1 parent 5657707
commit 6243849
Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/packages/story-editor/src/components/mediaRecording/playPauseButton.js b/packages/story-editor/src/components/mediaRecording/playPauseButton.js
@@ -34,6 +34,7 @@ const ICON_SVG_SIZE = 72;
 
 const Controls = styled.div`
   position: absolute;
+  z-index: 2;
 `;
 
 const ButtonWrapper = styled.button.attrs({ tabIndex: -1 })`

diff --git a/packages/story-editor/src/components/mediaRecording/playbackMedia.js b/packages/story-editor/src/components/mediaRecording/playbackMedia.js
@@ -160,7 +160,12 @@ function PlaybackMedia() {
       if (hasVideoEffect && canvasRef.current) {
         canvasRef.current.getContext('2d');
         setCanvasNode(canvasRef.current);
-        setCanvasStream(canvasRef.current.captureStream());
+        const canvasStreamRaw = canvasRef.current.captureStream();
+        const liveStreamAudio = liveStream.getAudioTracks();
+        if (liveStreamAudio.length > 0) {
+          canvasStreamRaw.addTrack(liveStreamAudio[0]);
+        }
+        setCanvasStream(canvasStreamRaw);
       }
       if (videoEffect === VIDEO_EFFECTS.BLUR) {
         selfieSegmentation.onResults(onSelfieSegmentationResults);
@@ -187,6 +192,7 @@ function PlaybackMedia() {
       }
     }
     run();
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- including liveStream will cause freeze
   }, [videoEffect, hasVideoEffect, streamNode, setCanvasStream, setCanvasNode]);
 
   // Only previewing a gif means that the play button is hidden,

diff --git a/packages/story-editor/src/components/mediaRecording/videoMode.js b/packages/story-editor/src/components/mediaRecording/videoMode.js
@@ -29,6 +29,7 @@ import { Switch } from '../form';
 
 const Wrapper = styled.div`
   position: absolute;
+  z-index: 2;
   top: 20px;
   right: 20px;
   width: 70px;