Uses this for Android and this for iOS.
tns plugin add nativescript-webrtc-plugin
Add the following to your app.gradle located in app/App_Resources
android {
....
compileOptions {
sourceCompatibility 1.8
targetCompatibility 1.8
}
}
import { WebRTC } from 'nativescript-webrtc-plugin';
WebRTC.init(); // <= Try calling this in you app.js or app.ts or main.ts
IMPORTANT: Make sure you include xmlns:webrtc="nativescript-webrtc-plugin" on the Page element
<webrtc:WebRTCView id="remoteVideoView" height="50%" />
<webrtc:WebRTCView id="localVideoView" height="50%" />
Import the WebRTCModule from nativescript-webrtc-plugin/angular and add it to the imports of your initial @NgModule, like shown here.
import Vue from 'nativescript-vue';
import WebRTCView from 'nativescript-webrtc-plugin/vue';
Vue.use(WebRTCView);
<WebRTCView #remoteVideoView height="50%" ></WebRTCView>
<WebRTCView #localVideoView height="50%" ></WebRTCView>
This api is similar to the webrtc browser api -> example but with TNS
appended e.g TNSRTCPeerConnection
Caller
import { WebRTC } from 'nativescript-webrtc-plugin';
const webrtc = new WebRTC({
enableAudio: true, // default true
enableVideo: false, // default true
iceServers: [
// Optional defaults to google stun servers
{
url: 'stun:stun.l.google.com:19302'
},
{
url: 'serverRequiresAuth',
username: 'username',
password: 'password'
}
]
});
webrtc.on('webRTCClientDidReceiveRemoteVideoTrackStream', args => {
const object = args.object;
const remoteVideoTrack = object.get('remoteVideoTrack');
remoteStream = object.get('stream');
const video = frame.topmost().getViewById('remoteVideoView') as WebRTCView;
video.videoTrack = remoteVideoTrack;
});
webrtc.on('webRTCClientStartCallWithSdp', args => {
const sdp = args.object.get('sdp');
const type = args.object.get('type');
if (type === 'answer') {
webrtc.handleAnswerReceived({
sdp: sdp,
type: type
});
} else {
// send data to signaling server
}
});
webrtc.on('webRTCClientDidGenerateIceCandidate', args => {
const iceCandidate = args.object.get('iceCandidate');
// send data to signaling server
});
// Before using getUserMedia verify the app has the permissions and if not try requesting them
if (!WebRTC.hasPermissions()) {
try {
await WebRTC.requestPermissions();
localStream = await webrtc.getUserMedia(Quality.HIGHEST);
} catch (e) {}
}
webrtc.connect();
webrtc.addLocalStream(localStream);
webrtc.makeOffer();
Callee
import { WebRTC } from 'nativescript-webrtc-plugin';
const webrtc = new WebRTC({
enableAudio: true, // default true
enableVideo: false, // default true
iceServers: [
// Optional defaults to google stun servers
{
url: 'stun:stun.l.google.com:19302'
},
{
url: 'serverRequiresAuth',
username: 'username',
password: 'password'
}
]
});
webrtc.on('webRTCClientStartCallWithSdp', args => {
const sdp = args.object.get('sdp');
const type = args.object.get('type') as WebRTCSdpType;
if (type === WebRTCSdpType.ANSWER) {
// send data to signaling server
}
});
webrtc.on('webRTCClientDidGenerateIceCandidate', args => {
const iceCandidate = args.object.get('iceCandidate');
// send data to signaling server
});
// Before using getUserMedia verify the app has the permissions and if not try requesting them
if (!WebRTC.hasPermissions()) {
try {
await WebRTC.requestPermissions();
localStream = await webrtc.getUserMedia(Quality.HIGHEST);
} catch (e) {}
}
webrtc.connect();
webrtc.addLocalStream(localStream);
// sdp received from the signaling server
webrtc.createAnswerForOfferReceived({
type: sdp.type,
sdp: sdp.sdp
});
Note the demo can be ran on a device w/o a camera but you will need to disable the video option here an here for core or here an here for angular also the app connects to remote stun server(s) so internet connection is needed.
Start demo-server by running npm i && node app
Edit the socket-server.ts or environment.ts to point to your computer's local ip where the demo-server is running
Run the demo/demo-ng enter usernames on both device then tap on the username of the other device the demo will auto answer the call . 🙂
Apache License Version 2.0, January 2004