NativeScript WebRTC

使用此用于 Android，使用此用于 iOS。

安装

• tns plugin add nativescript-webrtc-plugin

Android

将以下内容添加到你的位于 app/App_Resources 的 app.gradle 文件中

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

重要：请确保在 Page 元素中包含 xmlns:webrtc="nativescript-webrtc-plugin"

<webrtc:WebRTCView id="remoteVideoView" height="50%" />
<webrtc:WebRTCView  id="localVideoView" height="50%" />

使用 Angular 吗？

从 nativescript-webrtc-plugin/angular 导入 WebRTCModule 并将其添加到你的初始 @NgModule 的 imports 中，如此处所示。

Vue

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>

标准 Api :sparkles: 新 :sparkles

此 API 与 webrtc 浏览器 API 类似 -> 示例，但添加了 TNS 后缀，例如 TNSRTCPeerConnection

基本 Api

呼叫者

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();

被叫者

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
});

通过执行以下命令进行部署

npm publish --access=public --otp=<OTP_FROM_AUTHENTICATOR>

使用演示

注意演示可以在没有摄像头的设备上运行，但你需要在此处此处和此处禁用视频选项（对于 core），或者在此处此处和此处（对于 angular），因为应用程序连接到远程stun 服务器，因此需要互联网连接。

1. 通过运行 npm i && node app 来启动 demo-server

2. 编辑 socket-server.ts 或 environment.ts 以指向演示服务器运行的计算机的本地 IP 地址

3. 在两个设备上输入用户名，然后点击另一个设备的用户名，演示将自动接听电话。 :)

许可证

Apache 许可证版本 2.0，2004 年 1 月