{"id":22127265,"url":"https://github.com/100mslive/react-native-video-plugin","last_synced_at":"2026-01-12T09:34:04.112Z","repository":{"id":243635494,"uuid":"806947988","full_name":"100mslive/react-native-video-plugin","owner":"100mslive","description":"100ms React Native Video Filter and Effects Package","archived":false,"fork":false,"pushed_at":"2025-12-02T11:53:35.000Z","size":26370,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-12-05T07:50:10.987Z","etag":null,"topics":["android","audio","blur","conferencing","filter","ios","javascript","live","package","react-native","real-time","typescript","video","virtual-background","webrtc"],"latest_commit_sha":null,"homepage":"https://www.100ms.live/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/100mslive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-05-28T07:54:53.000Z","updated_at":"2025-12-02T11:52:01.000Z","dependencies_parsed_at":"2025-10-27T14:24:20.759Z","dependency_job_id":null,"html_url":"https://github.com/100mslive/react-native-video-plugin","commit_stats":null,"previous_names":["100mslive/react-native-video-plugin"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/100mslive/react-native-video-plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/100mslive%2Freact-native-video-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/100mslive%2Freact-native-video-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/100mslive%2Freact-native-video-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/100mslive%2Freact-native-video-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/100mslive","download_url":"https://codeload.github.com/100mslive/react-native-video-plugin/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/100mslive%2Freact-native-video-plugin/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28337728,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T06:09:07.588Z","status":"ssl_error","status_checked_at":"2026-01-12T06:05:18.301Z","response_time":98,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","audio","blur","conferencing","filter","ios","javascript","live","package","react-native","real-time","typescript","video","virtual-background","webrtc"],"created_at":"2024-12-01T17:17:36.862Z","updated_at":"2026-01-12T09:34:04.079Z","avatar_url":"https://github.com/100mslive.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @100mslive/react-native-video-plugin\n\n[![npm](https://img.shields.io/npm/v/@100mslive/react-native-video-plugin)](https://www.npmjs.com/package/@100mslive/react-native-video-plugin)\n[![Build](https://github.com/100mslive/100ms-react-native/actions/workflows/build.yml/badge.svg?branch=develop)](https://github.com/100mslive/100ms-react-native/actions/workflows/build.yml)\n[![license](https://img.shields.io/npm/l/@100mslive/react-native-hms)](https://www.100ms.live/)\n[![quality](https://img.shields.io/npms-io/quality-score/@100mslive/react-native-hms)](https://www.npmjs.com/package/@100mslive/react-native-hms)\n[![collaborators](https://img.shields.io/npm/collaborators/@100mslive/react-native-hms)](https://www.npmjs.com/package/@100mslive/react-native-hms)\n[![Documentation](https://img.shields.io/badge/Read-Documentation-blue)](https://docs.100ms.live/react-native/v2/foundation/basics)\n[![Discord](https://img.shields.io/discord/843749923060711464?label=Join%20on%20Discord)](https://100ms.live/discord)\n[![Firebase](https://img.shields.io/badge/Download%20Android-Firebase-green)](https://appdistribution.firebase.dev/i/7b7ab3b30e627c35)\n[![TestFlight](https://img.shields.io/badge/Download%20iOS-TestFlight-blue)](https://testflight.apple.com/join/v4bSIPad)\n[![Activity](https://img.shields.io/github/commit-activity/m/100mslive/react-native-hms.svg)](https://github.com/100mslive/100ms-react-native/projects?type=classic)\n[![Register](https://img.shields.io/badge/Contact-Know%20More-blue)](https://dashboard.100ms.live/register)\n\n\u003cp align=\"center\" width=\"100%\"\u003e\n\u003cimg alt=\"Prebuilt - VB\" src=\"https://github.com/100mslive/flutter-video-plugin/assets/93931528/b85b5f48-b06c-4b11-b3d6-8639f8cbd1c3\"\u003e\n\u003c/p\u003e\n\nIntegrate virtual backgrounds, blur backgrounds effects in your React Native app with the 100ms Video Plugin. 100ms video plugin enabled adding virtual backgrounds, blur backgrounds, and other video filters to your 100ms video conferencing app. The plugin is built on top of the 100ms React Native SDK.\n\n📖 Read the Complete Documentation here: https://www.100ms.live/docs/react-native/v2/quickstart/quickstart\n\n📲 Download the Example iOS app here: https://testflight.apple.com/join/v4bSIPad\n\n🤖 Download the Example Android app here: https://appdistribution.firebase.dev/i/7b7ab3b30e627c35\n\n\n\u003cdiv align=\"center\"\u003e\n  \u003cvideo src=\"https://github.com/100mslive/flutter-video-plugin/assets/93931528/c44c4501-dd70-4d92-a23d-06fee1872278\" controls \u003e\n\u003c/div\u003e\n\n\nVirtual Background plugin helps in customising one's background that replacing the background with a static image or blurring the background.\nThis guide provides an overview of usage of the Virtual Background plugin of 100ms.\n\n| Package                          | Version                                                                                                                                 |\n| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n| @100mslive/react-native-room-kit | [![npm](https://img.shields.io/npm/v/@100mslive/react-native-room-kit)](https://www.npmjs.com/package/@100mslive/react-native-room-kit) |\n| @100mslive/react-native-hms      | [![npm](https://img.shields.io/npm/v/@100mslive/react-native-hms)](https://www.npmjs.com/package/@100mslive/react-native-hms)           |\n| @100mslive/react-native-video-plugin      | [![npm](https://img.shields.io/npm/v/@100mslive/react-native-video-plugin)](https://www.npmjs.com/package/@100mslive/react-native-video-plugin)  |\n\n\n## Minimum Requirements\n\n- Minimum [`@100mslive/react-native-hms`](https://github.com/100mslive/100ms-react-native) SDK version is `^1.10.6`\n\n\n## Limitations\n\n### Android\n- Has poor FPS on older Android phones\n\n### iOS\n- Minimum iOS version required to support Virtual Background plugin is `iOS 15`\n- Virtual background plugin is in beta stage and may have performance issues on iPhone X, 8, 7, 6 and other older devices. We recommend that you use this feature on a high performance device for smooth experience.\n\n\n## Usage\n\n### Step 1: Add required dependency\n\nInstall `@100mslive/react-native-video-plugin` library\n\n```bash\nnpm install @100mslive/react-native-video-plugin\n```\n\n### Step 2: Create instance of HMSVirtualBackgroundPlugin\n\n```js\n// Import from `@100mslive/react-native-video-plugin` library\nimport { HMSVirtualBackgroundPlugin } from '@100mslive/react-native-video-plugin';\n\n...\n\nconst virtualBackgroundPlugin = new HMSVirtualBackgroundPlugin();\n```\n\n### Step 3: Create instance of HMSVideoTrackSettings\n\n```js\nlet videoSettings = new HMSVideoTrackSettings({\n    initialState: HMSTrackSettingsInitState.MUTED\n    // The virtual background plugin to use for the video track. @type {HMSVirtualBackgroundPlugin}\n    videoPlugin: virtualBackgroundPlugin,\n});\n\nlet trackSettings = new HMSTrackSettings({\n    video: videoSettings,\n});\n```\n\n### Step 4: Pass the Track Settings to the HMSSDK\n\n```js\nconst hmsInstance = await HMSSDK.build({\n    trackSettings,\n});\n```\n\n### Step 5: How to enable and disable virtual background\n\nHold on to a reference to the instance of HMSVirtualBackgroundPlugin and use `enable` and `disable` methods on it to enable/disable the virtual background.\n\n```js\nconst virtualBackgroundPlugin = new HMSVirtualBackgroundPlugin();\n\n...\n\nlet isVBEnabled = false;\n\n// Enable VB\nawait virtualBackgroundPlugin.enable();\nisVBEnabled = true;\n\n// Disable VB\nawait virtualBackgroundPlugin.disable();\nisVBEnabled = false;\n```\n\n\u003e Always call `enable` method after `ON_JOIN` and `ON_PREVIEW` event\n\n\u003e Enabling Virtual Background and applying effect can take some time, you should add a loader in UI.\n\n### Step 6: How to apply Blur as virtual background\n\nEnable the blur background using the `setBlur` method. You should pass blur percentage ranging from 0-100\n\n```js\nconst virtualBackgroundPlugin = new HMSVirtualBackgroundPlugin();\n\n...\n// state for tracking if VB is enabled\nlet isVBEnabled = false;\n\n// If VB is disabled, first enable it before calling `setBlur` method\nif (isVBEnabled === false) {\n  await virtualBackgroundPlugin.enable();\n  isVBEnabled = true;\n}\n\nawait virtualBackgroundPlugin.setBlur(100);\n```\n\n\u003e You should only call `setBlur` method only after enabling the virtual background\n\n### Step 7: How to apply Image as virtual background\n\nEnable the background image using the `setBackground` method. It accepts image source (either a object with height, width and uri properties or a static image file).\n\nHere is how to use a static image file -\n\n```js\nconst virtualBackgroundPlugin = new HMSVirtualBackgroundPlugin();\n\n...\n// state for tracking if VB is enabled\nlet isVBEnabled = false;\n\n// If VB is disabled, first enable it before calling `setBlur` method\nif (isVBEnabled === false) {\n  await virtualBackgroundPlugin.enable();\n  isVBEnabled = true;\n}\n\nconst image = require('\u003cPATH_TO_IMAGE_HERE\u003e'); // ex: require('../assets/VB-1.jpg')\nawait virtualBackgroundPlugin.setBackground(image);\n```\n\nHere is how to use remote image file, `setBackground` method accepts object of following type -\n\n```js\nexport interface ImageURISource {\n  width: number;\n\n  height: number;\n\n  /**\n   * `uri` is a string representing the resource identifier for the image, which\n   * could be an http address, a local file path, or the name of a static image\n   * resource (which should be wrapped in the `require('./path/to/image.png')`\n   * function).\n   */\n  uri:\n}\n\n...\n\nawait virtualBackgroundPlugin.setBackground({\n  width,\n  height,\n  uri: 'file://...', // path of image stored in device\n});\n```\n\nUsing library like [react-native-image-picker](https://www.npmjs.com/package/react-native-image-picker) -\n\n```js\nimport { launchImageLibrary } from 'react-native-image-picker';\n\n...\n\n// You can use result from library like `react-native-image-picker` to use images from photo library\nconst result = await launchImageLibrary({ mediaType: 'photo', selectionLimit: 1 });\n\n// getting first image\nconst imageObject = response.assets?.[0];\n\n// If image is selected, use it as background\nif (imageObject) {\n  await virtualBackgroundPlugin.setBackground(imageObject);\n}\n```\n\n\u003e You should only call `setBackground` method only after enabling the virtual background\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F100mslive%2Freact-native-video-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F100mslive%2Freact-native-video-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F100mslive%2Freact-native-video-plugin/lists"}