Quasar + Janus stream not appearing in browser after page reload

Question

I have a problem displaying Janus Gateway stream into my Quasar app. I use this code to receive certain stream and display it onto <video> tag:

import Hud from './hud/hud.vue';
import Janus from 'janus-gateway';
import adapter from 'webrtc-adapter';

const props = defineProps({
streamId: {
type: Number,
default: 1
}
});

window\['adapter'\] = adapter;

const JANUS_URL = 'MY_URL'; // placeholder,
const janus = ref(null);
const plugin = ref(null);
const stream = ref(null);
const status = ref(null);

const connect = (server) =\> {
janus.value = new Janus({
server,
success: () =\> {
attachPlugin();
},
error: (error) =\> {
onError('Failed to connect to Janus server', error);
},
destroyed: () =\> {
window.location.reload();
},
});
};

const attachPlugin = () =\> {
janus.value.attach({
plugin: 'janus.plugin.streaming',
opaqueId: Janus.randomString(12),
success: (pluginHandle) =\> {
plugin.value = pluginHandle;
setTimeout(() =\> {
start();
}, 3500)
},
error: (error) =\> {
onError('Error attaching plugin...', error);
},
onmessage: (msg, jsep) =\> {
if (msg && msg.result) {
const result = msg.result;
if (result.status) {
status.value = result.status;
}
} else if (msg && msg.error) {
onError(msg.error);
}
if (jsep) {
let stereo = jsep.sdp.indexOf('stereo=1') !== -1;
plugin.value.createAnswer({
jsep: jsep,
tracks: \[{ add: false, recv: true, type: 'video' }\],
customizeSdp: (jsep) =\> {
if (stereo && jsep.sdp.indexOf('stereo=1') === -1) {
jsep.sdp = jsep.sdp.replace('useinbandfec=1', 'useinbandfec=1;stereo=1');
}
},
success: (jsep) =\> {
var body = { request: 'start' };
plugin.value.send({ message: body, jsep: jsep });
},
error: (error) =\> {
onError('WebRTC error:', error);
},
});
}
},
onremotetrack: function (track, mid, on, metadata) {
if (track.kind === 'video' && on) {
stream.value = new MediaStream(\[track\]);
}
else {
stream.value = null;
}
},
onremotestream: (stream) =\> {
onRemoteStream(stream);
},
oncleanup: () =\> {
onCleanup();
},
});
};

const start = () =\> {
const tracks = { audio: false, video: true };
plugin.value.send({ message: { request: 'watch', id: props.streamId, tracks } });
};

const stopStream = () =\> {
plugin.value.send({ message: { request: 'stop' } });
plugin.value.hangup();
onCleanup();
};

const onRemoteStream = (stream) =\> {
if (stream.active) {
stream.value = stream;
} else {
stream.value = null;
}
};

const onCleanup = () =\> {
stream.value = null;
status.value = null;
};

const onError = (message, error = '') =\> {
console.error(message, error);
error = message + error;
};

onMounted(() =\> {
Janus.init({
debug: 'Error', // change this to see logs from Janus, the most info is available from debug: true
dependencies: Janus.useDefaultDependencies(),
callback: () =\> {
connect(JANUS_URL);
},
});
});

window.onbeforeunload = (() =\> {
if (plugin.value) {
stopStream();
}
if (janus.value) {
janus.value.destroy();
}
})

onBeforeUnmount(() =\> {
if (plugin.value) {
stopStream();
}
if (janus.value) {
janus.value.destroy();
}
});

This seems to work fine for the first time I enter the page. The moment I try to refresh it, it shows a blank video with no errors. Using the admin panel, it seems everything is in order. I also used demo html to test it and it works well there. Curiously, the stream starts to work when I clear my browsing history. How can I make it so I can see this (or any other) stream constantly? Is the h264 format at fault here?