Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vardius/react-user-media
React wrapper for getUserMedia
https://github.com/vardius/react-user-media
Last synced: 3 months ago
JSON representation
React wrapper for getUserMedia
- Host: GitHub
- URL: https://github.com/vardius/react-user-media
- Owner: vardius
- License: mit
- Created: 2019-05-20T03:27:45.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T15:20:32.000Z (over 1 year ago)
- Last Synced: 2024-04-09T11:34:05.266Z (3 months ago)
- Language: TypeScript
- Size: 570 KB
- Stars: 21
- Watchers: 1
- Forks: 3
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Lists
- awesome-react-hooks - `react-user-media`
- awesome-react-hooks-cn - `react-user-media`
- awesome-react-hooks - `react-user-media`
- fucking-awesome-react-hooks - `react-user-media`
- awesome-react-hooks - `react-user-media`
README
React UserMedia
================
[](https://travis-ci.org/vardius/react-user-media)
[](https://www.npmjs.com/package/@vardius/react-user-media)
[](https://www.npmjs.com/package/@vardius/react-user-media)
[](LICENSE)
[](https://codecov.io/gh/vardius/react-user-media)
Table of Content
- [About](#about)
- [How to use](#how-to-use)
- [Installation](#installation)
- [Examples](#examples)
- [Hook](#hook)
- [Context](#context)
- [Context Hook](#context-hook)
- [HOC](#hoc)
- [License](#license)
ABOUT
==================================================
React wrapper for getUserMedia.
Contributors:
* [Rafał Lorenz](http://rafallorenz.com)
Want to contribute ? Feel free to send pull requests!
Have problems, bugs, feature ideas?
We are using the github [issue tracker](https://github.com/vardius/react-user-media/issues) to manage them.
HOW TO USE
==================================================
1. [Chat Example](https://github.com/vardius/react-webrtc-chat)
## Getting started
### Installation
```bash
npm install @vardius/react-user-media
```
### Examples
Use `useUserMedia` hook to request user media from navigator.
#### Hook
```javascript
import React from 'react';
import { UserMediaError, useUserMedia } from '@vardius/react-user-media';
function App() {
const { stream, error } = useUserMedia({ audio: true, video: true });
if (error) {
return (
);
}
return (
{ video.srcObject = stream }} />
);
}
export default App;
```
#### Context
Use `UserMediaProvider` to request user media from navigator and pass it down with context.
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { UserMediaProvider } from '@vardius/react-user-media';
import App from './App';
ReactDOM.render(
,
document.getElementById("root")
);
```
you can access context user media value in two ways:
##### Context Hook
```javascript
import React from 'react';
import { UserMediaError, useUserMediaFromContext } from '@vardius/react-user-media';
function App() {
const { stream, error } = useUserMediaFromContext();
if (error) {
return (
);
}
return (
{ video.srcObject = stream }} />
);
}
export default App;
```
##### HOC
```javascript
import React from 'react';
import { UserMediaError, withUserMedia } from '@vardius/react-user-media';
function App({ userMedia }) {
const { stream, error } = userMedia;
if (error) {
return (
);
}
return (
{ video.srcObject = stream }} />
);
}
export default withUserMedia(App);
```
License
-------
This package is released under the MIT license. See the complete license in the package:
[LICENSE](LICENSE.md)