Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Background blur sample application #195

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions BackgroundBlur/.bundle/config
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
BUNDLE_PATH: "vendor/bundle"
BUNDLE_FORCE_RUBY_PLATFORM: 1
4 changes: 4 additions & 0 deletions BackgroundBlur/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
module.exports = {
root: true,
extends: '@react-native',
};
69 changes: 69 additions & 0 deletions BackgroundBlur/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
# OSX
#
.DS_Store

# Xcode
#
build/
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
xcuserdata
*.xccheckout
*.moved-aside
DerivedData
*.hmap
*.ipa
*.xcuserstate
ios/.xcode.env.local

# Android/IntelliJ
#
build/
.idea
.gradle
local.properties
*.iml
*.hprof
.cxx/

# node.js
#
node_modules/
npm-debug.log
yarn-error.log

# BUCK
buck-out/
\.buckd/
*.keystore
!debug.keystore

# fastlane
#
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
# screenshots whenever they are needed.
# For more information about the recommended setup visit:
# https://docs.fastlane.tools/best-practices/source-control/

**/fastlane/report.xml
**/fastlane/Preview.html
**/fastlane/screenshots
**/fastlane/test_output

# Bundle artifact
*.jsbundle

# Ruby / CocoaPods
/ios/Pods/
/vendor/bundle/

Gemfile.lock

# testing
/coverage
7 changes: 7 additions & 0 deletions BackgroundBlur/.prettierrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
module.exports = {
arrowParens: 'avoid',
bracketSameLine: true,
bracketSpacing: false,
singleQuote: true,
trailingComma: 'all',
};
1 change: 1 addition & 0 deletions BackgroundBlur/.ruby-version
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
2.7.5
1 change: 1 addition & 0 deletions BackgroundBlur/.watchmanconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{}
63 changes: 63 additions & 0 deletions BackgroundBlur/App.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
/* eslint-disable react-native/no-inline-styles */
import React, {Component, createRef} from 'react';
import {View, Button} from 'react-native';
import {OTSession, OTPublisher, OTSubscriber} from 'opentok-react-native';

class App extends Component {
constructor(props) {
super(props);
this.apiKey = '';
this.sessionId = '';
this.token = '';
this.useBackgroundBlur = false;
this.publisher = createRef();
this.publsiherEventHandlers = {
streamCreated: async (event: StreamCreatedEvent) => {
this.toggleBackgroundBlur();
},
};
this.toggleBackgroundBlur = () => {
if (this.publisher.current) {
const blurFilter = {
name: 'BackgroundBlur',
properties: JSON.stringify({
radius: 'High',
}),
};
const filters = [];
this.useBackgroundBlur = !this.useBackgroundBlur;
if (this.useBackgroundBlur) {
filters.push(blurFilter);
}
this.publisher.current.setVideoTransformers(filters);
}
};
}

render() {
return (
<View
style={{
flex: 1,
flexDirection: 'column',
paddingHorizontal: 100,
paddingVertical: 50,
}}>
<OTSession
apiKey={this.apiKey}
sessionId={this.sessionId}
token={this.token}>
<OTPublisher
ref={this.publisher}
style={{width: 200, height: 200}}
eventHandlers={this.publsiherEventHandlers}
/>
<OTSubscriber style={{width: 200, height: 200}} />
</OTSession>
<Button title='Toggle background blur' onPress={this.toggleBackgroundBlur}/>
</View>
);
}
}

export default App;
9 changes: 9 additions & 0 deletions BackgroundBlur/Gemfile
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
source 'https://rubygems.org'

# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
ruby ">= 2.6.10"

# Exclude problematic versions of cocoapods and activesupport that causes build failures.
gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
gem 'xcodeproj', '< 1.26.0'
63 changes: 63 additions & 0 deletions BackgroundBlur/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
# Basic Video Chat sample

This sample application shows how to connect to an OpenTok session, publish a stream, and subscribe to multiple streams for both iOS and Android using the OpenTok React Native SDK.

## Setup

1. Install the required node modules: `npm install`

2. For iOS, install the Podfile's dependencies: `cd ios/ && pod install`

3. In the App.js file, set the `apiKey`, `sessionId`, and `token` properties to your Vonage Video API key (project ID), a Vonage Video session ID, and a token for that session.

For testing, you can use the [OpenTok playground](https://tokbox.com/developer/tools/playground/) to create sessions, publish streams from a web client, and subscribe to streams published from the client using the OpenTok React Native SDK.

## Understanding the code


This app is based on the BasicVideoChat sample application, with modifications to apply a background blur filter to a published video stream.

The background blur filter uses the Vonage Media Processor library. You need to explicitly add Vonage Media Library to the project.

For Android, see the app's build.gradle file, which includes the following in the `dependencies` section:

```
implementation 'com.vonage:client-sdk-video-transformers:2.28.0'
```

For iOS, the following is included in the Podfile:

```
pod 'VonageClientSDKVideoTransformers'
```

The App.js file sets a ref to the OTPublisher object:

```js
this.publisher = createRef();
```

And it includes a method that toggles setting the blur filter (or no filter) for the publisher:

```js
this.toggleBackgroundBlur = () => {
if (this.publisher.current) {
const blurFilter = {
name: 'BackgroundBlur',
properties: JSON.stringify({
radius: 'High',
}),
};
const filters = [];
this.useBackgroundBlur = !this.useBackgroundBlur;
if (this.useBackgroundBlur) {
filters.push(blurFilter);
}
this.publisher.current.setVideoTransformers(filters);
}
}
```

This `toggleBackgroundBlur()` calls the `setVideoTransformers()` method of the OTPublisher ref. To set the filter, an array of filter objects containing a single object defining the background blur filter is passed into the `setVideoTransformers()` method. To clear the filter, an empty array is passed into the method. This method is called when the `OTPublisher streamCreated()` event handler is called (when the published stream is created) and when the user clicks the *Toggle background blur* button in the user interface.

For more information on background blur filter and the Vonage Media Processor library, see [this documentation](https://tokbox.com/developer/guides/vonage-media-processor/).
17 changes: 17 additions & 0 deletions BackgroundBlur/__tests__/App-test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/**
* @format
*/

import 'react-native';
import React from 'react';
import App from '../App';

// Note: import explicitly to use the types shipped with jest.
import {it} from '@jest/globals';

// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

it('renders correctly', () => {
renderer.create(<App />);
});
120 changes: 120 additions & 0 deletions BackgroundBlur/android/app/build.gradle
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
apply plugin: "com.android.application"
apply plugin: "org.jetbrains.kotlin.android"
apply plugin: "com.facebook.react"

/**
* This is the configuration block to customize your React Native Android app.
* By default you don't need to apply any configuration, just uncomment the lines you need.
*/
react {
/* Folders */
// The root of your project, i.e. where "package.json" lives. Default is '../..'
// root = file("../../")
// The folder where the react-native NPM package is. Default is ../../node_modules/react-native
// reactNativeDir = file("../../node_modules/react-native")
// The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
// codegenDir = file("../../node_modules/@react-native/codegen")
// The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js
// cliFile = file("../../node_modules/react-native/cli.js")

/* Variants */
// The list of variants to that are debuggable. For those we're going to
// skip the bundling of the JS bundle and the assets. By default is just 'debug'.
// If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
// debuggableVariants = ["liteDebug", "prodDebug"]

/* Bundling */
// A list containing the node command and its flags. Default is just 'node'.
// nodeExecutableAndArgs = ["node"]
//
// The command to run when bundling. By default is 'bundle'
// bundleCommand = "ram-bundle"
//
// The path to the CLI configuration file. Default is empty.
// bundleConfig = file(../rn-cli.config.js)
//
// The name of the generated asset file containing your JS bundle
// bundleAssetName = "MyApplication.android.bundle"
//
// The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
// entryFile = file("../js/MyApplication.android.js")
//
// A list of extra flags to pass to the 'bundle' commands.
// See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
// extraPackagerArgs = []

/* Hermes Commands */
// The hermes compiler command to run. By default it is 'hermesc'
// hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
//
// The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
// hermesFlags = ["-O", "-output-source-map"]

/* Autolinking */
autolinkLibrariesWithApp()
}

/**
* Set this to true to Run Proguard on Release builds to minify the Java bytecode.
*/
def enableProguardInReleaseBuilds = false

/**
* The preferred build flavor of JavaScriptCore (JSC)
*
* For example, to use the international variant, you can use:
* `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
*
* The international variant includes ICU i18n library and necessary data
* allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
* give correct results when using with locales other than en-US. Note that
* this variant is about 6MiB larger per architecture than default.
*/
def jscFlavor = 'org.webkit:android-jsc:+'

android {
ndkVersion rootProject.ext.ndkVersion
buildToolsVersion rootProject.ext.buildToolsVersion
compileSdk rootProject.ext.compileSdkVersion

namespace "com.backgroundblur"
defaultConfig {
applicationId "com.backgroundblur"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName "1.0"
}
signingConfigs {
debug {
storeFile file('debug.keystore')
storePassword 'android'
keyAlias 'androiddebugkey'
keyPassword 'android'
}
}
buildTypes {
debug {
signingConfig signingConfigs.debug
}
release {
// Caution! In production, you need to generate your own keystore file.
// see https://reactnative.dev/docs/signed-apk-android.
signingConfig signingConfigs.debug
minifyEnabled enableProguardInReleaseBuilds
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
}
}
}

dependencies {
// The version of react-native is set by the React Native Gradle Plugin
implementation("com.facebook.react:react-android")
implementation 'com.vonage:client-sdk-video-transformers:2.28.0'

if (hermesEnabled.toBoolean()) {
implementation("com.facebook.react:hermes-android")
} else {
implementation jscFlavor
}
}
Binary file added BackgroundBlur/android/app/debug.keystore
Binary file not shown.
10 changes: 10 additions & 0 deletions BackgroundBlur/android/app/proguard-rules.pro
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
# Add project specific ProGuard rules here.
# By default, the flags in this file are appended to flags specified
# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
# You can edit the include path and order by changing the proguardFiles
# directive in build.gradle.
#
# For more details, see
# http://developer.android.com/guide/developing/tools/proguard.html

# Add any project specific keep options here:
9 changes: 9 additions & 0 deletions BackgroundBlur/android/app/src/debug/AndroidManifest.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">

<application
android:usesCleartextTraffic="true"
tools:targetApi="28"
tools:ignore="GoogleAppIndexingWarning"/>
</manifest>
Loading