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, () => {