@skywatch/react v1.2.6

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={}
/>

FlvPlayer

This is a component for playing live streaming.

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

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

Props

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");