zishuo/RTSPtoWEBPlayer
1
0
Fork 0
mirror of https://github.com/vdalex25/rtsp-to-web-player.git synced 2025-09-26 21:01:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Enhance codec support and error handling in RTSP player

Browse Source 
Add checks to ensure codec compatibility with MediaSource, including warnings and connection closure for unsupported formats. Introduce `getMediaSource` and `mseIsTypeSupported` methods for improved MediaSource and codec handling. Clean up unnecessary console logs for better clarity.
This commit is contained in:
vdalex
2025-02-11 15:53:50 +03:00
parent 95fd366486
commit df890dfffe
1 changed files with 31 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/rtsp-to-web-player.js
View File

@@ -329,7 +329,13 @@ export default class RTSPtoWEBPlayer {
if (typeof data === 'object') { if (typeof data === 'object') {
if (this.codec === null) { if (this.codec === null) {
this.codec = new TextDecoder('utf-8').decode(new Uint8Array(data).slice(1)); this.codec = new TextDecoder('utf-8').decode(new Uint8Array(data).slice(1));
this.MSESourceBuffer = this.MSE.addSourceBuffer(`video/mp4; codecs="${this.codec}"`); const mimeCodec = 'video/mp4; codecs="' + this.codec + '"';
if(!this.mseIsTypeSupported(mimeCodec)){
console.warn('No decoders for requested formats: '+mimeCodec);
this.webSocket.close(1000);
return;
}
this.MSESourceBuffer = this.MSE.addSourceBuffer(mimeCodec);
this.MSESourceBuffer.mode = 'segments'; this.MSESourceBuffer.mode = 'segments';
this.MSE.duration = Infinity; this.MSE.duration = Infinity;
this.MSESourceBuffer.addEventListener('updateend', this.pushPacket); this.MSESourceBuffer.addEventListener('updateend', this.pushPacket);
@@ -340,7 +346,7 @@ export default class RTSPtoWEBPlayer {
} }
} else { } else {
if (this.codec !== null) { if (this.codec !== null) {
console.log(data); //console.log(data);
} else { } else {
this.codec = data; this.codec = data;
this.MSESourceBuffer = this.MSE.addSourceBuffer(`video/mp4; codecs="${this.codec}"`); this.MSESourceBuffer = this.MSE.addSourceBuffer(`video/mp4; codecs="${this.codec}"`);
@@ -403,7 +409,7 @@ export default class RTSPtoWEBPlayer {
}; };
msePlayer = () => { msePlayer = () => {
this.MSE = new MediaSource(); this.MSE = this.getMediaSource();
this.video.src = window.URL.createObjectURL(this.MSE); this.video.src = window.URL.createObjectURL(this.MSE);
this.addMseListeners(); this.addMseListeners();
}; };
@@ -413,6 +419,14 @@ export default class RTSPtoWEBPlayer {
this.video.src = this.options.source; this.video.src = this.options.source;
} else if (Hls.isSupported()) { } else if (Hls.isSupported()) {
this.hls = new Hls(this.options.hlsjsconfig); this.hls = new Hls(this.options.hlsjsconfig);
this.hls.on(Hls.Events.ERROR, function (event, data) {
if(data?.error?.name === 'NotSupportedError'){
console.warn('No decoders for requested formats: '+data?.mimeType);
}
if(data.details==='levelEmptyError'){
console.warn(data.reason);
}
})
this.hls.loadSource(this.options.source); this.hls.loadSource(this.options.source);
this.hls.attachMedia(this.video); this.hls.attachMedia(this.video);
} else { } else {
@@ -444,6 +458,20 @@ export default class RTSPtoWEBPlayer {
} }
}; };
getMediaSource = () => {
if (window.ManagedMediaSource) {
this.video.disableRemotePlayback = true;
return new window.ManagedMediaSource();
}
if (window.MediaSource) {
return new window.MediaSource();
}
}
mseIsTypeSupported = function(mimeCodec) {
return ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec))||('ManagedMediaSource' in window && window.ManagedMediaSource.isTypeSupported(mimeCodec))
}
handleNegotiationNeeded = async e => { handleNegotiationNeeded = async e => {
/* /*
* in this project this handler is not needed, but in another it can be useful * in this project this handler is not needed, but in another it can be useful
@@ -568,7 +596,6 @@ export default class RTSPtoWEBPlayer {
}; };
connectionstatechange = e => { connectionstatechange = e => {
//console.log(e)
switch (this.webrtc.connectionState) { switch (this.webrtc.connectionState) {
case 'new': case 'new':
case 'connected': case 'connected':