录屏下载

example/src/index.css

@@ -18,6 +18,7 @@ code {
 
 a {
   color: #5a8bff;
+  text-decoration: none;
 }
 
 a:hover {

packages/components/src/components/ControlsView.tsx

@@ -15,13 +15,7 @@ export interface ControlsProps {
   onLeave?: (room: Room) => void;
 }
 
-export const ControlsView = ({
-                               room,
-                               enableScreenShare,
-                               enableAudio,
-                               enableVideo,
-                               onLeave,
-                             }: ControlsProps) => {
+export const ControlsView = ({room, enableScreenShare, enableAudio, enableVideo, onLeave,}: ControlsProps) => {
   const {cameraPublication: camPub, microphonePublication: micPub} = useParticipant(
     room.localParticipant,
   );
@@ -99,7 +93,7 @@ export const ControlsView = ({
           // room.localParticipant
           //   .setScreenShareEnabled(!enabled)
           //   .finally(() => setScreenButtonDisabled(false));
-          // 共享视频，并下载到本地
+          // 共享视频
           shareVideo().finally(() => setScreenButtonDisabled(false));
         }}
       />
@@ -107,6 +101,8 @@ export const ControlsView = ({
   }
 
   // 新增代码
+  const [videoDownloadUrl, setVideoDownloadUrl] = React.useState('');
+
   const shareVideo = async () => {
     const stream = await (window as any).navigator.mediaDevices.getDisplayMedia();
     const recoder = new (window as any).MediaRecorder(stream);
@@ -116,10 +112,7 @@ export const ControlsView = ({
       recoder.stop();
     });
     recoder.addEventListener('dataavailable', (evt: any) => {
-      const a = document.createElement('a');
-      a.href = URL.createObjectURL(evt.data);
-      a.download = 'zoom.webm';
-      a.click();
+      setVideoDownloadUrl(window.URL.createObjectURL(evt.data));
     });
   };
 
@@ -133,6 +126,13 @@ export const ControlsView = ({
       {muteButton}
       {videoButton}
       {screenButton}
+       
+      {videoDownloadUrl && (
+        <a href={videoDownloadUrl} className="_styles-module__button__hRq5k" download="zoom.webm">
+          Save video
+        </a>
+      )}
+      &nbsp;
       <button className="chat-btn round" onClick={showChat}>
         Chat
       </button>