Git Product home page Git Product logo

mpegts.js's Introduction

mpegts.js npm

日本語 中文说明

HTML5 MPEG2-TS stream player written in TypeScript & JavaScript.

mpegts.js is optimized for low-latency live stream playback, such as DVB/ISDB television or surveillance cameras.

This project is based on flv.js.

Overview

mpegts.js works by transmuxing MPEG2-TS stream into ISO BMFF (Fragmented MP4) segments, followed by feeding mp4 segments into an HTML5 <video> element through Media Source Extensions API.

News

  • v1.7.3

    Introduced Enhanced RTMP with HEVC support for FLV.

    Introduced Opus and ATSC AC-3 audio codec support for MPEG-TS.

    Introduced LOAS AAC support for MPEG-TS.

  • v1.7.0

    Introduced H.265/HEVC over MPEG-TS/FLV support.

Demo

http://xqq.github.io/mpegts.js/demo/

demo with aribb24.js

Features

  • Playback for MPEG2-TS stream with H.264/H.265 + AAC codec transported in http(s) or WebSocket
  • Playback for FLV stream with H.264/H.265 + AAC codec transported in http(s) or WebSocket
  • Extremely low latency of less than 1 second in the best case
  • Playback for .m2ts file like BDAV/BDMV with 192 bytes TS packet, or 204 bytes TS packet
  • Support handling dynamic codec parameters change (e.g. video resolution change)
  • Support Chrome, FireFox, Safari, Edge (Old or Chromium) or any Chromium-based browsers
  • Support chasing latency automatically for internal buffer of HTMLMediaElement
  • Low CPU overhead and low memory usage (JS heap takes about 10MiB for each instance)
  • Support extracting PES private data (stream_type=0x06) like ARIB B24 subtitles (with aribb24.js)
  • Support Timed ID3 Metadata (stream_type=0x15) callback (TIMED_ID3_METADATA_ARRIVED)

CORS

If you use standalone video server for MPEG2-TS stream, Access-Control-Allow-Origin header must be configured correctly on video server for cross-origin resource fetching.

See cors.md for more details.

Installation

npm install --save mpegts.js

Build

npm install                 # install dev-dependencies
npm install -g webpack-cli  # install build tool
npm run build               # packaged & minimized js will be emitted in dist folder

cnpm mirror is recommended if you are in Mainland China.

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>

mpegts.js could be tested with Simple Realtime Server.

TODO

  • MPEG2-TS static file playback (seeking is not supported now)
  • MP3/AC3 audio codec support
  • AV1/OPUS codec over MPEG2-TS stream support (?)

Limitations

  • mpeg2video is not supported
  • HTTP MPEG2-TS live stream could not work on old browsers like IE11
  • mpegts.js is not usable on iOS version 17.0 or older caused by the banning of Media Source Extensions (available on iPadOS), iOS 17.1 works through Managed Media Source API

Features inherited from flv.js

  • FLV container with H.264 + AAC / MP3 codec playback
  • Multipart segmented video playback
  • HTTP FLV low latency live stream playback
  • FLV over WebSocket live stream playback
  • Compatible with Chrome, FireFox, Safari 10, IE11 and Edge
  • Extremely low overhead, and hardware accelerated by your browser!

FLV playback limitations

  • MP3 audio codec is currently not working on IE11 / Edge
  • HTTP FLV live stream is not currently working on all browsers, see livestream.md

FLV Multipart playback

You only have to provide a playlist for MediaDataSource. See multipart.md

Livestream playback

See livestream.md

API and Configuration

See api.md

Debug

npm install                 # install dev-dependencies
npm install -g webpack-cli  # install build tool
npm run build:debug         # packaged & minimized js will be emitted in dist folder

Design

See design.md

License

Copyright (C) 2021 magicxqq. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

mpegts.js's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mpegts.js's Issues

关于较大的ts文件播放突然快进问题

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

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

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

[Question] Can i select a specific stream?

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

ts 格式有报错

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

播放websocket flv视频数据时,有时可以播放有时不行

使用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,不会出现这种情况。

Directly add a buffer programmatically?

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?

当播放多个flv档案的时候,seek segment 会失败

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

document1

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

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

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"
}
]
}

如何让flv支持hevc解码

    chromium的最新分支支持了hevc的硬件解码,我想通过mpegts.js实现flv hevc的播放,但不知道应该如何修改。有大佬能帮助我一下吗?

sync_byte error freezes demuxer

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.

image

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

内存泄露问题

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

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

我这边使用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>

image

Changing feed URL

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.

有办法自动判断是否有声音不?

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

unable to play aes-cbc scrambled stream

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

Using SourceBuffer.abort() to abort remove()... chrome crush?what's wrong with me?

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

Support non HTML-5 devices

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

I can pay a $1000 bounty for this

Player is playing?

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...

内存暴增问题

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

Playing speed

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

ended监听失效

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

"window" is not available during server side rendering - GATSBY (only when compiled is run)

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

我是小白,安装出现了问题求解

我安装了node.js后,mpegts.js-master文件夹放在桌面,用cmd输入以下指令:
npm install --save mpegts.js,出现
image
npm install ,出现
image
npm install -g webpack-cli ,出现
image
npm run build,出现
image
这个安装顺序有问题吗?还有想问一下

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,求解,感谢!

播放器先连接媒体服务器,再推流,不能播放

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

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

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

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.