├── .eslintignore ├── .eslintrc.js ├── .github └── ISSUE_TEMPLATE │ └── bug_report.md ├── .gitignore ├── .lintstagedrc.js ├── .prettierignore ├── .prettierrc.js ├── LICENSE ├── README.md ├── index.js ├── package-lock.json ├── package.json └── src ├── RTCView.js ├── RTCView.web.js ├── react-native-webrtc-web-shim.js └── react-native-webrtc-web-shim.web.js /.eslintignore: -------------------------------------------------------------------------------- 1 | # ignore kite files 2 | test/kite/ 3 | 4 | demo 5 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es2021: true, 5 | }, 6 | extends: [ 7 | 'plugin:react/recommended', 8 | 'airbnb-base', 9 | 'plugin:prettier/recommended', 10 | ], 11 | parserOptions: { 12 | ecmaFeatures: { 13 | jsx: true, 14 | }, 15 | ecmaVersion: 12, 16 | sourceType: 'module', 17 | }, 18 | plugins: ['react'], 19 | rules: { 20 | 'prettier/prettier': 'error', 21 | 'react/prop-types': 'off', 22 | 'no-underscore-dangle': 'off', 23 | 'no-console': 'off', 24 | }, 25 | settings: { 26 | react: { 27 | version: 'detect', 28 | }, 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug Report 3 | about: Create a report to help us improve 4 | --- 5 | 6 | **Describe the bug** 7 | 8 | 9 | 10 | **Instructions To reproduce** 11 | 12 | 13 | 14 | **Versions (please complete the following information):** 15 | 16 | - React Native Version: 17 | - React Native Web Version: 18 | - React Native WebRTC Version: 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | # ignore files output from npm pack 4 | *shim*.tgz 5 | 6 | # ignore IDE files 7 | .idea 8 | *.iml 9 | 10 | # ignore kite files 11 | test/kite/logs 12 | test/kite/allure-report 13 | test/kite/results 14 | test/kite/target 15 | test/kite/kite-allure-reports 16 | -------------------------------------------------------------------------------- /.lintstagedrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | '{,.,**/}*.{md,json,js,ts,tsx}': ['prettier --write'], 3 | }; 4 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | package-lock.json 2 | test/kite 3 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: true, 3 | singleQuote: true, 4 | trailingComma: 'all', 5 | }; 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2022-present React Native WebRTC Community 4 | Copyright (c) 2021 Jon Ruddell 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [React Native WebRTC](https://github.com/react-native-webrtc/react-native-webrtc-web-shim) 2 | 3 | # React-Native-WebRTC-Web-Shim 4 | 5 | [![npm version](https://img.shields.io/npm/v/react-native-webrtc-web-shim)](https://www.npmjs.com/package/react-native-webrtc-web-shim) 6 | [![npm downloads](https://img.shields.io/npm/dm/react-native-webrtc-web-shim)](https://www.npmjs.com/package/react-native-webrtc-web-shim) 7 | [![Discourse topics](https://img.shields.io/discourse/topics?server=https%3A%2F%2Freact-native-webrtc.discourse.group%2F)](https://react-native-webrtc.discourse.group/) 8 | 9 | Add support for `react-native-web` to a `react-native-webrtc` app. 10 | 11 | ## Getting Started 12 | 13 | Use one of the following preferred package install methods to immediately get going. 14 | 15 | **npm:** `npm install react-native-webrtc-web-shim --save` 16 | **yarn:** `yarn add react-native-webrtc-web-shim` 17 | **pnpm:** `pnpm install react-native-webrtc-web-shim` 18 | 19 | ## Extra Required Steps 20 | 21 | Import directly from our library instead of `react-native-webrtc`. 22 | 23 | ```javascript 24 | import { 25 | RTCPeerConnection, 26 | RTCIceCandidate, 27 | RTCSessionDescription, 28 | RTCRtpTransceiver, 29 | RTCRtpReceiver, 30 | RTCRtpSender, 31 | RTCErrorEvent, 32 | MediaStream, 33 | MediaStreamTrack, 34 | mediaDevices, 35 | permissions, 36 | registerGlobals, 37 | RTCView, 38 | } from 'react-native-webrtc-web-shim'; 39 | ``` 40 | 41 | 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. 42 | 43 | Simply change this. 44 | 45 | ```javascript 46 | 47 | ``` 48 | 49 | To be like the following. 50 | 51 | ```javascript 52 | 53 | ``` 54 | 55 | You don't need `toURL` as that is handled for you. 56 | 57 | ## Community 58 | 59 | Come join our [Discourse Community](https://react-native-webrtc.discourse.group/) if you want to discuss any React Native and WebRTC related topics. 60 | Everyone is welcome and every little helps. 61 | 62 | ## Related Projects 63 | 64 | Looking for extra functionality coverage? 65 | 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. 66 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import { 2 | RTCPeerConnection, 3 | RTCIceCandidate, 4 | RTCSessionDescription, 5 | RTCRtpTransceiver, 6 | RTCRtpReceiver, 7 | RTCRtpSender, 8 | RTCErrorEvent, 9 | MediaStream, 10 | MediaStreamTrack, 11 | mediaDevices, 12 | permissions, 13 | registerGlobals, 14 | RTCView, 15 | } from './src/react-native-webrtc-web-shim'; 16 | 17 | export { 18 | RTCPeerConnection, 19 | RTCIceCandidate, 20 | RTCSessionDescription, 21 | RTCRtpTransceiver, 22 | RTCRtpReceiver, 23 | RTCRtpSender, 24 | RTCErrorEvent, 25 | MediaStream, 26 | MediaStreamTrack, 27 | mediaDevices, 28 | permissions, 29 | registerGlobals, 30 | RTCView, 31 | }; 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-webrtc-web-shim", 3 | "version": "1.0.7", 4 | "repository": { 5 | "type": "git", 6 | "url": "git+https://github.com/react-native-webrtc/react-native-webrtc-web-shim.git" 7 | }, 8 | "description": "A shim for React Native WebRTC to enable support for React Native Web", 9 | "license": "MIT", 10 | "homepage": "https://github.com/react-native-webrtc/react-native-webrtc-web-shim", 11 | "keywords": [ 12 | "react-native", 13 | "webrtc", 14 | "react-native-web", 15 | "react-native-webrtc", 16 | "shim" 17 | ], 18 | "main": "index.js", 19 | "peerDependencies": { 20 | "react": ">=16", 21 | "react-native": ">=0.6", 22 | "react-native-web": ">=0.14", 23 | "react-native-webrtc": "*" 24 | }, 25 | "scripts": { 26 | "prepare": "install-peers", 27 | "prettier": "prettier --write \"{,.,**/}*.{md,json,js,ts,tsx}\"", 28 | "lint": "eslint .", 29 | "test": "echo \"Error: no test specified\"" 30 | }, 31 | "bugs": { 32 | "url": "https://github.com/react-native-webrtc/react-native-webrtc-web-shim/issues" 33 | }, 34 | "devDependencies": { 35 | "eslint": "^8.56.0", 36 | "eslint-config-airbnb-base": "^15.0.0", 37 | "eslint-config-prettier": "^9.1.0", 38 | "eslint-plugin-import": "^2.29.1", 39 | "eslint-plugin-prettier": "^5.1.0", 40 | "eslint-plugin-react": "^7.33.2", 41 | "eslint-plugin-react-hooks": "^4.6.0", 42 | "husky": "8.0.3", 43 | "install-peers-cli": "^2.2.0", 44 | "lint-staged": "^14.0.1", 45 | "prettier": "^3.1.1" 46 | }, 47 | "files": [ 48 | "src", 49 | "index.js" 50 | ], 51 | "lint-staged": { 52 | "**/*": "prettier --write --ignore-unknown" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/RTCView.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { RTCView as OriginalRTCView } from 'react-native-webrtc'; 3 | 4 | export default function RTCView({ stream, ...props }) { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /src/RTCView.web.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | /* eslint-disable-next-line camelcase */ 3 | import { unstable_createElement } from 'react-native-web'; 4 | 5 | const Video = React.forwardRef((props, ref) => 6 | unstable_createElement('video', { ...props, ref }), 7 | ); 8 | Video.displayName = 'Video'; 9 | 10 | export default function RTCView({ stream, ...props }) { 11 | const videoRef = React.createRef(); 12 | React.useEffect(() => { 13 | if (stream && videoRef.current) { 14 | videoRef.current.srcObject = stream; 15 | } 16 | }, [stream, videoRef]); 17 | 18 | return ( 19 |