https://github.com/mbebenita/Broadway

A JavaScript H.264 decoder.
https://github.com/mbebenita/Broadway

Last synced: 20 days ago
JSON representation

A JavaScript H.264 decoder.

• Host: GitHub
• URL: https://github.com/mbebenita/Broadway
• Owner: mbebenita
• License: other
• Created: 2011-10-14T18:20:43.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2023-01-22T15:40:35.000Z (over 1 year ago)
• Last Synced: 2024-04-18T23:22:59.165Z (2 months ago)
• Language: C
• Homepage:
• Size: 90.4 MB
• Stars: 2,703
• Watchers: 116
• Forks: 423
• Open Issues: 90
• Metadata Files:
  • Readme: README.markdown
  • License: LICENSE

Lists

• awesome-stars - Broadway
• awesome-stars - mbebenita/Broadway - A JavaScript H.264 decoder. (others)
• awesome-inspiration - Broadway

README

        
Broadway.js

===========

A JavaScript H.264 decoder.

View a Live Demo:  

http://mbebenita.github.io/Broadway/foxDemo.html  

http://mbebenita.github.io/Broadway/storyDemo.html  

http://mbebenita.github.io/Broadway/treeDemo.html  

The video player first needs to download the entire video before it can start playing, thus appearing to be a bit slow at first, so have patience. You can start the video by clicking on each player. The top left player runs on the main thread, while the remaining players run in background worker threads.

Use an example node app as template:  

https://github.com/soliton4/BroadwayStream  

Technical info

==============

The demo is Android's H.264 decoder compiled with Emscripten to JavaScript, then further optimized with

Google's JavaScript closure compiler and further optimized by hand to use WebGL.

Building the demo:

Install and configure Emscripten (https://github.com/kripken/emscripten)  

The current version of Broadway was built with emscripten 1.35.12  

The code for the demo is in the Decoder folder, to build it run the make.py python script. (Requires at least python 2.7)

Encoding Video

==============

The decoder expects an .mp4 file and does not support weighted prediction for P-frames and CABAC entropy encoding. To create such bitstreams use ffmpeg and x264 with the following command line options:

```

ffmpeg -y -i sourceFile -r 30000/1001 -b:a 2M -bt 4M -vcodec libx264 -pass 1 -coder 0 -bf 0 -flags -loop -wpredp 0 -an targetFile.mp4

```

API

===

Player.js, Decoder.js and YUVWebGLCanvas.js all have a unified module definition.  

You can use them as plain js files or with common.js / AMD  

# Player.js:  

```

var p = new Player({

  

});

p.canvas; // the canvas - put it where you want it

p.decode();

```

## Options:  

useWorker true / false  

Decode in a worker thread  

workerFile   

Path to Decoder.js. Only neccessary when using worker. Defaults to "Decoder.js"  

webgl true / "auto" / false  

Use webgl. defaults to "auto"  

size { width: , height:  }  

Initial size of the canvas. Canvas will resize after video starts streaming.  

## Properties:  

canvas  

domNode  

refers to the canvas element.  

## methods:  

decode ()

Feed the decoder with h264 stream data.  

# Decoder.js:  

```

var p = new Decoder({

  

});

p.onPictureDecoded; // override with a callback function

p.decode();

```

## options:  

rgb true / false  

If true will convert the image to rgb. sligtly slower.  

## properties:  

onPictureDecoded  callback function(, width, height)

Will be called for each frame.

## methods:  

decode ()

Feed the decoder with h264 stream data.  

# [Real World Uses of Broadway.js](https://github.com/mbebenita/Broadway/wiki/Real-World-Uses)