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

VIDCS-2141:TestApp which points to develop branch #748

Open
wants to merge 1 commit into
base: develop
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
6 changes: 6 additions & 0 deletions TestApp/.buckconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@

[android]
target = Google Inc.:Google APIs:23

[maven_repositories]
central = https://repo1.maven.org/maven2
2 changes: 2 additions & 0 deletions TestApp/.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
5 changes: 5 additions & 0 deletions TestApp/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
module.exports = {
root: true,
extends: '@react-native-community',
ignorePatterns: ['ios/'],
};
66 changes: 66 additions & 0 deletions TestApp/.flowconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
[ignore]
; We fork some components by platform
.*/*[.]android.js

; Ignore "BUCK" generated dirs
<PROJECT_ROOT>/\.buckd/

; Ignore polyfills
node_modules/react-native/Libraries/polyfills/.*

; Flow doesn't support platforms
.*/Libraries/Utilities/LoadingView.js

.*/node_modules/resolve/test/resolver/malformed_package_json/package\.json$

[untyped]
.*/node_modules/@react-native-community/cli/.*/.*

[include]

[libs]
node_modules/react-native/interface.js
node_modules/react-native/flow/

[options]
emoji=true

exact_by_default=true

format.bracket_spacing=false

module.file_ext=.js
module.file_ext=.json
module.file_ext=.ios.js

munge_underscores=true

module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/node_modules/react-native/\1'
module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'

suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FlowFixMeProps
suppress_type=$FlowFixMeState

[lints]
sketchy-null-number=warn
sketchy-null-mixed=warn
sketchy-number=warn
untyped-type-import=warn
nonstrict-import=warn
deprecated-type=warn
unsafe-getters-setters=warn
unnecessary-invariant=warn

[strict]
deprecated-type
nonstrict-import
sketchy-null
unclear-type
unsafe-getters-setters
untyped-import
untyped-type-import

[version]
^0.182.0
66 changes: 66 additions & 0 deletions TestApp/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
# 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
1 change: 1 addition & 0 deletions TestApp/.node-version
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
16
7 changes: 7 additions & 0 deletions TestApp/.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 TestApp/.ruby-version
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
2.7.5
1 change: 1 addition & 0 deletions TestApp/.watchmanconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{}
35 changes: 35 additions & 0 deletions TestApp/App.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/* eslint-disable react-native/no-inline-styles */
import React, {Component} from 'react';
import {View} from 'react-native';
import {OTSession, OTPublisher, OTSubscriber} from 'opentok-react-native';

class App extends Component {
constructor(props) {
super(props);
this.apiKey = '47120344';
this.sessionId = '2_MX40NzEyMDM0NH5-MTcxNDc1MzQ4MDc2MH43eVVvZGRKL2R0WVZUVUNFektKaEZOOHh-fn4';
this.token = 'T1==cGFydG5lcl9pZD00NzEyMDM0NCZzaWc9MDE0ODBlZDAwZWEyYzE2OGY1MWZiYzRhYWVlNDM2OWNiYzAxYmZjYzpzZXNzaW9uX2lkPTJfTVg0ME56RXlNRE0wTkg1LU1UY3hORGMxTXpRNE1EYzJNSDQzZVZWdlpHUktMMlIwV1ZaVVZVTkZla3RLYUVaT09IaC1mbjQmY3JlYXRlX3RpbWU9MTcxNDc1MzQ4MSZub25jZT0wLjkyNTcwOTIyMzAzMDk0NCZyb2xlPW1vZGVyYXRvciZleHBpcmVfdGltZT0xNzE3MzQ1NDgxJmluaXRpYWxfbGF5b3V0X2NsYXNzX2xpc3Q9';
Comment on lines +9 to +11
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we want to commit these.

}

render() {
return (
<View
style={{
flex: 1,
flexDirection: 'column',
paddingHorizontal: 100,
paddingVertical: 50,
}}>
<OTSession
apiKey={this.apiKey}
sessionId={this.sessionId}
token={this.token}>
<OTPublisher style={{width: 200, height: 200}} />
<OTSubscriber style={{width: 200, height: 200}} />
</OTSession>
</View>
);
}
}

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

# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
ruby '2.7.5'

gem 'cocoapods', '~> 1.11', '>= 1.11.2'
41 changes: 41 additions & 0 deletions TestApp/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# 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`
Copy link

@chetanvangadiTokbox chetanvangadiTokbox May 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will the same instructions of Basic Video Chat samples work for tis repo as well?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes


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

The App.js file includes all of the code that uses the OpenTok React Native SDK.

The app imports `OTSession`, `OTPublisher`, and `OTSubscriber` from the SDK.

```js
import {OTSession, OTPublisher, OTSubscriber} from 'opentok-react-native';
```

Documentation for these components are at <https://github.com/opentok/opentok-react-native/blob/develop/docs/index.md>.

This application shows the simplest way to publish and subscribe to audio-video streams in an OpenTok session. Simply add the `apiKey`, `sessionId`, and `token` attributes to an `OTSession` component and add `OTPublisher` and `OTSubscriber` components as children of the `OTSession` component:

```jsx
<OTSession
apiKey={this.apiKey}
sessionId={this.sessionId}
token={this.token}>
<OTPublisher style={{width: 200, height: 200}} />
<OTSubscriber style={{width: 200, height: 200}} />
</OTSession>
```

The `OTSession` component connects to the specified OpenTok session. Upon connecting to the session, it publishes a stream to the session and subscribes to streams published by other clients connected to the session. The `OTSession` component includes a React Native `View` that automatically lays out the publisher and subscriber views in a grid.

Check out the OpenTok documentation at <https://tokbox.com/developer/>
14 changes: 14 additions & 0 deletions TestApp/__tests__/App-test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/**
* @format
*/

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

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

it('renders correctly', () => {
renderer.create(<App />);
});
Loading