rreverser / mpegts

Javascript HTTP Live Streaming realtime converter and player

HTTP Live Streaming JavaScript player


What's this?

This is Apple HTTP Live Streaming JavaScript player created by performing realtime conversion of MPEG-TS video chunks to MPEG-4 in separate thread using Web Worker and playing them in order in main thread.

How does it work?

Conversion is done using jBinary binary manipulation library with programmatically described data structures according to ISO 13818-1, ISO-14496-2, ISO-14496-12 and ITU-T H.222.0 specifications.

Where does it work?

Works best in Chrome (stable branch), having more noticable lags when switching videos but still working in latest Firefox versions and IE10+.

Where I can see that?

Check out http://rreverser.github.io/mpegts/ for live demo.

Screenshot:

Disclaimer

Please note that demo uses 3rd-party HLS demo source and service http://www.corsproxy.com/ for proxying it with needed Cross-Origin-Request headers for browsers to allow chunk downloading, so it may be unstable.

Can I use it in Node.js?

Yes, you can.

What license is it issued under?

It's regular MIT license.

mpegts's Issues

Can't convert specific stream

Hi,

congratulations, you made an hell of a good job ;-)

I saved locally on my web server a short sample stream from www.atnnetwork.com but I get this error while playing with mpegts on chrome (i added some debug into index.js):

XHR finished loading: GET "http://localhost/RReverser-mpegts/atn-ts/playlist.m3u8". index.js:152
responseText #EXTM3U

EXT-X-TARGETDURATION:10

EXT-X-MEDIA-SEQUENCE:5067417

EXTINF:10,

00017562.ts

EXTINF:10,

00017563.ts

EXTINF:10,

00017564.ts

EXTINF:10,

00017565.ts
lastOriginal http://localhost/RReverser-mpegts/atn-ts/00017565.ts
asked for 4 more videos index.js:149
4
Uncaught TypeError: Unexpected value (52 !== 71). jdataview.github.io/dist/jbinary.js:1
XHR finished loading: POST "http://mc.yandex.ru/watch/23392234?page-url=http%3A%2F%2Flocalhost%2FRRever…%2C%2C%2C%2C%2C%2C%2C%2C%2C2454%2C2454%2C1%2C%3Arqnl%3A1%3Ast%3A1404978414". watch.js:49

Wrong format ?

Thanks for your help.

"Unknown type: dependentField" when trying to write PES packet

I'm trying to write a PES packet using jBinary and PES.js implemented in this repo.
Something like:

    var PES = require('./mpegts/mpegts_to_mp4/pes.js');
    var jBinary = require('jbinary');
    var streamId;
    var data;
    // ...
    var pesHeaderLength = 11;
    lastCameraModelPesPacketToSerialize = {
        streamId: streamId,
        length: data.length,
        scramblingControl: 0,
        priority: 0,
        dataAlignmentIndicator: 0,
        hasCopyright: 0,
        isOriginal: 1,
        //_hasPTS: 0,
        //_hasDTS: 0,
        //_hasESCR: 0,
        //_hasESRate: 0,
        dsmTrickMode: 0,
        //_hasAdditionalCopyInfo: 0,
        //_hasPESCRC: 0,
        //_hasExtension: 0,
        dataLength: 5,
        data: data
    };
    var pesWriter = new jBinary(data.length + pesHeaderLength, PES);
    pesWriter.write('PESPacket', pesPacket);

I get the following exception:
if (!(type in this.typeSet)) throw new ReferenceError("Unknown typ
^
ReferenceError: Unknown type: dependentField
at jBinary.proto._getType (\node_modules\jbinary\dist\node\jbinary.js:198:48)

I guess that it's a simple bug in the PES definition which arises when trying to WRITE PES packet (which is not the common scenario in this repo), or that I've done something stupid. But due to lack of internal knowledge in jBinary implementation I found it hard to debug the problem.

Any help is appreciated.

EDIT: The same error appears also when trying to write an mpegts packet using mpegts.js. (It does not necessary mean that the problem is in jBinary, because the implementation of FlagDependent and Flag types is duplicated and identical between MPEGTS and PES).

Demo source code example is not working on firefox nightly

Hi ,

I am a newbie to HTTP live stream protocol , So my issue may seem quite obvious.

After downloading the source I have used Firefox nightly PC version browser for checking the example .Nightly browser is not showing any HTTP live content, I have noticed below logs in the console

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://crossorigin.me/http://d3sporhxbkob1v.cloudfront.net/bill/vod/sample-video/400k.m3u8. (Reason: CORS header 'Access-Control-Allow-Origin' missing).1

I need help in running the demo code on Firefox nightly browser.

Disable debug log?

Hi RReverser,

(What's your name :) ?)
How can I disable debug log? I think firefox lag issue is from writing debug to console log.

Live thumbnails generation

This is not an issue, it is a question - no such feature on github except than abusing labels.

Is it possible to use the h264 parser to extract a keyframe near a timestamp ?
I currently do this with ffmpeg which is smart enough to do byte-ranges request, which is very efficient but still needs caching and CDNs support.

What I would like to do is to perform all this client side, browsers are able to:

• Parse the header of the mpeg-ts file
• From the header, find the byte address where the keyframe nearest to the input timestamp exist
• Issue bytes-ranges requests
• Download, process/parse and generate binary data
• Extract the keyframe byes and convert them to something useful
• Load the pixels into a canvas or such

Will this project offer the ability to parse the mpeg-ts header and navigate to a a keyframe in h264 stream contained in the mpeg-ts segment ?

non-ios usage

hey

i see the library is promote as "apple ...." but from what i see there are only js files ... am i wrong to assume it can be used in any JS context? (react native, phonegap or web)

thanks,
Rares

Careful documentation

It would be great if you could add documentation.
Thanks

Exception on input file created by ffmpeg

I wanted to try this library on a static .ts file (rather than HLS protocol).

Just for the trial, I added a line in file browser.js that replaces the URLs returned by HLS server, so the code looks like:
originals = originals.slice(originals.lastIndexOf(lastOriginal) + 1);
originals = ['400k00001.ts']; // Override returned URLs
lastOriginal = originals[originals.length - 1];

I put 400k00001.ts in the same directory as the published web pages and it works great.

Now I tried to replace the mentioned file with one converted by ffmpeg.
I used ffmpeg this way:
ffmpeg -i 400k00001.ts -f mpegts 400k00001_after_ffmpeg.ts
(tried also with -vcodec libx264 -acodec libvo_aacenc)

I copied the 400k00001_after_ffmpeg.ts file to the published webpages directory and replaced the filename with the new one. I get "Offsets are out of bounds" error.
The file is opened by VLC (very low quality, but opened).

Is that a bug or I just missed something?

EDIT: Working using -vcodec copy -acodec copy. What kind of codecs should I use to transcode an existing video file (which does not natively fit the wanted format)?

Thanks

TypeError in index.js when processing audio without video

TypeError in index.js when processing audio without video. For example: http://pgc.prototypes.ru/store/audio/55e33f71-0000-0018-0000-0001da41731e.128.m3u8

Creation of Fragmented MP4 to support streaming

I'm interested to use this library with a long mpegts streaming (rather than segmented one, as in HLS).

I guess I have to follow this spec:
https://w3c.github.io/media-source/isobmff-byte-stream-format.html

I guess the following stages should be taken:

• Change all STTS, STSC, STCO to be zero-length.
• Add a traf boxes contain TFDT boxes.
• Use relative addressing.
• Using TRUN box.
• Pre-create an init segment which will be followed by the data segments. Data segments should consists MOOF and MDAT boxes.

The first stage seems simple, but I don't know how to do the other stages. I would be happy to contribute but I'm not very experienced with the internal structure of MP4, so any help is appreciated.

Thanks

MOTIVATION:

I would like to show live video with extra-low latency. I'm using WebSocket to send data to the client as soon as possible (I'm aware of other alternatives like MPEG-DASH, but it is out of scope now).

By pre-devision of the TS into chunks of full TS and PES packets, I succeeded to bypass the problem of jBinary streaming mentioned in this issue:
jDataView/jBinary#41

In addition I changed the mpegts library to support streaming context (index.js file), so future calls to mpegts can use previous segments passed to mpegts.

Now every TS segment is converted into MP4 complete file. The problem is that now the beginning of each segment missing some informations (e.g. first frames do not have key frames to refer).
By creating fragmented MP4 I will be able to feed MSE segment-by-segment.

How to kill videos when switch new video

Hi guys,
I have 2 video and every 5 min i switch one video and play it. But i can stop request or kill old video to show new video. It made my web crash when i play over 30 min.
Please have me thank guys !

Weird PES Packet Lengths

PES packets should never be longer than 188 bytes, including the header. Thus, the body data should always be less than that. If I put a breakpoint at

mpegts/mpegts_to_mp4/index.js

Line 44 in 2f5aa31

var nalStream = new jBinary(packet.data, H264),

in the Chrome developer console, though, I'm seeing the size of packet.data range all over the place- as low as 24 bytes (which make sense) and as high as 7319, which is ridiculous. Where are these huge sizes coming from?

When I run the same .ts files through a command-line MPEG-TS inspection utility, all of the packet sizes come out looking normal, so I'm guessing the PES parser here must be doing something beyond just extracting packets- but what?

Full screen? Volume controls?

Is there a way to put a fullscreen control and volume control with it?

Excess video data in mdat box

I've been stepping through the transmuxing code in Chrome developer tools and I noticed something rather odd: if you check the size of the H.264 data that has been written to stream right before constructing the MP4 file, but then save the resulting MP4 file and inspect it in a hex editor, the size of the video data in the mdat box is significantly larger in the final file than the size of the video data that was actually written into stream.

Furthermore, if you call stream.getBytes(stream.tell(), 0) in the console to see what bytes are actually supposed to be written, and then compare that with the contents of the final MP4 file, the exact contents of stream are in fact a prefix of the actual mdat data- so, all the correct stuff is there, but then a bunch of junk has just been apparently randomly tacked on the end.

What is that stuff and where is it stuff coming from?

Use MSE ?

Just wondering if you have considered using a Video element for display and feeding it with data using MSE (http://html5-demos.appspot.com/static/media-source.html)?
I am wondering if this could help avoid the glitches between segments currently experienced.

Demo not working, 403 forbidden

I'm testing out the demo at http://rreverser.github.io/mpegts/ and just seeing the loading wheel spin. When I look at the console, I see the error:

browser.js:148 
GET http://d3sporhxbkob1v.cloudfront.net/bill/vod/sample-video/400k.m3u8 403 (Forbidden)

Tried in both firefox and chrome.

Local installation problem

Hello.

I tried to use your package in local computer. I downloaded zip archive, unpacked it. Go to root directory and make 'npm install'

After that i opened index.html and in my Firefox ( 41.0.2) i had the error message:

23:52:27.880 Error: importScripts failed for jbinary at //jdataview.github.io/dist/jbinary.js
http://requirejs.org/docs/errors.html#importscripts1 require.js:8:0

What i should to do to fix this problem?

Thank you.

TypeError in worker.js when processing video without audio

Hi, Thanks for releasing a great project - hopefully one day mpeg2ts will be treated as a first class video container format by the leading web browsers but in the meantime this is brilliant.

In worker.js:463 I get a TypeError: Cannot read property 'profileMinusOne' of underfined when processing a video stream with no associated audio streams.

Feedback: Installation instructions

I have a feed, say at http://116.14.203.131/playlist.m3u8 that I would like to use this on. You don't see to provide instructions to do that.

Sidenote: Couldn't I just have a job in my server that converts the mpegts files to proper MP4 files for playback to save work in the browser?

[Node-webkit] Source ts from web with callback of javascript Uint8Array

I working in node-webkit so I have access to DOM and Node.js.

I want to be able to get ts chunks from website then covert to mp4 and output the data as a Uint8Array to use with the new MediaSource API

example of what it would look like

var ms = new MediaSource();

var video = document.getElementById('stream')
video.src = window.URL.createObjectURL(ms);

ms.addEventListener('sourceopen', function(e) {

    sourceBuffer = ms.addSourceBuffer(['video/mp4; codecs="avc1.42E01E,mp4a.40.2"']);

    mpegts_to_mp4('http://example.com/src.ts',  function (err, array) {
        sourceBuffer.appendBuffer(array); //must be Uint8Array
    });

}, false);

reduce latency by using websocket instead of ts file

hi first of all great project

we have server side that stream mpeg-ts (using ffmpeg)
from what we understood form the demo you send .ts file on each couple of seconds
we sending live stream from camera and therefore we cant have latency that is higher than one second
questions:

1. is it possible to achieve using your library, latency that is smaller than 1 sec?
2. if so, is it possible to stream the data directly(using websocket) to the client and transcoding it to h264, and in that way to reduce the latency ?
3. if no do you have any idea if it possible to achieve that goal Otherwise

thanks in advance

matyz

Convert blob transport stream to mp4

If I have a Blob of transport streams in my browser, can I convert that into an mp4 Blob? Instead of playing the video back, I'd just like to get the raw data converted from .ts to .mp4.

Thanks for a cool library!

example m3u8 to .ts?

Looking for an example on converting an m3u8 file to .ts and use with your node module.

MKV support?

Does this library support the MKV container format?

mp4 to mpegts

Hey,

Would it be hard to implement conversion in opposite direction? from mp4 to mpegts using Your code base? I'm pretty new with video stuff so to be honest i'm not sure where to start with it but i like the idea of container conversion 'on the fly'.

Parse Google Open Spherical Camera live preview

hi

can i use this library to display the result of Google's Open Spherical Camera API method called "camera.getLivePreview"? they say it returns motion jpeg as binary data ... so far i did not manage to parse the response ...
i am asking because i could not find any kind of docs or examples with the use case i am interested in

thanks

Video is small in Firefox (OS)

I'll continue here the discussion about the Firefox bug that we started in #12 .

Video is very small on my FF OS browser (2.1).

It worked fine for me on FF desktop 35 on Windows.

It doesn't work for @RReverser on Developer Edition 37.0a2.

I tested it on the same version (37.0a2) on Xubuntu, and it works for me.

What distribution are you using ?

Demo broken

Seems like the service provided by http://www.corsproxy.com/ has been discontinued, which breaks the HLS demo.

Opposite conversion

I was wondering if the opposite conversion is also available.

That is, playing an mpeg4 file in an hls player.

Image decoding using h264

Hi, great project. I will be very appreciate if you can help me with some questions.

1. Each frame is draw in canvas, right? So it's simple image?
2. I have ArrayBuffer that contains image but it's encoded in h264, is it possible to convert such bytes to normal bytes(rgb I think or what need to draw it on canvas) and then simple draw on canvas.
   Thanks

Uncaught TypeError: Unexpected value (71 !== 0)

Uncaught TypeError: Unexpected value (71 !== 0)

Tried to read where this error happens, looks that in jBinary when handling strict const.

The only strict const 0 found in mpegts is a PES start code, but jBinary doesn't report name of field =( So I failed to understand why do MPEG-TS start code is read when 0 was awaited.

Problem happens on attached file, which is played on any HLS player: http://images.maxidoors.ru/47-10000.ts

Can I help with something else? It is not very easy to debug jBinary because I'm unfamiliar with it, but I can help with any video part of this code.

What about blob urls?

Would it be possible to use your lib with blob urls? Then you could just feed a video element vs the canvas drawing...

Does not work in Safari

Do you see any particular reason why it doesn't work in safari?

I did some debugging, and my feeling is that after this code is called

(function canplaythrough() {
    console.log('converted ' + descriptor);
    videos[data.index] = this;
    if ((!currentVideo || currentVideo.ended) && data.index === nextIndex) {
        this.play();
    }
}).call(video);

"play" event is not triggered, that't is, this callback is never called

video.addEventListener('play', function () {

must be some obvious issue, since the video is actually converted.

mobile ?

It don't seem to work on any mobile devices