rtsp-relay
rtsp-relay copied to clipboard
Issue with Loading Multiple Live Streaming Videos Using offline jsmpeg.min.js File
Hi, first of all, thank you for your module, which has saved me a lot of time.
I noticed that the rtsp-relay repository behaves differently when using the jsmpeg.min.js file from a CDN compared to using it locally. While using the CDN version, it can successfully play multiple live streaming videos (in my case, it's 3 videos),I suspect that each video is using a different JSMpeg object at this time. However, when using the local jsmpeg.min.js file, no video can be loaded. After investigation, I found that this is due to the issue of JSMpeg object reuse when using offline files.
Steps to Reproduce
Use the local jsmpeg.min.js version. Attempt to load multiple live streaming videos. All videos will not play properly, and there will be no error reminders on the console.
Expected Behavior
Expect that when using the local jsmpeg.min.js version, it should be able to successfully load multiple live streaming videos, similar to when using the CDN version.
Actual Behavior
None video is successfully loaded, and all fail to play.
Proposed Solution
I have identified the issue and proposed a solution: this is caused by the reuse of the JSMpeg object. In the proposed solution:
Create a new JSMpeg object when loading each video instead of reusing the existing one. Ensure that each video has its own independent playback instance to avoid issues caused by object reuse.
Additional Information
Version Used: 1.9.0
I will provide my solution in case someone encounters the same problem and doesn't need to waste 6 hours like me
create file src\assets\rtsp-relay-browser.js
copy from node_modules\rtsp-relay\browser\index.js
Make the following modifications
const importJSMpeg = () =>
new Promise((resolve, reject) => {
resolve();
});
var JSMpeg=【All text from 'https://cdn.jsdelivr.net/gh/phoboslab/jsmpeg@b5799bf/jsmpeg.min.js'】
const player = new JSMpeg.Player(url, {
// const player = new window.JSMpeg.Player(url, {
// if (typeof module !== 'undefined') {
// // being imported
// module.exports = { loadPlayer };
// } else {
// // loaded via script tag
// window.loadPlayer = loadPlayer;
// }
window.loadPlayer = loadPlayer;