Skip to content

Video player for browser that is able to play realtime low latency h264 video stream from websocket.

License

Notifications You must be signed in to change notification settings

vr-wonny/ws-avc-player

 
 

Repository files navigation

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

About

Video player for browser that is able to play realtime low latency h264 video stream from websocket.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 84.5%
  • HTML 15.5%