react-native-webrtc-web-shim/README.md

A shim for React Native WebRTC to enable support for React Native Web

[<img src="https://avatars.githubusercontent.com/u/42463376" alt="React Native WebRTC" style="height: 6em;" />](https://github.com/react-native-webrtc/react-native-webrtc-web-shim)

# React-Native-WebRTC-Web-Shim

[![npm version](https://img.shields.io/npm/v/react-native-webrtc-web-shim)](https://www.npmjs.com/package/react-native-webrtc-web-shim)
[![npm downloads](https://img.shields.io/npm/dm/react-native-webrtc-web-shim)](https://www.npmjs.com/package/react-native-webrtc-web-shim)
[![Discourse topics](https://img.shields.io/discourse/topics?server=https%3A%2F%2Freact-native-webrtc.discourse.group%2F)](https://react-native-webrtc.discourse.group/)

Add support for `react-native-web` to a `react-native-webrtc` app.

## Getting Started

Use one of the following preferred package install methods to immediately get going.

**npm:** `npm install react-native-webrtc-web-shim --save`  
**yarn:** `yarn add react-native-webrtc-web-shim`  
**pnpm:** `pnpm install react-native-webrtc-web-shim`

## Extra Required Steps

Import directly from our library instead of `react-native-webrtc`.

```javascript
import {
  RTCPeerConnection,
  RTCIceCandidate,
  RTCSessionDescription,
  RTCRtpTransceiver,
  RTCRtpReceiver,
  RTCRtpSender,
  RTCErrorEvent,
  MediaStream,
  MediaStreamTrack,
  mediaDevices,
  permissions,
  registerGlobals,
  RTCView,
} from 'react-native-webrtc-web-shim';
```

When displaying the `RTCView` component make sure to give it the `stream` object as a prop instead of `streamURL`, you'll then be using an HTML5 video element on your Web app.

Simply change this.

```javascript
<RTCView streamURL={stream.toURL()} />
```

To be like the following.

```javascript
<RTCView stream={stream} />
```

You don't need `toURL` as that is handled for you.

## Community

Come join our [Discourse Community](https://react-native-webrtc.discourse.group/) if you want to discuss any React Native and WebRTC related topics.  
Everyone is welcome and every little helps.

## Related Projects

Looking for extra functionality coverage?  
The [react-native-webrtc](https://github.com/react-native-webrtc) organization provides a number of packages which are more than useful when developing Real Time Communication applications.