Skip to content
Video player for browser that is able to play realtime low latency h264 video stream from websocket.
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Broadway @ d32f9de add Broadway as submoduler, cleanup Oct 19, 2019
example feat: embed wasm into the lib so it works out of the box Oct 21, 2019
lib feat: embed wasm into the lib so it works out of the box Oct 21, 2019
player add Broadway as submoduler, cleanup Oct 19, 2019
.eslintignore 2.0.2 Oct 22, 2019
.eslintrc.yml here we go.... Nov 22, 2017
.gitignore here we go.... Nov 22, 2017
.gitmodules add Broadway as submoduler, cleanup Oct 19, 2019
.npmignore here we go.... Nov 22, 2017
AUTHORS
CHANGELOG.md 2.0.2 Oct 22, 2019
LICENSE here we go.... Nov 22, 2017
README.md Update readme example Oct 22, 2019
babel.config.js update dependencies, improve example, get rid of player canvas styling Oct 18, 2019
package-lock.json here we go.... Nov 22, 2017
package.json 2.0.2 Oct 22, 2019
webpack.config.js feat: embed wasm into the lib so it works out of the box Oct 21, 2019
yarn.lock feat: embed wasm into the lib so it works out of the box Oct 21, 2019

README.md

Stream realtime low-latency h264 video directly to the browser. Comes with a browser player, and streaming server. Uses Broadway browser decoder and player. Ideal for for Raspberry pi cam streaming.

Usage

Server:

const AvcServer = require('ws-avc-player/lib/server')
const { WebSocketServer } = require('@clusterws/cws') // works with ws, legacy uws
const wss = new WebSocketServer({ port: 3333 })
const avcServer = new AvcServer(wss, 640, 480) //initial width and height (it adapts to the stream)

avcServer.setVideoStream(h264Stream)

More detailed in example/index.js

Client:

<html>
  <body>
    <!-- define the element to hold the canvas -->
     <div id="video-box" />
    <!-- provide WSAvcPlayer -->
    <script type="text/javascript" src="WSAvcPlayer.js" />
    <script type="text/javascript">
      //initialize the player, if useWorker: true, than you must have `/Decoder.js` availible at the root of the domain.
      var wsavc = new WSAvcPlayer.default({useWorker:false}); 
      //append the canvas to the box element, you can style the box element and canvas.
      document.getElementById('video-box').appendChild(wsavc.AvcPlayer.canvas)
      //connect to the websocket
      wsavc.connect("ws://" + document.location.host+":3333");
    </script>    
  </body>
</html>

More detailed in example/html/index.html

Running the demo

git clone https://github.com/matijagaspar/ws-avc-player
cd ws-avc-player
npm install
npm run example

# browse to http://127.0.0.1:8080/ for a demo player

then run

ffmpeg -framerate 30 -video_size 640x480 -f [driver] -i [device]  -vcodec libx264 -vprofile baseline -b:v 500k -bufsize 600k -tune zerolatency -pix_fmt yuv420p -r 15 -g 30 -f rawvideo tcp://localhost:5000

or

raspivid -t 0 -w 640 -h 480 -hf -fps 15 -o - | nc localhost 5000

alternatively run:

npm run example raspivid

It will automatically run raspivid too

Using it in your own project

yarn add ws-avc-player

On Client

  • import WSAvcPlayer from 'ws-avc-player'
  •       const wsavc = new WSAvcPlayer({useWorker:true})
          wsavc.connect(serverUrl);
    
    

On Server:

  • See example/index.js

TODO:

  • Decoder as worker
  • More docs
  • More cleanup
  • Audio
  • Ability to change video resolution or better parse sps/pps
  • Decent performance

Credits

You can’t perform that action at this time.