xqq / mpegts.js Goto Github PK

报错： Failed to execute 'appendBuffer' on 'SourceBuffer': The HTMLMediaElement.error attribute is not null
尝试换成ws-flv，不会出现此问题，不知道http模式下的报错应该如何解决

The HTMLMediaElement.error attribute is not null

使用ffmpeg将rtsp转换为flv（），然后使用websocket服务发送到网页前端，有时可以播放有时不能播放，js没有报错，跟正常播放的日志是一样的：

[MSEController] > MediaSource onSourceOpen
[FLVDemuxer] > Parsed onMetaData
[FLVDemuxer] > Parsed AVCDecoderConfigurationRecord
[MSEController] > Received Initialization Segment, mimeType: video/mp4;codecs=avc1.4d001e

重复刷新，复现概率大概每3次可以出现一次无法播放的情况。有测试过flv.js，不会出现这种情况。

When playing live stream, playing speed is a bit slow.
More time is passed, more delay video.
Thanks.

测试了很多次，基本上就是在1分钟左右结束拉流，但是实际上直播流还是有的。
想问一下是不是需要设置什么？
这是我创建mpegts播放器的代码

element.onended = ()=>{} ,不会执行回调？监听不到视频的ended？

最大只能支持6个画面在同一个网页上播放，
超出了，就显示不出来。

例如我设置的目的地地址和端口号为192.168.0.100:9922，请问我用mpegts.js库，url应该怎么填写呢？又或者我是不是需要搭一个中间服务器来接收mpegts流呀？有大神知道吗？

浏览器报：
mpegts.js:1 [TSDemuxer] > Probe data 13 bytes is too few for judging MPEG-TS stream format!
导致播放不了，不知道是需要调整哪？左边是浏览器，右边播放的是IINA 播放器

If the demuxer hits a sync_byte that is not 0x47 it will freeze the video and be unable to progress demuxing the next packets. This is what's seen in chrome dev console. The MPEG-TS source is doing some weird stuff to the stream, padding/fragmenting the UDP payload to not be exactly a multiple of 188 bytes.

In a scenario where this.first_parse_ is false, then offset is 0 but this code will break and return a 0 offset, and the demuxer will be stuck trying to read the sync_byte that is not 0x47 infinitely.

if (sync_byte !== 0x47) {
                Log.e(this.TAG, `sync_byte = ${sync_byte}, not 0x47`);
                break;
            }

如果没有显示声明lazyLoadMaxDuration配置项会一直获取视频文件直到下载完成，没有实现api文档里的默认3*60s停止发送请求

I just noticed a remark that mpegts.js somehow inherits functionality from flv.js. This brings me to my questions:

• what is the difference between them?
• should I move to mpegts.js?
• is mpegts.js a drop-in replacement for flv.js?

Thank you!

报错[TransmuxingController] > DemuxException: type = CodecUnsupported, info = Flv: Unsupported codec in video frame: 12，请问一下这个报错的具体原因是什么，如何解决

mpegts.js:8 [Deprecation] Using SourceBuffer.abort() to abort remove()'s asynchronous range removal is deprecated due to specification change. Support will be removed in the future. You should instead await 'updateend'. abort() is intended to only abort an asynchronous media append or reset parser state. See https://www.chromestatus.com/features/6107495151960064 for more details.
e.seek @ mpegts.js:8
e._internalSeek @ mpegts.js:8
set @ mpegts.js:8
e._onmseUpdateEnd @ mpegts.js:8
o.emit @ mpegts.js:1
e._onSourceBufferUpdateEnd @ mpegts.js:8
mpegts.js:1 [MSEPlayer] > Playback seems stuck at 0, seek to 1.52
e.w @ mpegts.js:1
e._checkAndResumeStuckPlayback @ mpegts.js:8
e._onvProgress @ mpegts.js:8

Hello, this player can support P2P cdnbye.com ?

win10系统，每次在chrome上打开必须要右键显示控件才能播放暂停，而且没有找到变速功能。。

IOException: type = UnrecoverableEarlyEof, code = undefined, msg = Fetch stream meet Early-EOF

当播放多个影片的时候,如果都不要seek 是可以正常播完 ,
有个情境是 ,如果一开始播放的时候 ,就seek 选取最后的segment ,此时还是可以正常播放
但如果在这时候选取一开始的segment 会直接loop 卡住不播放
附近有我的图档 还有档案 ,之后再跳回第一个位置

我是直接seek 在最后一个segment ,1200这个位置,此时还是正常播放

seek 回 第一个segment ,loop 直接卡死

json file
{
"type": "flv",
"duration": 1418440,
"segments": [
{
"duration": 312640,
"filesize": 20676652,
"url": "http://127.0.0.1:8081/demo/file/xxx-1tx411k7PX_part1.flv"
},{
"duration": 354480,
"filesize": 26951956,
"url": "http://127.0.0.1:8081/demo/file/xxx-1tx411k7PX_part2.flv"
},{
"duration": 407240,
"filesize": 25339028,
"url": "http://127.0.0.1:8081/demo/file/xxx-1tx411k7PX_part3.flv"
},{
"duration": 344080,
"filesize": 15874198,
"url": "http://127.0.0.1:8081/demo/file/xxx-1tx411k7PX_part4.flv"
}
]
}

请教一下，我在https://xqq.im/mpegts.js/demo/ 页面填入flv播放地址，点load按钮之后能正常播放

出现问题的是，如果我先在demo页面填入直播地址，之后点击load按钮，此时浏览器和媒体服务器的连接状态为pending，之后我开始给媒体服务器推流，播放器页面输出：

[FLVDemuxer] > Parsed AVCDecoderConfigurationRecord
[MSEController] > Received Initialization Segment, mimeType: video/mp4;codecs=avc1.4d4028

但是画面并没有开始播放，这是有什么限制吗

很早以前就关注你的flv.js 和你个人了。
最近有空看了一下你的博客也不更新了。。。

Hi,
My live stream is aes-cbc encrypted, unable to descramble with crypto-js, any suggestions, Is it possible to descramble in JS?

here code
`

private handlePESSlice(buffer: ArrayBuffer, offset: number, length: number, misc: any): void {
    let data = new Uint8Array(buffer, offset, length);
    var key = CryptoJS.enc.Hex.parse('6CC47461F65084AB5C5F90EDA1C2F9F0');
    var iv = CryptoJS.enc.Hex.parse('627CBD824E93CDC9DA754BAC72DB2205');

    const data_str = this.uint8arrayToStringMethod(data);

    function convert_word_array_to_uint8Array(wordArray: any, length: number) {
        var len = wordArray.words.length,
            u8_array = new Uint8Array(len),
            offset = 0, word, i
            ;
        for (i = 0; i < len; i++) {
            word = wordArray.words[i];
            u8_array[offset++] = word >> 24;
            u8_array[offset++] = (word >> 16) & 0xff;
            u8_array[offset++] = (word >> 8) & 0xff;
            u8_array[offset++] = word & 0xff;
        }
        return u8_array;
    }

    var decrypted = CryptoJS.AES.decrypt(data_str, key, {
        keySize: 128 / 8,
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.NoPadding
    });

    data = convert_word_array_to_uint8Array(decrypted, length);


    let packet_start_code_prefix = (data[0] << 16) | (data[1] << 8) | (data[2]);
    let stream_id = data[3];
    let PES_packet_length = (data[4] << 8) | data[5];

    if (misc.payload_unit_start_indicator) {
        if (packet_start_code_prefix !== 1) {
            Log.e(this.TAG, `handlePESSlice: packet_start_code_prefix should be 1 but with value ${packet_start_code_prefix}`);
            return;
        }

        // handle queued PES slices:
        // Merge into a big Uint8Array then call parsePES()
        let slice_queue = this.pes_slice_queues_[misc.pid];
        if (slice_queue) {
            if (slice_queue.expected_length === 0 || slice_queue.expected_length === slice_queue.total_length) {
                this.emitPESSlices(slice_queue, misc);
            } else {
                this.clearSlices(slice_queue, misc);
            }
        }

        // Make a new PES queue for new PES slices
        this.pes_slice_queues_[misc.pid] = new SliceQueue();
        this.pes_slice_queues_[misc.pid].file_position = misc.file_position;
        this.pes_slice_queues_[misc.pid].random_access_indicator = misc.random_access_indicator;
    }` 

error message
blob:null/fd43986f-8940-4b53-84f8-35d14c158a1d:2470 [TSDemuxer] > handlePESSlice: packet_start_code_prefix should be 1 but with value 1398961
[TSDemuxer] > handlePESSlice: packet_start_code_prefix should be 1 but with value 15172255

您好，有时候打开视频会报这个错误，请问可能的原因是什么？

如题

An attempt was made to use an object that is not, or is no longer, usable

Hi,

My livestream uses multiple streams; one for video, one for audio and some streams for subtitles. Is it possible to only select the video and audio stream and ignore subtitles? This would be handy because livestreams that contain subtitles won't play.

Thanks for your awesome work.

-Alwin

I have a WS based server that streams video, but it is multiplexed with some other stuff in the same websocket.

Is there an API to feed the player directly with buffers of MPEG2-TS packets?

大佬，hasAudio能自动不？有的设备指定有声音，实际推送的时候，可能又没声音上来，这样就导致播放器播放不了视频。
很头疼的问题。希望大佬，能解决下这个千年问题，以前flv.js 也是需要指定。

我使用flv.js构建6个播放器没问题，但使用mpegts构建6的，内存、gpu、cpu就会暴增，有时候mpegts还会疯狂报错

I am trying to run the compiler of my application made with Gatsby and mpegts.js but I get this error.
I should add that there are no errors with the Gatsby development server, only in the compilation.

I have noticed that it is based on flv.js. I have tried to do it with that library even though it no longer has constant maintenance and I get a similar error: "self is not defined" and a similar output. I'll create the issue anyway in flv.js and comment on its link here.

const Video = () => {
    const videoRef = useRef(null)
    useEffect(() => {
        if(videoRef && videoRef.current) {
            const video = videoRef.current
            var player = mpegts.createPlayer({
                type: 'flv',
                isLive: true,
                url: API_STREAM
            });
            player.attachMediaElement(video);
            player.load();
            player.play();
        }
    }, [videoRef])

    return  <video ref={videoRef}></video>
}

versions:
node: v16.3.0
npm: 7.18.1
yarn: 1.22.10

package.json:

{
  "name": "darwin-va",
  "version": "1.0.0",
  "private": true,
  "description": "DarwinVA",
  "author": "Darwin Vilcachagua Ayala",
  "keywords": [
    "gatsby"
  ],
  "scripts": {
    "develop": "gatsby develop -p 3033",
    "start": "gatsby develop -p 3033",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  },
  "dependencies": {
    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
    "flv.js": "^1.5.0",
    "gatsby": "^3.3.1",
    "gatsby-plugin-gatsby-cloud": "^2.4.0",
    "gatsby-plugin-google-analytics": "^3.4.0",
    "gatsby-plugin-image": "^1.4.0",
    "gatsby-plugin-layout": "^2.4.0",
    "gatsby-plugin-manifest": "^3.4.0",
    "gatsby-plugin-mdx": "^2.4.0",
    "gatsby-plugin-offline": "^4.4.0",
    "gatsby-plugin-react-helmet": "^4.4.0",
    "gatsby-plugin-sharp": "^3.4.0",
    "gatsby-plugin-sitemap": "^4.0.0",
    "gatsby-remark-images": "^5.1.0",
    "gatsby-source-filesystem": "^3.4.0",
    "gatsby-transformer-remark": "^4.1.0",
    "gatsby-transformer-sharp": "^3.4.0",
    "mpegts.js": "^1.6.7",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.2.0",
    "react-responsive-masonry": "^2.1.2",
    "socket.io-client": "^4.0.2"
  },
  "main": "index.js",
  "license": "MIT"
}

Full output when executing "yarn build":
output.txt

Hello,

I want to get the information from the Player, if it currently plays the video stream. Or it stopped e.g. an error occured.
How can I do this?

player.isPlaying() would be fine...

Thanks...

左边的是正常, 右边的 不行

在transmuxing-worker.js中加载其他js报错，报错如下：

Is it possible to support non HTML5 devices, like playstation 3, 4, old samsung tvs, etc.

I can pay a $1000 bounty for this

关闭第七个摄像头还会出现 Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

打开demo页，播一个ws-flv直播，播大约1天，浏览器报out of memory。
可使用Chrome的F12工具录制，录制7分钟，可观察录制过程中，每秒钟都会产生一点点未释放的内存。
选中会发现，存在相当多的n引用，图中有672个n，随着时间一直增加

我已经把日志注释了，应该可排除是日志导致问题

我这边使用iframe复制了10份demo页同时播，崩溃速度更快。

<!DOCTYPE html>
<html>
<head>
	<title>video Client v1</title>
	<style>
		.player-iframe {width:450px;height:540px}
	</style>
</head>
<body>
<iframe src="index.html" class="player-iframe"></iframe>
<iframe src="index.html" class="player-iframe"></iframe>
<iframe src="index.html" class="player-iframe"></iframe>
<iframe src="index.html" class="player-iframe"></iframe>
<iframe src="index.html" class="player-iframe"></iframe>

<iframe src="index.html" class="player-iframe"></iframe>
<iframe src="index.html" class="player-iframe"></iframe>
<iframe src="index.html" class="player-iframe"></iframe>
<iframe src="index.html" class="player-iframe"></iframe>
<iframe src="index.html" class="player-iframe"></iframe>

</body>
</html>

作者你好，
我现在有一个较大的ts视频（约850兆，在正常播放一段时间后，会突然快进，一直到结束为止。

• 目前使用的是xhr-range-loader去拉取文件
• 看控制台，中间会触发 [MSEPlayer] > MSE SourceBuffer is full, suspend transmuxing task

麻烦看下什么原因呢？谢谢

I have an encode which produces 4 FLV streams at different resolutions. I would like to be able to monitor the statistics for example and possibly switch feed to a lower resolution if I detect some drops.

I couldn't figure out from the API how to change the URL it feeds from. The only way I found to do this is to destroy the current player and create a new one.

safari 版本：Version 14.0.3 (16610.4.3.1.7)

Here is a normal BDAV (.m2ts) file that contains one stream of H.264 and one stream of PCM. I understand that PCM is not supported, yet the video is displayed incorrectly as well.

https://drive.google.com/file/d/1ge5jDCBRR98nPsKEF6AzGgUMFlZ5gNIL/view?usp=sharing

Please take a look.

希望可以直接将转码好的数据存储起来，实现录屏功能

如题。

各位有遇到这样的问题吗？
基本配置如下：

const player = mpegts.createPlayer({
type:'flv',
hasAudio:false,
isLive:true,
cors:true,
}, {
 enableWorker: true,
 enableStashBuffer: false,
 stashInitialSize: 128,
//延迟过大时是否主动进行追赶,设置为false，正常；为true就会出现初始黑屏情况
 liveBufferLatencyChasing: true, 
});

现象：
播放器会一直卡在 loading

信息：
video.buffered 有两段 TimeRange [0.08-7.08], [7.157-7.29]，卡在了 end(0)
看过 video/audio sample 的 pts、dts，发现主要是 video pts 不连续

疑问：
这种情况下怎么处理比较好？

1. 手动 seek 到第二段？
2. remux 的时候处理掉这个 gap？

我安装了node.js后，mpegts.js-master文件夹放在桌面，用cmd输入以下指令：
npm install --save mpegts.js，出现

npm install ，出现

npm install -g webpack-cli ，出现

npm run build，出现

这个安装顺序有问题吗？还有想问一下

Getting Started

<script src="mpegts.js"></script>
<video id="videoElement"></video>
<script>
    if (mpegts.getFeatureList().mseLivePlayback) {
        var videoElement = document.getElementById('videoElement');
        var player = mpegts.createPlayer({
            type: 'mse',  // could also be mpegts, m2ts, flv
            isLive: true,
            url: 'http://example.com/live/livestream.ts'
        });
        player.attachMediaElement(videoElement);
        player.load();
        player.play();
    }
</script>
这段代码怎么用，本人第一次接触javascript，求解，感谢！