npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

media-stream-player

v13.1.1

Published

Player built on top of media-stream-library

Downloads

1,516

Readme

Media Stream Player JS

CI NPM

Media Stream Player is a video player for Axis cameras based on React. The main idea is to define the video state entirely within specialized React components for each of the different supported formats (currently MP4 over HTTP, RTP over WebSocket, and still images). The main video player will only handle the intended video state (attached to handlers) and format. The player is built on top of the Media Stream Library which provides basic playing functionality for the different formats.

You can either import the Player or BasicPlayer and use them directly (see the example applications). If you want to build your own customized player, you can look at the latter component and build your own player, using the Container, Layer, and PlaybackArea components.

Basic requirements

This library specifically targets AXIS IP cameras because we make underlying API-calls to AXIS specfic APIs to get the video streams.

Firmware requirements

  • For H.264 to work you need at least firmware 6.50 (LTS)
  • For MP4 to work you need at least firmware 9.80 (LTS)

Structure

Installation

As a stand-alone element

If you don't use the player as part of you React app, the easiest way to use it is to download the media-stream-player.min.js file from the releases page and include it in your html file as a script:

<script src="media-stream-player.min.js"></script>

The bundle is built to support the browserslist "latest 2 versions, not dead", which should work on most modern browsers. If you need support for older browsers, you can use the (larger) legacy bundle media-stream-player.legacy.min.js instead, but note that this isn't tested, so you might run into some issues.

Then, you can use the <media-stream-player/> tag, similar to how you would use <video/> to include a video element, and provide the camera IP as hostname:

<media-stream-player hostname="192.168.0.90" />

You can find an example of this under example-player-webcomponent.

Supported properties right now are:

| Property | Comment | | --------------------- | ---------------------------------------------------------------------------------- | | variant | Supported choices are basic or advanced. Refers to BasicPlayer and Player. | | hostname | The ip address to your device | | autoplay | If the property exists, we try and autoplay your video | | autoretry | If the property exists, we try to auto retry your video on errors and if ended | | secure | If the property exists, we will connect with https instead of http | | format | Accepted values are JPEG, RTP_JPEG, RTP_H264, or MP4_H264 | | compression | Accepted values are 0..100, with 10 between each step | | resolution | Written as WidthXHeight, eg 1920x1080 | | rotation | Accepted values are 0, 90, 180 and 270 | | camera | Accepted values are 0...n or quad depending on your device | | | RTP_H264 / RTP_JPEG / MP4_H264 specific properties | | fps | Accepted values are 0...n | | audio | Accepted values are 0 (off) and 1 (on) | | clock | Accepted values are 0 (hide) and 1 (show) | | date | Accepted values are 0 (hide) and 1 (show) | | text | Accepted values are 0 (hide text overlay) and 1 (show text overlay) | | textstring | A percent-encoded string for the text overlay | | textcolor | Accepted values are black and white | | textbackgroundcolor | Accepted values are black, white, transparent and semitransparent | | textpos | Accepted values are 0 (top) and 1 (bottom) |

Example:

<media-stream-player hostname="192.168.0.90" format="RTP_H264" autoplay />

You may need to start a localhost server to get H.264 or Motion JPEG video to run properly. It doesn't work with the file:/// protocol. The easiest way to do that is to run:

First run

just run example-player-webcomponent

Note that using anything other than the actual hostname you're hosting from will result in CORS errors for some video formats. You'll need to proxy the camera or load a page from the camera (in which case you can set window.location.host as the hostname).

As part of your React application

If you want to import the player as a React component into your own code, or use parts of the player, you'll need to install the package as a dependency. Make sure you have Node installed on your machine.

Then, to install the package:

npm install media-stream-player

You will also need to install a number of peer dependencies such as luxon, which we use for date and time purposes, react/react-dom, styled-components, and media-stream-library. You can find an example of this under example-player-react, e.g.:

import { BasicPlayer } from 'media-stream-player'

There have been issue where bundlers pick up the wrong variant of media-stream-player, in which case you can try to override the resolution with an alias that points directly at the browser variant (and not the node) variant, e.g.:

{
  //configuration options
  alias: {
    "media-stream-library": "media-stream-library/dist/browser"
  }
}

To run our example react app, you can start a vite dev server with:

export MSP_CAMERA=http://192.168.0.90
node vite.mjs

where you specify the IP of the camera you want to proxy as the MSP_CAMERA environment variable (default is 192.168.0.90). The vite dev server will proxy requests to the camera, so that you'll have no CORS issues for any format.

Debugging

In the browser, you can set localStorage.debug = 'msp:*' to log everything related to just this library (make sure to reload the page after setting the value). You can also debug a specific component by using one of the following from the table below.

| Detailed debugging | | ----- | | msp:http-mp4-video | | msp:ws-rtsp-video | | msp:still-image | | msp:api |

FAQ

Does this library support audio? Yes, yes it does. With a few caveats though.

  • Make sure your AXIS camera actually supports audio
  • Make sure the audio is enabled on the camera.
  • It only works with H.264 and only after user interaction with the volume slider

Icons

The icons used are from https://github.com/google/material-design-icons/, which are available under the Apache 2.0 license, more information can be found on: http://google.github.io/material-design-icons

The spinner is from https://github.com/SamHerbert/SVG-Loaders, available under the MIT license.