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 的导入中，如 此处 所示。

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

使用演示

注意 演示可以在没有摄像头的设备上运行，但您需要在此处禁用视频选项 此处 和 此处（对于核心）以及 此处 和 此处（对于 Angular），应用程序还会连接到远程 STUN 服务器，因此需要互联网连接。

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

2. 编辑 socket-server.ts 或 environment.ts 以指向运行 demo-server 的计算机的本地 IP 地址

3. 运行 demo/demo-ng，在两个设备上输入用户名，然后点击另一个设备的用户名，演示将自动接听电话。 🙂

许可证

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