@dronedeploy/rocos-js-sdk 1.0.0-alpha-2 → 2.6.1

package/demo/angular/src/app/components/video/video-source.ts

@@ -0,0 +1,315 @@
+export interface IStatsResult {
+  encryption: string
+  audio: {
+    send: {
+      tracks: string[]
+      codecs: string[]
+      availableBandwidth: number
+      streams: number
+      framerateMean: number
+      bitrateMean: number
+    }
+    recv: {
+      tracks: string[]
+      codecs: string[]
+      availableBandwidth: number
+      streams: number
+      framerateMean: number
+      bitrateMean: number
+    }
+    bytesSent: number
+    bytesReceived: number
+    latency: number
+    packetsReceived: number
+    packetsLost: number
+  }
+  video: {
+    send: {
+      tracks: string[]
+      codecs: string[]
+      availableBandwidth: number
+      streams: number
+      framerateMean: number
+      bitrateMean: number
+    }
+    recv: {
+      tracks: string[]
+      codecs: string[]
+      availableBandwidth: number
+      streams: number
+      framerateMean: number
+      bitrateMean: number
+      frameWidth: number
+      frameHeight: number
+      framesReceived: number
+      framesDecoded: number
+      framesDropped: number
+      jitterBufferDelay: number
+      jitterBufferEmittedCount: number
+      avgFramePlayout: number
+    }
+    bytesSent: number
+    bytesReceived: number
+    // latency: number,
+    packetsReceived: number
+    packetsLost: number
+  }
+  bandwidth: {
+    systemBandwidth: number
+    sentPerSecond: number
+    encodedPerSecond: number
+    helper: {
+      audioBytesSent: number
+      videoBytestSent: number
+    }
+    speed: number
+    currentRoundTripTime: number
+    totalRoundTripTime: number
+  }
+  connectionType: {
+    local: {
+      candidateType: ''
+      ipAddress: ''
+      port: number
+      priority: number
+      networkType: ''
+    }
+    remote: {
+      candidateType: ''
+      ipAddress: ''
+      port: number
+      priority: number
+      networkType: ''
+    }
+  }
+  resolutions: {
+    send: {
+      width: number
+      height: number
+    }
+    recv: {
+      width: number
+      height: number
+    }
+  }
+}
+
+export function parseStats(stats: any): IStatsResult {
+  const result: IStatsResult = {
+    encryption: '',
+    audio: {
+      send: {
+        tracks: [],
+        codecs: [],
+        availableBandwidth: 0,
+        streams: 0,
+        framerateMean: 0,
+        bitrateMean: 0,
+      },
+      recv: {
+        tracks: [],
+        codecs: [],
+        availableBandwidth: 0,
+        streams: 0,
+        framerateMean: 0,
+        bitrateMean: 0,
+      },
+      bytesSent: 0,
+      bytesReceived: 0,
+      latency: 0,
+      packetsReceived: 0,
+      packetsLost: 0,
+    },
+    video: {
+      send: {
+        tracks: [],
+        codecs: [],
+        availableBandwidth: 0,
+        streams: 0,
+        framerateMean: 0,
+        bitrateMean: 0,
+      },
+      recv: {
+        tracks: [],
+        codecs: [],
+        availableBandwidth: 0,
+        streams: 0,
+        framerateMean: 0,
+        bitrateMean: 0,
+        frameWidth: 0,
+        frameHeight: 0,
+        framesReceived: 0,
+        framesDecoded: 0,
+        framesDropped: 0,
+        jitterBufferDelay: 0,
+        jitterBufferEmittedCount: 0,
+        avgFramePlayout: 0,
+      },
+      bytesSent: 0,
+      bytesReceived: 0,
+      // latency: 0,
+      packetsReceived: 0,
+      packetsLost: 0,
+    },
+    bandwidth: {
+      systemBandwidth: 0,
+      sentPerSecond: 0,
+      encodedPerSecond: 0,
+      helper: {
+        audioBytesSent: 0,
+        videoBytestSent: 0,
+      },
+      speed: 0,
+      currentRoundTripTime: 0,
+      totalRoundTripTime: 0,
+    },
+    connectionType: {
+      local: {
+        candidateType: '',
+        ipAddress: '',
+        port: 0,
+        priority: 0,
+        networkType: '',
+      },
+      remote: {
+        candidateType: '',
+        ipAddress: '',
+        port: 0,
+        priority: 0,
+        networkType: '',
+      },
+    },
+    resolutions: {
+      send: {
+        width: 0,
+        height: 0,
+      },
+      recv: {
+        width: 0,
+        height: 0,
+      },
+    },
+  }
+
+  let candidatePair: any
+  stats.forEach((r: any) => {
+    if (r.type === 'candidate-pair' && r.nominated === true) {
+      candidatePair = r
+    }
+  })
+  if (candidatePair) {
+    let localCandidate: any
+    stats.forEach((r: any) => {
+      if (r.type === 'local-candidate' && r.id === candidatePair.localCandidateId) {
+        localCandidate = r
+      }
+    })
+    if (localCandidate) {
+      result.connectionType.local.candidateType = localCandidate.candidateType
+      result.connectionType.local.ipAddress = localCandidate.ip
+      result.connectionType.local.port = localCandidate.port
+      // result.connectionType.local.protocol = localCandidate.protocol;
+      result.connectionType.local.priority = localCandidate.priority
+      result.connectionType.local.networkType = localCandidate.networkType
+    }
+    let remoteCandidate: any
+    stats.forEach((r: any) => {
+      if (r.type === 'remote-candidate' && r.id === candidatePair.remoteCandidateId) {
+        remoteCandidate = r
+      }
+    })
+    if (remoteCandidate) {
+      result.connectionType.remote.candidateType = remoteCandidate.candidateType
+      result.connectionType.remote.ipAddress = remoteCandidate.ip
+      result.connectionType.remote.port = remoteCandidate.port
+      // result.connectionType.remote.protocol = remoteCandidate.protocol;
+      result.connectionType.remote.priority = remoteCandidate.priority
+      result.connectionType.remote.networkType = remoteCandidate.networkType
+    }
+
+    result.bandwidth.currentRoundTripTime = candidatePair.currentRoundTripTime
+    result.bandwidth.totalRoundTripTime = candidatePair.totalRoundTripTime
+  }
+
+  stats.forEach((videoRtp: any) => {
+    if (videoRtp.type !== 'inbound-rtp' || videoRtp.kind !== 'video') {
+      return
+    }
+
+    result.video.recv.tracks.push(videoRtp.id)
+    result.video.bytesReceived += videoRtp.bytesReceived
+    result.video.packetsReceived += videoRtp.packetsReceived
+    result.video.packetsLost += videoRtp.packetsLost
+
+    stats.forEach((codecReport: any) => {
+      if (codecReport.type !== 'codec' || codecReport.id !== videoRtp.codecId) {
+        return
+      }
+
+      result.video.recv.codecs.push(codecReport.mimeType)
+    })
+
+    stats.forEach((trackReport: any) => {
+      if (trackReport.type !== 'track' || trackReport.id !== videoRtp.trackId) {
+        return
+      }
+
+      result.video.recv.frameWidth = trackReport.frameWidth
+      result.video.recv.frameHeight = trackReport.frameHeight
+      result.video.recv.framesReceived = trackReport.framesReceived
+      result.video.recv.framesDecoded = trackReport.framesDecoded
+      result.video.recv.framesDropped = trackReport.framesDropped
+
+      if (trackReport.type === 'track') {
+        result.video.recv.jitterBufferDelay = trackReport.jitterBufferDelay
+        result.video.recv.jitterBufferEmittedCount = trackReport.jitterBufferEmittedCount
+      }
+    })
+  })
+
+  return result
+}
+
+export enum VideoSourceStatusEnum {
+  webrtcPeerConnectionStatus = 'webrtcPeerConnectionStatus',
+  webrtcIceStateConnected = 'webrtcIceStateConnected',
+  webrtcIceConnectionState = 'webrtcIceConnectionState',
+  webrtcStreamStarted = 'webrtcStreamStarted',
+  webrtcBitrate = 'webrtcBitrate',
+  realInterval = 'realInterval',
+  webrtcAudioIn = 'webrtcAudioIn',
+  webrtcVideoIn = 'webrtcVideoIn',
+  webrtcAudioOut = 'webrtcAudioOut',
+  webrtcVideoOut = 'webrtcVideoOut',
+  webrtcSlow = 'webrtcSlow',
+  webrtcRoundTripTimeMs = 'webrtcRoundTripTimeMs',
+  webrtcPacketLossPercent = 'webrtcPacketLossPercent',
+  webrtcFramesDropped = 'webrtcFramesDropped',
+  webrtcFramesDecoded = 'webrtcFramesDecoded',
+  webrtcFramesReceived = 'webrtcFramesReceived',
+  jitterBufferDelay = 'jitterBufferDelay',
+  jitterBufferEmittedCount = 'jitterBufferEmittedCount',
+  avgFramePlayout = 'avgFramePlayout',
+}
+
+export interface IVideoSourceStatus {
+    webrtcPeerConnectionStatus?: boolean;
+    webrtcIceStateConnected?: boolean;
+    webrtcIceConnectionState?: string;
+    webrtcStreamStarted?: boolean;
+    webrtcBitrate?: string;
+    realInterval?: number;
+    webrtcAudioIn?: boolean;
+    webrtcVideoIn?: boolean;
+    webrtcAudioOut?: boolean;
+    webrtcVideoOut?: boolean;
+    webrtcSlow?: boolean;
+    webrtcRoundTripTimeMs?: number;
+    webrtcPacketLossPercent?: number;
+    webrtcFramesDropped?: number;
+    webrtcFramesDecoded?: number;
+    webrtcFramesReceived?: number;
+    jitterBufferDelay?: number;
+    jitterBufferEmittedCount?: number;
+    avgFramePlayout?: number;
+  }

package/demo/angular/src/app/components/video/video.component.css

@@ -0,0 +1,6 @@
+.video-player {
+    max-width: 100%;
+    max-height: 100%;
+    width: 100%;
+    height: 100%;
+  }

package/demo/angular/src/app/components/video/video.component.html

@@ -0,0 +1,54 @@
+<div class="box wideBox">
+  <div class="boxContent">
+    <h3>Connect Video Stream</h3>
+
+    <label *ngFor="let callsign of callsigns; let i = index">
+      <input
+        name="command-callsign"
+        value="{{ callsign }}"
+        type="radio"
+        [checked]="isChecked(callsign)"
+        (change)="handleRadioChange($event)"
+      />
+      {{ callsign }}
+    </label>
+    <label
+      >Turn Server
+      <input type="text" name="camera" [(ngModel)]="turnServer" />
+    </label>
+    <label
+      >Turn Server Username
+      <input type="text" name="camera" [(ngModel)]="turnServerUsername" />
+    </label>
+    <label
+      >Turn Server Credential
+      <input type="text" name="camera" [(ngModel)]="turnServerUserCredential" />
+    </label>
+    <label
+      >Camera Path
+      <input type="text" name="camera" [(ngModel)]="camera" />
+    </label>
+    <label
+      >Video ID
+      <input type="text" name="video-id" [(ngModel)]="videoId" />
+    </label>
+    <label
+      >Playout Delay
+      <input type="text" name="playout-delay" [(ngModel)]="playoutDelay" />
+    </label>
+    <label
+      >GStreamer Command
+      <textarea name="gstreamer-command" [(ngModel)]="gstreamerCommand"></textarea>
+    </label>
+    <button (click)="p2pVideoService ? stopVideo() : connectVideo()">
+      {{ p2pVideoService ? 'Disconnect' : 'Connect' }}
+    </button>
+  </div>
+</div>
+
+<div class="box wideBox">
+  <div class="boxContent">
+    {{ p2pVideoService?.connectingMessage }}
+    <video class="video-player" #remoteVideoElement id="remotevideo" autoplay loop></video>
+  </div>
+</div>

package/demo/angular/src/app/components/video/video.component.ts

@@ -0,0 +1,151 @@
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'
+import { Subscription } from 'rxjs'
+import { SdkService } from '../../services/sdk.service'
+import { P2PVideoService } from './p2pvideo'
+import { IVideoSourceStatus } from './video-source'
+
+@Component({
+  selector: 'app-video',
+  templateUrl: './video.component.html',
+  styleUrls: ['./video.component.css'],
+})
+export class VideoComponent implements OnInit {
+  @Input() projectId?: string
+  @Input() callsigns?: string[]
+
+  @ViewChild('remoteVideoElement', { static: true })
+  remoteVideoElement!: ElementRef<HTMLVideoElement>
+
+  checkedCallsign?: string = ''
+
+  _videoId?: string
+
+  // The STUN and TURN servers that used for ICE Candidators detection and video relay
+  turnServer: string = 'turn:turn.rocos.io:443'
+  turnServerUsername?: string = '<PLEASE_ASK_SUPPORT>'
+  turnServerUserCredential?: string = '<PLEASE_ASK_SUPPORT>'
+
+  camera: string = '/dev/video0'
+  playoutDelay: string = '100'
+  gstreamerCommand?: string = ''
+
+  videoIsStreaming: boolean = false
+  videoIsConnecting: boolean = false
+
+  videoSourceStatus?: IVideoSourceStatus
+
+  p2pVideoService?: P2PVideoService
+
+  private videoStatusSub = new Subscription()
+
+  constructor(private sdkService: SdkService) {}
+
+  ngOnInit(): void {
+    if (this.callsigns) {
+      this.callsigns.forEach((item, index) => {
+        if (index === 0) {
+          this.checkedCallsign = item
+        }
+      })
+    }
+    console.log('CommandComponent', this.callsigns, this.checkedCallsign)
+  }
+
+  ngOnDestroy(): void {
+    this.videoStatusSub.unsubscribe()
+    this.stopVideo()
+  }
+
+  get videoId() {
+    return this._videoId || `/${this.projectId}/${this.checkedCallsign}/${this.camera?.replace(/^\//, '')}`
+  }
+
+  set videoId(value: string) {
+    this._videoId = value
+  }
+
+  isChecked(callsign: string): boolean {
+    // Reset video id after the callsign change
+    this._videoId = undefined
+
+    return this.checkedCallsign === undefined ? true : this.checkedCallsign === callsign
+  }
+
+  handleRadioChange(event: any): void {
+    if (event.target.value) {
+      this.checkedCallsign = event.target.value
+    }
+  }
+
+  connectVideo(): void {
+    // Kill existing video service
+    this.stopVideo()
+
+    if (!this.videoId || !this.projectId || !this.gstreamerCommand) {
+      return
+    }
+
+    const iceServices = [
+      {
+        urls: [this.turnServer],
+        username: this.turnServerUsername,
+        credential: this.turnServerUserCredential,
+      },
+    ]
+
+    this.p2pVideoService = new P2PVideoService(
+      this.sdkService,
+      this.projectId,
+      this.videoId,
+      this.gstreamerCommand as string,
+      this.playoutDelay,
+      iceServices,
+    )
+
+    this.videoStatusSub = new Subscription()
+
+    this.videoStatusSub.add(
+      this.p2pVideoService.videoSourceStatus.subscribe((status) => {
+        this.videoSourceStatus = status
+      }),
+    )
+
+    this.videoStatusSub.add(
+      this.p2pVideoService.isVideoStreaming.subscribe((isStreaming) => {
+        this.videoIsStreaming = isStreaming
+
+        // this.updateToolbarItems();
+      }),
+    )
+
+    this.videoStatusSub.add(
+      this.p2pVideoService.isVideoConnecting.subscribe((isConnecting) => {
+        this.videoIsConnecting = isConnecting
+      }),
+    )
+
+    this.p2pVideoService.startStream()
+
+    this.videoStatusSub.add(
+      this.p2pVideoService.mediaStream.subscribe((stream) => {
+        this.remoteVideoElement.nativeElement.srcObject = stream ?? null
+
+        this.remoteVideoElement.nativeElement.play()
+
+        console.log('Stream arrived, start playing in video element', {
+          stream,
+          htmlElement: this.remoteVideoElement.nativeElement,
+        })
+      }),
+    )
+  }
+
+  stopVideo(): void {
+    this.remoteVideoElement.nativeElement.srcObject = null
+
+    if (this.p2pVideoService) {
+      this.p2pVideoService.stopStream()
+      this.p2pVideoService = undefined
+    }
+  }
+}

package/demo/angular/src/app/services/sdk.service.ts

@@ -0,0 +1,193 @@
+import { Injectable } from '@angular/core'
+import {
+  IRobot,
+  IRocosSDK,
+  RocosSDK,
+  Token,
+  IRocosTelemetryMessage,
+  IRocosCallerMessage,
+  IRocosCommandMessage,
+  generateUUID,
+  WebRTCSignallingService,
+} from '@team-rocos/rocos-js-sdk'
+import { Observable } from 'rxjs'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SdkService {
+  public sdk?: IRocosSDK
+  
+  private url?: string
+  private appId?: string
+  private appKey?: string
+
+  constructor() {}
+
+  init(url: string | undefined, appId: string | undefined, appKey: string | undefined): void {
+    if (!url || !appId || !appKey) {
+      return
+    }
+    if (!this.sdk || this.url !== url || this.appId !== appId || this.appKey !== appKey) {
+      this.url = url
+      this.appId = appId
+      this.appKey = appKey
+
+      if (this.sdk) {
+        this.sdk.cleanup()
+      }
+
+      this.sdk = new RocosSDK({ url, appId, appKey })
+      this.sdk.setDebugLevel('trace')
+      this.sdk.enableDebugMode(true)
+    }
+  }
+
+  destroy(): void {
+    if (this.sdk) {
+      this.sdk.cleanup()
+    }
+    this.sdk = undefined
+  }
+
+  async getToken(): Promise<Token> {
+    if (this.sdk) {
+      return await this.sdk.getAuthService().getToken()
+    } else {
+      throw new Error('SDK does not exist')
+    }
+  }
+
+  async getRobots(projectId: string): Promise<IRobot[]> {
+    if (this.sdk) {
+      return await this.sdk.getRobotService().getRobots(projectId)
+    } else {
+      throw new Error('SDK does not exist')
+    }
+  }
+
+  getWebRTCSignallingService(): WebRTCSignallingService {
+    if (this.sdk) {
+      // const subscription = this.sdk.getTelemetryService().subscribe({ projectId, callsigns, sources })
+      return this.sdk.getWebRTCSignallingService()
+    } else {
+      throw new Error('SDK does not exist')
+    }
+  }
+
+  getTelemetrySubscription(
+    projectId: string,
+    callsigns: string[],
+    sources: string[],
+  ): Observable<IRocosTelemetryMessage> {
+    if (this.sdk) {
+      const subscription = this.sdk.getTelemetryService().subscribe({ projectId, callsigns, sources })
+      if (!subscription) {
+        throw new Error('Subscription not created')
+      }
+      return subscription
+    } else {
+      throw new Error('SDK does not exist')
+    }
+  }
+
+  getCallerSubscription(
+    projectId: string,
+    callsign: string,
+    topic: string,
+    payload: string,
+  ): Observable<IRocosCallerMessage> {
+    if (this.sdk) {
+      const subscription = this.sdk.getCallerService().invokeRequest({
+        uid: generateUUID(),
+        projectId: projectId,
+        callsign: callsign,
+        component: 'rocos',
+        topic: topic,
+        subSystem: '',
+        payload: payload,
+        responseLevelNumber: 0,
+      })
+      if (!subscription) {
+        throw new Error('Subscription not created')
+      }
+      return subscription
+    } else {
+      throw new Error('SDK does not exist')
+    }
+  }
+
+  getCommandSubscription(
+    projectId: string,
+    callsign: string,
+    commandId: string,
+    parameters: string,
+  ): Observable<IRocosCommandMessage> {
+    if (this.sdk) {
+      const subscription = this.sdk.getCommandService().invokeRequest({
+        projectId: projectId,
+        callsign: callsign,
+        commandId: commandId,
+        parameters: JSON.parse(parameters),
+      })
+      if (!subscription) {
+        throw new Error('Subscription not created')
+      }
+      return subscription
+    } else {
+      throw new Error('SDK does not exist')
+    }
+  }
+
+  async listAssets(projectId: string): Promise<any> {
+    if (this.sdk) {
+      const listAssetsResponse = await this.sdk.getAssetStorageService().list(projectId)
+
+      if (!listAssetsResponse) {
+        throw new Error('Assets listing request not created')
+      }
+
+      return listAssetsResponse
+    } else {
+      throw new Error('SDK does not exist')
+    }
+  }
+
+  async createAsset(projectId: string, filePath: string, file: File) {
+    if (this.sdk) {
+      const encodedPath = encodeURIComponent(filePath)
+
+      const createAssetResponse = await this.sdk.getAssetStorageService().create(projectId, encodedPath, file)
+
+      if (!createAssetResponse) {
+        throw new Error('Asset creation request not created')
+      }
+      return createAssetResponse
+    } else {
+      throw new Error('SDK does not exist')
+    }
+  }
+
+  async updateAsset(projectId: string, filePath: string, file: File) {
+    if (this.sdk) {
+      const encodedPath = encodeURIComponent(filePath)
+
+      const updateAssetResponse = await this.sdk.getAssetStorageService().update(projectId, encodedPath, file)
+
+      if (!updateAssetResponse) {
+        throw new Error('Assets update request not created')
+      }
+      return updateAssetResponse
+    } else {
+      throw new Error('SDK does not exist')
+    }
+  }
+
+  async downloadAsset(projectId: string, path: string) {
+    if (this.sdk) {
+      return await this.sdk.getAssetStorageService().getAsset(projectId, path)
+    } else {
+      throw new Error('SDK does not exist')
+    }
+  }
+}