mpegts.js

日本語中文说明

用TypeScript和JavaScript编写的HTML5 MPEG2-TS流播放器。

mpegts.js针对低延迟直播流播放进行了优化，如DVB/ISDB电视或监控摄像头。

本项目基于flv.js。

概述

mpegts.js通过将MPEG2-TS流转换为ISO BMFF（分段MP4）片段，然后通过媒体源扩展API将mp4片段输入HTML5 <video>元素来工作。

新闻

v1.7.3

为FLV引入了支持HEVC的增强型RTMP。

为MPEG-TS引入了Opus和ATSC AC-3音频编解码器支持。

为MPEG-TS引入了LOAS AAC支持。
v1.7.0

引入了MPEG-TS/FLV上的H.265/HEVC支持。

演示

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

与aribb24.js的演示

特性

播放通过http(s)或WebSocket传输的H.264/H.265 + AAC编解码的MPEG2-TS流
播放通过http(s)或WebSocket传输的H.264/H.265 + AAC编解码的FLV流
在最佳情况下极低的延迟，不到1秒
播放BDAV/BDMV的.m2ts文件，支持192字节或204字节的TS包
支持处理动态编解码器参数变化（如视频分辨率变化）
支持Chrome、FireFox、Safari、Edge（旧版或Chromium）或任何基于Chromium的浏览器
支持自动追赶HTMLMediaElement内部缓冲区的延迟
低CPU开销和低内存使用（每个实例的JS堆大约占用10MiB）
支持提取PES私有数据（stream_type=0x06），如ARIB B24字幕（通过aribb24.js）
支持定时ID3元数据（stream_type=0x15）回调（TIMED_ID3_METADATA_ARRIVED）

跨域资源共享（CORS）

如果你使用独立的视频服务器来提供MPEG2-TS流，必须在视频服务器上正确配置Access-Control-Allow-Origin头，以允许跨域资源获取。

更多详情请参见cors.md。

安装

npm install --save mpegts.js

构建

npm install                 # 安装开发依赖
npm install -g webpack-cli  # 安装构建工具
npm run build               # 打包和最小化的js文件将生成在dist文件夹中

如果你在中国大陆，建议使用cnpm镜像。

快速开始

<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',  // 也可以是mpegts、m2ts、flv
            isLive: true,
            url: 'http://example.com/live/livestream.ts'
        });
        player.attachMediaElement(videoElement);
        player.load();
        player.play();
    }
</script>

mpegts.js可以与Simple Realtime Server一起测试。

待办事项

MPEG2-TS静态文件播放（目前不支持seeking）
MP3/AC3音频编解码器支持
MPEG2-TS流上的AV1/OPUS编解码器支持（？）

局限性

不支持mpeg2video
HTTP MPEG2-TS直播流在IE11等旧浏览器上无法工作
由于[媒体源扩展][]被禁用，mpegts.js在iOS 17.0或更早版本上不可用（在iPadOS上可用），iOS 17.1通过托管媒体源API工作

从flv.js继承的特性

FLV容器中H.264 + AAC / MP3编解码器的播放
多部分分段视频播放
HTTP FLV低延迟直播流播放
通过WebSocket的FLV直播流播放
兼容Chrome、FireFox、Safari 10、IE11和Edge
极低的开销，由浏览器硬件加速！

FLV播放限制

MP3音频编解码器目前在IE11 / Edge上不工作
HTTP FLV直播流目前在所有浏览器上都不工作，请参见livestream.md

FLV多部分播放

你只需为MediaDataSource提供一个播放列表。请参见multipart.md

直播流播放

请参见livestream.md

API和配置

请参见api.md

调试

npm install                 # 安装开发依赖
npm install -g webpack-cli  # 安装构建工具
npm run build:debug         # 打包和最小化的js文件将生成在dist文件夹中

设计

请参见design.md

许可证

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.