vardius/react-user-media

React wrapper for getUserMedia

React UserMedia

Table of Content

• About
• How to use
  • Installation
  • Examples
    • Hook
    • Context
      • Context Hook
      • HOC
• License

ABOUT

React wrapper for getUserMedia.

Contributors:

• Rafał Lorenz

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