# react-native-hk-video

> hk video custom

Latest version **1.1.6** (published 2021-02-07) · 0 weekly downloads

## Install

```sh
npm install react-native-hk-video
pnpm add react-native-hk-video
yarn add react-native-hk-video
bun add react-native-hk-video
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2021-02-07 |
| First published | 2020-12-02 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 38.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | suxianqing |
| Keywords | react-native |

## Links

- npm: https://www.npmjs.com/package/react-native-hk-video
- npm.io page: https://npm.io/package/react-native-hk-video

## Recent versions

- 1.1.6 (latest) — 2021-02-07
- 1.1.5 — 2021-01-20
- 1.1.4 — 2021-01-18
- 1.1.3 — 2021-01-18
- 1.1.2 — 2021-01-14
- 1.1.1 — 2021-01-13
- 1.1.0 — 2021-01-13
- 1.0.9 — 2021-01-13
- 1.0.8 — 2021-01-13
- 1.0.7 — 2021-01-12
- 1.0.6 — 2021-01-08
- 1.0.5 — 2020-12-29
- 1.0.4 — 2020-12-25
- 1.0.3 — 2020-12-25
- 1.0.2 — 2020-12-10
- … 2 more at https://npm.io/package/react-native-hk-video/versions

## README

# react-native-hk-video

## Getting started

`$ npm install react-native-hk-video --save`

### Mostly automatic installation

`$ react-native link react-native-hk-video`

### Manual installation


#### iOS

1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
2. Go to `node_modules` ➜ `react-native-hk-video` and add `RNHkVideo.xcodeproj`
3. In XCode, in the project navigator, select your project. Add `libRNHkVideo.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
4. Run your project (`Cmd+R`)<

#### Android

1. Open up `android/app/src/main/java/[...]/MainActivity.java`
  - Add `import com.qb.hkVideo.RNHkVideoPackage;` to the imports at the top of the file
  - Add `new RNHkVideoPackage()` to the list returned by the `getPackages()` method
2. Append the following lines to `android/settings.gradle`:
  	```
  	include ':react-native-hk-video'
  	project(':react-native-hk-video').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-hk-video/android')
  	```
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
  	```
      compile project(':react-native-hk-video')
  	```
4. tips need @react-native-community/slider
    ```
      yarn add @react-native-community/slider
      react-native link @react-native-community/slider
      doc https://github.com/callstack/react-native-slider
    ```  


## Usage
```javascript
import HkPlayer from "react-native-hk-video";

const selectCameraInfos={
  // id:'25908ad1-b467-4d9f-8292-6f87854cd1be',
  id: '*******',
  name:"测试摄像头1",
  channel:"1",
  status: '1',
}

const requestInfo={
  token:'',
  api:'http://***',
  protocol:'rtsp',
  getPlayUrl:"/***",
  controlUrl:"/***",
  getPlayBackUrl:"/***",
}

<HkPlayer
  roundCiameter={180}  //控制圈的直径
  controlButSize={23}  
  offsetHeight={60}
  offsetWidth={50}
  requestInfo={requestInfo}
  playerHeight={550}  //播放器高度
  selectCameraInfos={selectCameraInfos}
  cameraList={cameraList}
  backHandler={} //返回按钮事件
  invalidTokenHander={} //token过期事件
  showCloudTypes={["1"]} //显示云台控制的摄像头类型 字符串
/>
// TODO: What to do with the module?
RNHkVideo;


```

---
_Source: https://npm.io/package/react-native-hk-video · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._