diff --git a/src/components/mini-widgets/MiniVideoRecorder.vue b/src/components/mini-widgets/MiniVideoRecorder.vue index 2a8e00a16..d0892ad04 100644 --- a/src/components/mini-widgets/MiniVideoRecorder.vue +++ b/src/components/mini-widgets/MiniVideoRecorder.vue @@ -20,9 +20,9 @@

Choose a stream to record

() const miniWidget = toRefs(props).miniWidget -const selectedStream = ref() -const webRTCManager = new WebRTCManager(webRTCSignallingURI.val, rtcConfiguration) -const { availableStreams: externalStreams, mediaStream } = webRTCManager.startStream(selectedStream, allowedIceIps) +const nameSelectedStream = ref() +const { namesAvailableStreams } = storeToRefs(videoStore) const mediaRecorder = ref() const recorderWidget = ref() const { isOutside } = useMouseInElement(recorderWidget) -const availableStreams = ref([]) const isStreamSelectDialogOpen = ref(false) const isLoadingStream = ref(false) const timeRecordingStart = ref(new Date()) const timeNow = useTimestamp({ interval: 100 }) +const mediaStream = ref() const isRecording = computed(() => { return mediaRecorder.value !== undefined && mediaRecorder.value.state === 'recording' @@ -111,6 +105,11 @@ onBeforeMount(async () => { } }) +watch(nameSelectedStream, () => { + miniWidget.value.options.streamName = nameSelectedStream.value + mediaStream.value = undefined +}) + const toggleRecording = async (): Promise => { if (isRecording.value) { stopRecording() @@ -119,17 +118,14 @@ const toggleRecording = async (): Promise => { // Open dialog so user can choose the stream which will be recorded isStreamSelectDialogOpen.value = true } -onBeforeUnmount(() => { - webRTCManager.close('WebRTC manager removed') -}) const startRecording = async (): Promise => { - if (availableStreams.value.isEmpty()) { + if (namesAvailableStreams.value.isEmpty()) { return Swal.fire({ text: 'No streams available.', icon: 'error' }) } - if (selectedStream.value === undefined) { - if (availableStreams.value.length === 1) { - await updateCurrentStream(availableStreams.value[0]) + if (nameSelectedStream.value === undefined) { + if (namesAvailableStreams.value.length === 1) { + await updateCurrentStream(namesAvailableStreams.value[0]) } else { return Swal.fire({ text: 'No stream selected. Please choose one before continuing.', icon: 'error' }) } @@ -184,10 +180,10 @@ const timePassedString = computed(() => { return `${durationHours}:${durationMinutes}:${durationSeconds}` }) -const updateCurrentStream = async (stream: Stream | undefined): Promise => { - selectedStream.value = stream +const updateCurrentStream = async (streamName: string | undefined): Promise => { + nameSelectedStream.value = streamName mediaStream.value = undefined - if (selectedStream.value !== undefined) { + if (nameSelectedStream.value !== undefined) { isLoadingStream.value = true let millisPassed = 0 const timeStep = 100 @@ -202,27 +198,22 @@ const updateCurrentStream = async (stream: Stream | undefined): Promise { - const savedStreamName: string | undefined = miniWidget.value.options.streamName as string - availableStreams.value = externalStreams.value - if (!availableStreams.value.find((stream) => stream.id === 'screenStream')) { - addScreenStream() - } - if (availableStreams.value.isEmpty()) { - return +const streamConnectionRoutine = setInterval(() => { + // If the video player widget is cold booted, assign the first stream to it + if (miniWidget.value.options.streamName === undefined && !namesAvailableStreams.value.isEmpty()) { + miniWidget.value.options.streamName = namesAvailableStreams.value[0] } - // Retrieve stream from the saved stream name, otherwise choose the first available stream as a fallback - const savedStream = savedStreamName ? availableStreams.value.find((s) => s.name === savedStreamName) : undefined - - if (savedStream !== undefined && savedStream.id !== selectedStream.value?.id && selectedStream.value === undefined) { - console.debug!('[WebRTC] trying to set stream...') - updateCurrentStream(savedStream) + const updatedMediaStream = videoStore.getMediaStream(miniWidget.value.options.streamName) + // If the widget is not connected to the MediaStream, try to connect it + if (!isEqual(updatedMediaStream, mediaStream.value)) { + mediaStream.value = updatedMediaStream } -}) +}, 1000) +onBeforeUnmount(() => clearInterval(streamConnectionRoutine)) // Try to prevent user from closing Cockpit when a stream is being recorded watch(isRecording, () => {