Stream not playing after page refresh

General
1

Hello. I have an issue regarding streaming plugin with janus js. I use Vue/Quasar app. It seems that somehow browser does not unload session/stream when closing/reloading page, but does so when unloading component (as it should).
The problem does not occur when routing to other components within the same page without reloading.
There are no errors in any case, just blank video.
My code:

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();
}
});

One more important thing. When I clear my browsing history, stream works again. So, technically, if I do not reload a page or navigate away using vue router before closing, it works fine.

2

Update. It seems that triggering start() function is what causes problems.
Curiously, when implemented as in demos (list and button that starts stream) it works very well.
Somehow calling start() OUTSIDE of button click does indeed send api call, but stream does not display after first page reload.
Clicking start button fixes this. A shame, really, I wanted to implement this mechanism without using any buttons, only automatic stream opening