-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(screensharing): move live preview to a new component
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
- Loading branch information
Showing
2 changed files
with
124 additions
and
90 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
119 changes: 119 additions & 0 deletions
119
src/talk/renderer/screensharing/DesktopMediaSourcePreviewLive.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| <!-- | ||
| - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors | ||
| - SPDX-License-Identifier: AGPL-3.0-or-later | ||
| --> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { onBeforeUnmount, onMounted, ref } from 'vue' | ||
| import type { ScreensharingSourceId } from './screensharing.types.ts' | ||
|
|
||
| const props = defineProps<{ | ||
| mediaSourceId: ScreensharingSourceId | ||
| }>() | ||
|
|
||
| const emit = defineEmits<{ | ||
| (event: 'suspend'): void | ||
| }>() | ||
|
|
||
| const videoElement = ref<HTMLVideoElement | null>(null) | ||
| let stream: MediaStream | null = null | ||
|
|
||
| /** | ||
| * Get the stream for the media source | ||
| * @param mediaSourceId - The media source ID | ||
| */ | ||
| function getStreamForMediaSource(mediaSourceId: ScreensharingSourceId) { | ||
| const MAX_PREVIEW_SIZE = 320 | ||
| // Special case for sharing all the screens with desktop audio in Electron | ||
| // In this case, it must have exactly these constraints | ||
| // "entire-desktop:0:0" is a custom sourceId for this specific case | ||
| const constraints = mediaSourceId === 'entire-desktop:0:0' | ||
| ? { | ||
| audio: { | ||
| mandatory: { | ||
| chromeMediaSource: 'desktop', | ||
| }, | ||
| }, | ||
| video: { | ||
| mandatory: { | ||
| chromeMediaSource: 'desktop', | ||
| maxWidth: MAX_PREVIEW_SIZE, | ||
| maxHeight: MAX_PREVIEW_SIZE, | ||
| }, | ||
| }, | ||
| } | ||
| : { | ||
| audio: false, | ||
| video: { | ||
| mandatory: { | ||
| chromeMediaSource: 'desktop', | ||
| chromeMediaSourceId: mediaSourceId, | ||
| maxWidth: MAX_PREVIEW_SIZE, | ||
| maxHeight: MAX_PREVIEW_SIZE, | ||
| }, | ||
| }, | ||
| } | ||
|
|
||
| // @ts-expect-error Each browser has a different API, the current object is compatible with Chromium | ||
| return navigator.mediaDevices.getUserMedia(constraints) | ||
| } | ||
|
|
||
| /** | ||
| * Set the video source to the selected source | ||
| */ | ||
| async function setVideoSource() { | ||
| stream = await getStreamForMediaSource(props.mediaSourceId) | ||
| if (videoElement.value) { | ||
| videoElement.value.srcObject = stream | ||
| } else { | ||
| // If there is no video element - something went wrong or the component is destroyed already | ||
| // We still must release the stream | ||
| releaseVideoSource() | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Release the video source | ||
| */ | ||
| function releaseVideoSource() { | ||
| if (!stream) { | ||
| return | ||
| } | ||
| for (const track of stream.getTracks()) { | ||
| track.stop() | ||
| } | ||
| } | ||
|
|
||
| onMounted(async () => { | ||
| await setVideoSource() | ||
| }) | ||
|
|
||
| onBeforeUnmount(() => { | ||
| releaseVideoSource() | ||
| }) | ||
|
|
||
| /** | ||
| * Handle the loadedmetadata event of the video element | ||
| * @param event - The event | ||
| */ | ||
| function onLoadedMetadata(event: Event) { | ||
| (event.target as HTMLVideoElement).play() | ||
| } | ||
|
|
||
| /** | ||
| * Handle the suspend event of the video element | ||
| * This is supposed to happen only if the source disappears, e.g., the source window is closed | ||
| */ | ||
| function onSuspend() { | ||
| if (videoElement.value!.srcObject) { | ||
| emit('suspend') | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <video ref="videoElement" | ||
| muted | ||
| @loadedmetadata="onLoadedMetadata" | ||
| @suspend="onSuspend" /> | ||
| </template> |