/react-user-media

React wrapper for getUserMedia

Primary LanguageTypeScriptMIT LicenseMIT

React UserMedia

Build Status npm version npm downloads license codecov

Table of Content

ABOUT

React wrapper for getUserMedia.

Contributors:

Want to contribute ? Feel free to send pull requests!

Have problems, bugs, feature ideas? We are using the github issue tracker to manage them.

HOW TO USE

  1. Chat Example

Getting started

Installation

npm install @vardius/react-user-media

Examples

Use useUserMedia hook to request user media from navigator.

Hook

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 (
      <UserMediaError error={error} />
    );
  }

  return (
    <video autoPlay ref={video => { video.srcObject = stream }} />
  );
}

export default App;

Context

Use UserMediaProvider to request user media from navigator and pass it down with context.

import React from 'react';
import ReactDOM from 'react-dom';
import { UserMediaProvider } from '@vardius/react-user-media';

import App from './App';

ReactDOM.render(
    <UserMediaProvider constraints={{ audio: true, video: true }}>
        <App />
    </UserMediaProvider>,
    document.getElementById("root")
);

you can access context user media value in two ways:

Context Hook
import React from 'react';
import { UserMediaError, useUserMediaFromContext } from '@vardius/react-user-media';

function App() {
  const { stream, error } = useUserMediaFromContext();

  if (error) {
    return (
      <UserMediaError error={error} />
    );
  }

  return (
    <video autoPlay ref={video => { video.srcObject = stream }} />
  );
}

export default App;
HOC
import React from 'react';
import { UserMediaError, withUserMedia } from '@vardius/react-user-media';

function App({ userMedia }) {
  const { stream, error } = userMedia;

  if (error) {
    return (
      <UserMediaError error={error} />
    );
  }

  return (
    <video autoPlay ref={video => { video.srcObject = stream }} />
  );
}

export default withUserMedia(App);

License

This package is released under the MIT license. See the complete license in the package:

LICENSE