Installation

Step 1

npm install @skywatch/react

or

yarn add @skywatch/react

Step 2

Option 1:

Use Oauth 2.0 to get access token

Option 2:

Before you start developing, you have to implement Skywatch library on your server. Please follow the guide below to create a POST method url on your server, and then keep the POST method url you generated.

Ex. Implement Skywatch library on node server, and then generate the POST API - https://localhost:3000/skywatch_service_url

Guide:

Skywatch Server Installation Guide

Usage

import React, {useState, useEffect} from 'react';
import {ArchivesPlayer, initialize} from '@skywatch/react';

const APP = () => {
  const [player, setPlayer] = useState(null);

  useEffect(() => {
    initialize('/your_server_url_with_skywatch_library', 'token');
  }, []);

  const options = {
    autoplay: true,
    muted: true,
    aspectRatio: '16:9',
    mobileView: false,
  };

  return (
    <ArchivesPlayer
      onPlayerInit={setPlayer}
      onPlayerDispose={setPlayer}
      deviceId={'1234'}
      archiveId={'123456'}
      smart_ff={0}
      seek={0}
      playerOptions={options}
    />
  );
};

API Document

initialize

This method is required before using any Skywatch API.

import Skywatch from '@skywatch/react';

Skywatch.initialize('/your_server_url_with_skywatch_library', 'token');

ArchivesPlayer

This is a component for playing archive video.

<ArchivesPlayer
  onPlayerInit={}
  onPlayerDispose={}
  deviceId={}
  archiveId={}
  smart_ff={}
  seek={}
  playerOptions={}
  style={}
  controls={}
  onTimeUpdate={}
  onEnded={}
  onReady={}
/>

| Property | Type | Required | Default | Description | | ----------------- | -------------- | -------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | | onPlayerInit | function | YES | | Pass state into player to allow control of player. For more info please check Video.js doc. | | onPlayerDispose | Function | YES | | Pass state into player to dispose when video is released. | | deviceId | string | YES | | Decide on which camera is going to play. | | archiveId | string | YES | | Decide on which archive is going to play. | | smart_ff | number | NO | 0 | 0 -> close, 1 -> open | | seek | number | NO | 0 | Jump to specific time when video begins to play. | | playerOptions | object | NO | { autoplay: true, muted: true, aspectRatio: '16:9', mobileView: false, }; | Video option setting. For more info please check Video.js doc. | | style | inline-style | NO | | Custom style for video player. | | controls | bool | NO | true | Show video controls | | onTimeUpdate | func | NO | | Callback fired when the current playback position has changed | | onEnded | func | NO | | Callback fired when the end of the media resource is reached | | onReady | func | NO | | Callback fired when the video is ready to play |

FlvPlayer

This is a component for playing live streaming.

<FlvPlayer
  deviceId={}
  onPlayerInit={}
  onPlayerDispose={}
  style={}
  controls={}
  onReady={}
/>

| Property | Type | Required | Default | Description | | ----------------- | -------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | deviceId | string | YES | | Decide on which camera is going to play. | | onPlayerInit | function | YES | | Pass state into player to allow control of player. For more info please check flv.js doc. | | onPlayerDispose | function | YES | | Pass state into player to dispose when video is released. | | style | inline-style | NO | | Custom style for video player. | | controls | bool | NO | true | Show video controls | | onReady | func | NO | | Callback fired when the video is ready to play |

CameraView

This is a component for playing live streaming and archive video.

<CameraView deviceId={} renderLoading={} />

You need to import the CSS file to your JavaScript file

import '@skywatch/react/lib/style/camera-view.css';

Custom Style

If you want to overwrite the default style, you can use the browser dev tool to find out the id/class of the element, and create your own CSS file to overwrite it.

/* overwrite.css */
#controlbar_container {
  background-color: burlywood;
}
.meta_timeline_i {
  background-color: coral !important;
}

Then, import the overwrite.css file

import '@skywatch/react/lib/style/camera-view.css';
import 'overwrite.css';

Custom Controls

Methods to control the video are exposed by useImperativeHandle hook. To access these methods, you need to create your ref and pass it to CameraView component. Also, you have to disable the default controls. Then you can use the exposed methods by the ref. For example,

const APP = () => {
  const cameraViewRef = useRef();
  return (
    <>
      <CameraView deviceId={DEVICE_ID} controls={false} ref={cameraViewRef} />
      <button onClick={() => cameraViewRef.current.play()}>play</button>
      <button onClick={() => cameraViewRef.current.pause()}>pause</button>
    </>
  );
};

Methods

| Method | Parameters | Returns | Description | | ------------------ | ---------------- | ------- | ------------------------------------------ | | play() | none | none | Play the video. | | pause() | none | none | Pause the current video. | | fastForward() | none | none | Start fast forward mode. | | toggleMute() | none | none | Mute or unmute the video. | | goLive() | none | none | Start playing live video. | | seek(string) | Number\|String | none | Play video at the provided unix timestamp. | | getAllArchives() | none | array | Get data of all archives. | | isLive() | none | bool | Check if the video is in live mode. |

Props

| Property | Type | Required | Default | Description | | --------------- | ---------- | -------- | ---------------------------------------- | -------------------------------------------------- | | deviceId | string | YES | | Decide on which camera is going to play. | | renderLoading | function | NO | () => <div style={loadingStyle}></div> | Function returns the loading element. | | controls | bool | NO | true | If false, the default controls will not be used. |

License

• This project is inspired by video.js.
• This project is inspired by flv.js.
• Licensed under the Apache License, Version 2.0 (the "License");