https://github.com/ianhenrydev/react-native-telestrator

Video telestrator that allows for playback, canvas drawings, and screenshots
https://github.com/ianhenrydev/react-native-telestrator

canvas react-native sports video

Last synced: 24 days ago
JSON representation

Video telestrator that allows for playback, canvas drawings, and screenshots

• Host: GitHub
• URL: https://github.com/ianhenrydev/react-native-telestrator
• Owner: ianhenrydev
• License: mit
• Created: 2023-02-13T17:17:20.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-02-14T20:52:42.000Z (over 3 years ago)
• Last Synced: 2025-02-11T18:56:24.545Z (over 1 year ago)
• Topics: canvas, react-native, sports, video
• Language: TypeScript
• Homepage:
• Size: 11.4 MB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-native-telestrator

[![npm](https://img.shields.io/npm/v/react-native-telestrator.svg)](https://www.npmjs.com/package/react-native-telestrator)

Video telestrator that allows for playback, canvas drawings, and screenshots.

![Example Screenshot](assets/example-screenshot.png)

## Installation

Install the library using yarn:

`yarn add react-native-telestrator`

Or npm:

`npm install --save react-native-telestrator`

## Usage

React Native Telestrator uses `expo-av` for video playback. Simply pass an `AVPlaybackSource` object to the `Telestrator` component.

See the [expo-av documentation](https://docs.expo.dev/versions/latest/sdk/av/) for more information.

```typescript

import { Telestrator } from 'react-native-telestrator'

const videoSource: AVPlaybackSource = { uri: require('../assets/example.mp4') }

export default function App() {

  return 

}

```

## Splitscreen

React Native Telestrator supports playback and drawing of two videos side by side. To use just pass `splitscreenVideoSource` as a prop.

``