|
1 | | -# Nativescript OpenTok |
2 | | - |
3 | | -[](https://www.npmjs.com/package/nativescript-opentok) |
4 | | -[](https://www.npmjs.com/package/nativescript-opentok) |
5 | | - |
6 | | -A Nativescript plugin for the OpenTok iOS and (coming soon Android) SDK. |
7 | | - |
8 | | -OpenTok: https://tokbox.com/developer/ |
9 | | - |
10 | | -## Getting Started |
11 | | - |
12 | | -### Requirements |
13 | | -- API Key with OpenTok. [Get one here](https://dashboard.tokbox.com/signups/new). |
14 | | -- Ability to generate a valid session id (either through OpenTok account or back-end service) |
15 | | -- Ability to generate a valid token (either through OpenTok account or back-end service) |
16 | | -- Opentok.framework requires projects to be built for only armv7 (device); i386 (simulator), armv6, armv7s, and arm64 are not supported. |
17 | | - |
18 | | -### Installation |
19 | | -Node Package Manager (NPM) |
20 | | - |
21 | | -- `npm install nativescript-opentok --save` |
22 | | - |
23 | | -### Integration |
24 | | - |
25 | | -#### Routed Sessions |
26 | | -##### View |
27 | | -You will first need to import the custom element into the {N} xml view. This can be accomplished by adding this snippet: `xmlns:OT="nativescript-opentok"` to your existing `Page` element tag. |
28 | | - |
29 | | -The basic integration example would include the following declarations for publisher and subscriber. Notice subscriber is any element with `id="subscriber"`. |
30 | | -``` |
31 | | -<StackLayout id="subscriber" width="100%" height="100%"></StackLayout> |
32 | | -<OT:TNSOTPublisher id="publisher" verticalAlignment="top" horizontalAlignment="right" margin="10" width="100" height="100"></OT:TNSOTPublisher> |
33 | | - ``` |
34 | | - |
35 | | - Next in your page's binding context (a controller, view model, etc.), you will need to import and hook to the OpenTok implementation. |
36 | | - |
37 | | - ``` |
38 | | -import {TNSOTSession, TNSOTPublisher, TNSOTSubscriber} from 'nativescript-opentok'; |
39 | | -
|
40 | | -private _apiKey:string = 'API_KEY'; |
41 | | -private _sessionId: string = 'SESSION_ID'; |
42 | | -private _token: string = 'TOKEN'; |
43 | | -
|
44 | | -private publisher: TNSOTPublisher; |
45 | | -private subscriber: TNSOTSubscriber; |
46 | | -
|
47 | | -private session: TNSOTSession; |
48 | | -
|
49 | | -constructor(private page: Page) { |
50 | | - super(); |
51 | | - this.session = TNSOTSession.initWithApiKeySessionId(this._apiKey, this._sessionId); |
52 | | - this.publisher = <TNSOTPublisher> this.page.getViewById('publisher'); |
53 | | - this.subscriber = <TNSOTSubscriber> this.page.getViewById('subscriber'); |
54 | | - this.initPublisher(); |
55 | | - this.initSubscriber(); |
56 | | -} |
57 | | -
|
58 | | -initPublisher() { |
59 | | - this.session.connect(this._token); |
60 | | - this.publisher.publish(this.session, '', 'HIGH', '30'); |
61 | | - this.publisher.events.on('streamDestroyed', (result) => { |
62 | | - console.log('publisher stream destroyed'); |
63 | | - }); |
64 | | -} |
65 | | -
|
66 | | -initSubscriber() { |
67 | | - this.session.events.on('streamCreated', () => { |
68 | | - this.subscriber.subscribe(this.session); |
69 | | - }); |
70 | | -} |
71 | | -``` |
72 | | - |
73 | | - |
74 | | -### Special Articles |
75 | | -- [Overlay UI on the Video Stream](https://github.com/sean-perkins/nativescript-opentok/wiki/Overlay-UI-on-Video-Stream) |
76 | | -- [Angular 2 Integration Guide](https://github.com/sean-perkins/nativescript-opentok/wiki/Angular-2-Integration-Guide) |
77 | | -- [Controlling Resolution and FPS](https://github.com/sean-perkins/nativescript-opentok/wiki/Controlling-Frame-Rate-and-Resolution) |
78 | | -- [Event Hooks](https://github.com/sean-perkins/nativescript-opentok/wiki/Event-Hooks) |
79 | | - |
80 | | -### Images |
81 | | -|iPhone|iPad| |
82 | | -|---|---| |
83 | | -||| |
84 | | - |
85 | | -### Notes |
86 | | -- Publishing is not supported in the Simulator because it does not have access to your webcam. You may see a yellow tea-kettle instead. |
87 | | -- `TNS` stands for **T**elerik **N**ative**S**cript |
| 1 | +# Nativescript OpenTok |
| 2 | + |
| 3 | +[](https://www.npmjs.com/package/nativescript-opentok) |
| 4 | +[](https://www.npmjs.com/package/nativescript-opentok) |
| 5 | + |
| 6 | +A Nativescript plugin for the OpenTok iOS and (coming soon Android) SDK. |
| 7 | + |
| 8 | +OpenTok: https://tokbox.com/developer/ |
| 9 | + |
| 10 | +## Getting Started |
| 11 | + |
| 12 | +### Requirements |
| 13 | +- API Key with OpenTok. [Get one here](https://dashboard.tokbox.com/signups/new). |
| 14 | +- Ability to generate a valid session id (either through OpenTok account or back-end service) |
| 15 | +- Ability to generate a valid token (either through OpenTok account or back-end service) |
| 16 | +- Opentok.framework requires projects to be built for only armv7 (device); i386 (simulator), armv6, armv7s, and arm64 are not supported. |
| 17 | + |
| 18 | +### Installation |
| 19 | +Node Package Manager (NPM) |
| 20 | + |
| 21 | +- `npm install nativescript-opentok --save` |
| 22 | + |
| 23 | +### Integration |
| 24 | + |
| 25 | +#### Routed Sessions |
| 26 | +##### View |
| 27 | +You will first need to import the custom element into the {N} xml view. This can be accomplished by adding this snippet: `xmlns:OT="nativescript-opentok"` to your existing `Page` element tag. |
| 28 | + |
| 29 | +The basic integration example would include the following declarations for publisher and subscriber. Notice subscriber is any element with `id="subscriber"`. |
| 30 | +``` |
| 31 | +<StackLayout id="subscriber" width="100%" height="100%"></StackLayout> |
| 32 | +<OT:TNSOTPublisher id="publisher" verticalAlignment="top" horizontalAlignment="right" margin="10" width="100" height="100"></OT:TNSOTPublisher> |
| 33 | + ``` |
| 34 | + |
| 35 | + Next in your page's binding context (a controller, view model, etc.), you will need to import and hook to the OpenTok implementation. |
| 36 | + |
| 37 | + ``` |
| 38 | +import {TNSOTSession, TNSOTPublisher, TNSOTSubscriber} from 'nativescript-opentok'; |
| 39 | +
|
| 40 | +private _apiKey:string = 'API_KEY'; |
| 41 | +private _sessionId: string = 'SESSION_ID'; |
| 42 | +private _token: string = 'TOKEN'; |
| 43 | +
|
| 44 | +private publisher: TNSOTPublisher; |
| 45 | +private subscriber: TNSOTSubscriber; |
| 46 | +
|
| 47 | +private session: TNSOTSession; |
| 48 | +
|
| 49 | +constructor(private page: Page) { |
| 50 | + super(); |
| 51 | + this.session = TNSOTSession.initWithApiKeySessionId(this._apiKey, this._sessionId); |
| 52 | + this.publisher = <TNSOTPublisher> this.page.getViewById('publisher'); |
| 53 | + this.subscriber = <TNSOTSubscriber> this.page.getViewById('subscriber'); |
| 54 | + this.initPublisher(); |
| 55 | + this.initSubscriber(); |
| 56 | +} |
| 57 | +
|
| 58 | +initPublisher() { |
| 59 | + this.session.connect(this._token); |
| 60 | + this.publisher.publish(this.session, '', 'HIGH', '30'); |
| 61 | + this.publisher.events.on('streamDestroyed', (result) => { |
| 62 | + console.log('publisher stream destroyed'); |
| 63 | + }); |
| 64 | +} |
| 65 | +
|
| 66 | +initSubscriber() { |
| 67 | + this.session.events.on('streamCreated', () => { |
| 68 | + this.subscriber.subscribe(this.session); |
| 69 | + }); |
| 70 | +} |
| 71 | +``` |
| 72 | + |
| 73 | + |
| 74 | +### Special Articles |
| 75 | +- [Overlay UI on the Video Stream](https://github.com/sean-perkins/nativescript-opentok/wiki/Overlay-UI-on-Video-Stream) |
| 76 | +- [Angular 2 Integration Guide](https://github.com/sean-perkins/nativescript-opentok/wiki/Angular-2-Integration-Guide) |
| 77 | +- [Controlling Resolution and FPS](https://github.com/sean-perkins/nativescript-opentok/wiki/Controlling-Frame-Rate-and-Resolution) |
| 78 | +- [Event Hooks](https://github.com/sean-perkins/nativescript-opentok/wiki/Event-Hooks) |
| 79 | + |
| 80 | +### Images |
| 81 | +|iPhone|iPad| |
| 82 | +|---|---| |
| 83 | +||| |
| 84 | + |
| 85 | +### Notes |
| 86 | +- Publishing is not supported in the Simulator because it does not have access to your webcam. You may see a yellow tea-kettle instead. |
| 87 | +- `TNS` stands for **T**elerik **N**ative**S**cript |
0 commit comments