# react-chromecast
> A abstraction of cast lib to react.js
Latest version **0.0.5-alpha** (published 2020-04-21) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-chromecast
pnpm add react-chromecast
yarn add react-chromecast
bun add react-chromecast
```
## Health
**Score 40/100 (D)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads; pre 1.0.
Negative: abandoned.
## Facts
| | |
|---|---|
| Version | 0.0.5-alpha |
| Published | 2020-04-21 |
| First published | 2020-04-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 277.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 22 |
| Author | TecladistaProd |
| Maintainers | tecladistaprod |
| Keywords | TypeScript, chromecast, JavaScript, Cast |
## Links
- npm: https://www.npmjs.com/package/react-chromecast
- Repository: https://github.com/tecladistaprod/react-chromecast
- Homepage: https://github.com/tecladistaprod/react-chromecast#readme
- Issues: https://github.com/tecladistaprod/react-chromecast/issues
- npm.io page: https://npm.io/package/react-chromecast
## Dependencies (1)
- [react-helmet](https://npm.io/package/react-helmet.md) ^6.0.0
## Alternatives
- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads
## Recent versions
- 0.0.5-alpha (latest) — 2020-04-21
- 0.0.2-alpha — 2020-04-20
- 0.0.1-alpha — 2020-04-20
## README
# react-chromecast
**react-chromecast** is abstraction to cast_sender and cast_receiver (chromecast libs) of google.
> This lib just work in **chrome** and chrome based browsers like the new **Edge**.
> This lib use react hooks.
> This is a working in progress lib then could have some bugs and not have some functions.
# Features
- Connect browser with chromecast
- Send url media to chromecast play
- add more url media to chromecast queue
- play
- pause
- jump to specified second
- jumpt to next media in queue
- jump to prev media in queue
### How to use
First you need to install the lib using using npm `npm install react-chromecast` or using yarn `yarn add react-chromecast`
Second, every __react-chromecast__ hooks should by a component inside **CastProvider**
```jsx
import React from 'react';
import CastProvider from 'react-chromecast';
function App () {
return (
{
// your components goes here
}
)
}
```
after that you can use the **useCast** and **useMedia** react-chromecast hooks inside your components.
Usage Example:
#### useCast
useCast function, you could pass an object argument with 2 properties `initialize_media_player` where you pass media receiver id or `"DEFAULT_MEDIA_RECEIVER_APP_ID"` to use default media receiver player, and `auto_initialize` where you pass a boolean value, if you not pass this you should initialize cast media player receiver by your self using `cast.initiliazeCast` function, passing the media receiver id, if you pass true value you should pass `initialize_media_player`.
```jsx
// CastButton component
import React, { useCallback } from 'react';
import { useCast } from 'react-chromecast';
function CastButton () {
const cast = useCast({
initialize_media_player: "DEFAULT_MEDIA_RECEIVER_APP_ID",
auto_initialize: true,
})
const handleClick = useCallback(async () => {
if(cast.castReceiver) {
await cast.handleConnection();
}
}, [cast.castReceiver, cast.handleConnection])
return (
)
}
```
useCast will return an object with `castReceiver`, `castSender`, `isConnect`, `initializeCast`, `handleConnection`.
- **castReceiver**: is undefined until the CastProvider provide castReceiver from window.chrome.cast, you could use to do everything by yourself. documentation [here](https://developers.google.com/cast/docs/reference/chrome/chrome.cast).
- **castSender**: is undefined until the CastProvider provide castSender from window.cast.framework, you could use to do everything by yourself. documentation [here](https://developers.google.com/cast/docs/reference/chrome/cast.framework).
- **isConnect**: is a boolean indicating if the page is connect with chromecast.
- **initializeCast**: if auto_initialize was passe with `true` value, this will be undefined, if not, will be an async function to initialize cast media player, you should pass media receiver id like parameter.
- **handleConnection**: async function to connect and disconnect page with chromecast
#### useMedia
```jsx
// Videocomponent
import React, { useCallback } from 'react';
import { useMedia } from 'react-chromecast';
const mediaSrc = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
function Video() {
const media = useMedia()
const playVideo = useCallback(async () => {
if (media) {
await media.playMedia(mediaSrc);
}
}, [media]);
return (
<>
)
}
```
useMedia will return an object with `playMedia`, `addMedia`, `play`, `pause`, `isMedia`, `next`, `prev`, `to`.
- **playMedia**: async function to play an media url on chromecast, you should pass an media url like function parameter
- **addMedia**: async function to add an media url to chromecast queue, you should pass an media url like function parameter
- **play**: async function to play actual chromecast media
- **pause**: async function to pause actual chromecast media
- **isMedia**: boolean to indicate if chromecast is playing an media (when connected)
- **next**: async function to jump to next video in chromecast queue
- **prev**: async function to jump to prev video in chromecast queue
- **to`**: async function to jump to second passed in parameter
> media url should be an url accessible to chromecast like an external url eg: `"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"`, or an internal server accessible in the same network.
> actually you need to use playMedia before use other functions like (addMedia).
## Help this Project
****
You can **help** this project supporting us in the button below.
[](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=HHWEKX97SKYAQ)
---
_Source: https://npm.io/package/react-chromecast · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._