ts-h264-live-player

Typescript portage of 131/h264-live-player, the client-side h264 video player using WebSocket.

This package needs to be used with either the server-side of 131/h264-live-player or either with the package pistreamer.

Installation

Via your favorite package manager:

#npm
npm i ts-h264-live-player

#yarn
yarn add ts-h264-live-player

Or by downloading the Javascript file (see releases on Github):

<script src="path/to/ts-h264-live-player.js"></script>

Usage

Create an instance of the player:

// Create a canvas element
let canvas = document.createElement("canvas");
// Or select an existing one
canvas = document.getElementById("mycanvas");
// And pass it to the player.
const player = new WSAvcPlayer(canvas);

Connect the player to the server:

// By directly giving the address
player.connectByUrl("ws://someAddress.lan");
// Or by giving an Websocket object
const ws = new WebSocket("ws://someAddress.lan");
player.connectWithCustomClient(ws);

And control your video stream:

// Using directly the methods
player.startStream();
player.stopStream();
// Or just by sending directly the request.
player.send("REQUESTSTREAM");
player.send("STOPSTREAM");

Note that certain requests may not work depending on the server-side app you are using. Please, refer to the server-side app documentation.

Build it !

You can build your player js file by building it directly from the repo. To do so, clone the repo as such:

git clone https://github.com/TeaFlex/ts-h264-live-player

Install all the dependencies:

npm i #or "yarn"

Then build it with the following command:

npm run build #or "yarn build"

The compiled file will appear in the public folder.

If you want to contribute to the project, you can also run it with:

npm start #or "yarn start"

That command will compile the project and serve the content of the public folder.