@campoint/vxwebrtc 0.0.2

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@campoint/vxwebrtc",
+  "version": "0.0.2",
+  "main": "./dist/vxwebrtc.js",
+  "types": "./dist/vxwebrtc.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@gitlab.com/CampointAG/web-rtc.git"
+  },
+  "author": "evgeniy@aporia.su",
+  "license": "UNLICENSED",
+  "dependencies": {
+    "lodash": "^4.17.21",
+    "webrtc-adapter": "^8.1.1"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "clean": "rimraf ./dist",
+    "clean:deps": "rimraf ./node_modules",
+    "build": "webpack --config webpack.prod.js",
+    "build:dev": "webpack --config webpack.dev.js",
+    "watch": "webpack --config webpack.dev.js --watch",
+    "lint": "eslint src/ --ext .js,.jsx,.ts,.tsx,.json",
+    "style": "prettier --write \"{src,test}/**/*.ts\""
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "always",
+    "endOfLine": "lf",
+    "printWidth": 100
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.12.0",
+    "@typescript-eslint/parser": "^5.12.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "duplicate-package-checker-webpack-plugin": "^3.0.0",
+    "eslint": "^8.9.0",
+    "prettier": "^2.5.1",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.5.5",
+    "webpack": "^5.69.0",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-merge": "^5.8.0"
+  },
+  "description": "",
+  "bugs": {
+    "url": "https://gitlab.com/CampointAG/web-rtc/issues"
+  },
+  "homepage": "https://gitlab.com/CampointAG/web-rtc#readme"
+}

package/src/MungeSdp.ts

@@ -0,0 +1,323 @@
+//@link https://www.wowza.com/wp-content/themes/wowzav1/webrtc-ui/wordpress-dev/1.2.9/lib/WowzaMungeSDP.js
+//no refactoring required, in order to facilitate updates
+import * as _ from 'lodash';
+import adapter from 'webrtc-adapter';
+import { MediaInfo, EnumVideoCodec, EnumMediaStreamTrackKind } from './Types/CommonConnectionTypes';
+import { EnumVideoCodecs } from './browserSupportedVideoCodec';
+
+type TSDPOutput = {
+  [key: number]: string;
+};
+
+let SDPOutput: TSDPOutput = {};
+let audioChoice = '';
+let videoIndex = -1;
+let audioIndex = -1;
+
+function addAudio(sdpStr: string, audioLine: string) {
+  let sdpLines = sdpStr.split(/\r\n/);
+  let sdpStrRet = '';
+  let done = false;
+  let sdpSection = '';
+
+  for (const sdpLine of sdpLines) {
+    if (sdpLine.length <= 0) {
+      continue;
+    }
+
+    if (sdpLine.indexOf('m=audio') === 0) {
+      sdpSection = 'audio';
+    } else if (sdpLine.indexOf('m=video') === 0) {
+      sdpSection = 'video';
+    }
+
+    sdpStrRet += sdpLine;
+    sdpStrRet += '\r\n';
+
+    if (sdpSection === 'audio' && 'a=rtcp-mux' === sdpLine && !done) {
+      sdpStrRet += audioLine;
+      done = true;
+    }
+  }
+  return sdpStrRet;
+}
+
+function addVideo(sdpStr: string, videoLine: string) {
+  let sdpLines = sdpStr.split(/\r\n/);
+  let sdpStrRet = '';
+  let done = false;
+
+  let rtcpSize = false;
+
+  for (const sdpLine of sdpLines) {
+    if (sdpLine.length <= 0) continue;
+
+    if (sdpLine.includes('a=rtcp-rsize')) {
+      rtcpSize = true;
+    }
+
+    // if (sdpLine.includes("a=rtcp-mux")) {
+    //   rtcpMux = true;
+    // }
+  }
+
+  for (const sdpLine of sdpLines) {
+    sdpStrRet += sdpLine;
+    sdpStrRet += '\r\n';
+
+    if ('a=rtcp-rsize'.localeCompare(sdpLine) === 0 && !done && rtcpSize) {
+      sdpStrRet += videoLine;
+      done = true;
+    }
+
+    if ('a=rtcp-mux'.localeCompare(sdpLine) === 0 && done && !rtcpSize) {
+      sdpStrRet += videoLine;
+      done = true;
+    }
+
+    if ('a=rtcp-mux'.localeCompare(sdpLine) === 0 && !done && !rtcpSize) {
+      done = true;
+    }
+  }
+  return sdpStrRet;
+}
+
+// Filter codec offerings
+function deliverCheckLine(profile: string, type: EnumMediaStreamTrackKind): string {
+  for (let l in SDPOutput) {
+    const line = Number.parseInt(l, 10);
+    let lineInUse = SDPOutput[line];
+    if (lineInUse.includes(profile)) {
+      if (profile.includes('VP9') || profile.includes('VP8')) {
+        let output = '';
+        let outputs = lineInUse.split(/\r\n/);
+        for (const transport of outputs) {
+          // NOTE: This block of code is needed for WSE versions older than 4.8.5
+          // if (transport.indexOf("a=extmap") !== -1 ||
+          //   transport.indexOf("transport-cc") !== -1 ||
+          //   transport.indexOf("goog-remb") !== -1 ||
+          //   transport.indexOf("nack") !== -1) {
+          //   continue;
+          // }
+          output += transport;
+          output += '\r\n';
+        }
+
+        if (type.includes(EnumMediaStreamTrackKind.AUDIO)) {
+          audioIndex = line;
+        }
+
+        if (type.includes(EnumMediaStreamTrackKind.VIDEO)) {
+          videoIndex = line;
+        }
+
+        return output;
+      }
+      if (type.includes(EnumMediaStreamTrackKind.AUDIO)) {
+        audioIndex = line;
+      }
+
+      if (type.includes(EnumMediaStreamTrackKind.VIDEO)) {
+        videoIndex = line;
+      }
+
+      return lineInUse;
+    }
+  }
+  return '';
+}
+
+function checkLine(line: string) {
+  if (line.startsWith('a=rtpmap') || line.startsWith('a=rtcp-fb') || line.startsWith('a=fmtp')) {
+    let res = line.split(':');
+
+    if (res.length > 1) {
+      let number = res[1].split(' ');
+      const pos = Number.parseInt(number[0], 10);
+      if (!Number.isNaN(pos)) {
+        if (!number[1].startsWith('http') && !number[1].startsWith('ur')) {
+          let currentString = SDPOutput[pos];
+          if (!currentString) {
+            currentString = '';
+          }
+          currentString += line + '\r\n';
+          SDPOutput[pos] = currentString;
+          return false;
+        }
+      }
+    }
+  }
+
+  return true;
+}
+
+function getRtpMapId(line: string) {
+  const findId = new RegExp('a=rtpmap:(\\d+) (\\w+)/(\\d+)');
+  const found = line.match(findId);
+  return found && found.length >= 3 ? found : null;
+}
+
+export function mungeSdpPublish(sdpStr: string, mungeData: MediaInfo) {
+  SDPOutput = {};
+  audioChoice = !_.isEmpty(mungeData.audioCodec) ? mungeData.audioCodec : 'opus';
+  videoIndex = -1;
+  audioIndex = -1;
+
+  let sdpLines = sdpStr.split(/\r\n/);
+
+  let sdpSection = 'header';
+  let hitMID = false;
+  let sdpStrRet = '';
+  const browserName = adapter.browserDetails.browser;
+
+  // Deliver the requested codecs
+  for (const sdpLine of sdpLines) {
+    if (sdpLine.length <= 0) continue;
+
+    if (!checkLine(sdpLine)) {
+      continue;
+    }
+
+    sdpStrRet += sdpLine;
+    sdpStrRet += '\r\n';
+  }
+
+  sdpStrRet = addAudio(sdpStrRet, deliverCheckLine(audioChoice, EnumMediaStreamTrackKind.AUDIO));
+  sdpStrRet = addVideo(
+    sdpStrRet,
+    deliverCheckLine(mungeData.videoCodec, EnumMediaStreamTrackKind.VIDEO)
+  );
+  sdpStr = sdpStrRet;
+  sdpLines = sdpStr.split(/\r\n/);
+  sdpStrRet = '';
+
+  for (let sdpLine of sdpLines) {
+    if (sdpLine.length <= 0) continue;
+
+    if (browserName === 'chrome') {
+      let audioMLines;
+      if (sdpLine.indexOf('m=audio') === 0 && audioIndex !== -1) {
+        audioMLines = sdpLine.split(' ');
+        sdpStrRet +=
+          audioMLines[0] + ' ' + audioMLines[1] + ' ' + audioMLines[2] + ' ' + audioIndex + '\r\n';
+        continue;
+      }
+
+      if (sdpLine.indexOf('m=video') === 0 && videoIndex !== -1) {
+        audioMLines = sdpLine.split(' ');
+        sdpStrRet +=
+          audioMLines[0] + ' ' + audioMLines[1] + ' ' + audioMLines[2] + ' ' + videoIndex + '\r\n';
+        continue;
+      }
+    }
+
+    if (mungeData.videoCodec === EnumVideoCodec.H264 && sdpLine.startsWith('a=fmtp')) {
+      if (_.has(mungeData.h264CodecOptions, 'packetization-mode')) {
+        sdpLine = sdpLine.replace(
+          /packetization-mode[\s\d=]+/,
+          `packetization-mode=${_.get(mungeData.h264CodecOptions, 'packetization-mode')}`
+        );
+      }
+
+      if (_.has(mungeData.h264CodecOptions, 'profile-level-id')) {
+        sdpLine = sdpLine.replace(
+          /profile-level-id[\s=]+[^;]+/,
+          `profile-level-id=${_.get(mungeData.h264CodecOptions, 'profile-level-id')}`
+        );
+      }
+
+      if (_.has(mungeData.h264CodecOptions, 'level-asymmetry-allowed')) {
+        if (sdpLine.indexOf('level-asymmetry-allowed') !== -1) {
+          sdpLine = sdpLine.replace(
+            /level-asymmetry-allowed[\s=]+[^;]+/,
+            `level-asymmetry-allowed=${_.get(
+              mungeData.h264CodecOptions,
+              'level-asymmetry-allowed'
+            )}`
+          );
+        }
+      }
+    } else if (
+      mungeData.videoCodec === EnumVideoCodecs.VP9 &&
+      sdpLine.startsWith('a=fmtp') &&
+      sdpLine.indexOf('profile-id') !== -1
+    ) {
+      if (_.has(mungeData.vp9CodecOptions, 'profile-id')) {
+        sdpLine = sdpLine.replace(
+          /profile-id[\s=]+[^;]+/,
+          `profile-id=${_.get(mungeData.vp9CodecOptions, 'profile-id')}`
+        );
+      }
+    }
+    sdpStrRet += sdpLine;
+
+    if (sdpLine.indexOf('m=audio') === 0) {
+      sdpSection = 'audio';
+      hitMID = false;
+    } else if (sdpLine.indexOf('m=video') === 0) {
+      sdpSection = 'video';
+      hitMID = false;
+    } else if (sdpLine.indexOf('a=rtpmap') === 0) {
+      sdpSection = 'bandwidth';
+      hitMID = false;
+    }
+
+    if (browserName === 'chrome') {
+      if (sdpLine.indexOf('a=mid:') === 0 || sdpLine.indexOf('a=rtpmap') === 0) {
+        if (!hitMID) {
+          if ('audio' === sdpSection) {
+            sdpStrRet += '\r\nb=CT:' + mungeData.audioBitrate.max;
+            sdpStrRet += '\r\nb=AS:' + mungeData.audioBitrate.min;
+            hitMID = true;
+          } else if ('video' === sdpSection) {
+            sdpStrRet += '\r\nb=CT:' + mungeData.videoBitrate.max;
+            sdpStrRet += '\r\nb=AS:' + mungeData.videoBitrate.min;
+            sdpStrRet += '\r\na=framerate:' + _.get(mungeData.videoFrameRate, 'ideal', 30);
+            hitMID = true;
+          } else if ('bandwidth' === sdpSection) {
+            const rtpmapID = getRtpMapId(sdpLine);
+            if (rtpmapID !== null) {
+              const match = rtpmapID[2].toLowerCase();
+              if (_.includes(['vp9', 'vp8', 'h264', 'red', 'ulpfec', 'rtx'], match)) {
+                sdpStrRet +=
+                  '\r\na=fmtp:' +
+                  rtpmapID[1] +
+                  ' x-google-min-bitrate=' +
+                  mungeData.videoBitrate.min +
+                  ';x-google-max-bitrate=' +
+                  mungeData.videoBitrate.max;
+              }
+
+              if (_.includes(['opus', 'isac', 'g722', 'pcmu', 'pcma', 'cn'], match)) {
+                sdpStrRet +=
+                  '\r\na=fmtp:' +
+                  rtpmapID[1] +
+                  ' x-google-min-bitrate=' +
+                  mungeData.audioBitrate.min +
+                  ';x-google-max-bitrate=' +
+                  mungeData.audioBitrate.max;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    if (browserName === 'firefox' || browserName === 'safari') {
+      if (sdpLine.indexOf('c=IN') === 0) {
+        if ('audio' === sdpSection) {
+          const audioBitrateTIAS = Math.round(
+            mungeData.audioBitrate.min * 0.95 - (50 * 40 * 8) / 1000
+          );
+          sdpStrRet += '\r\nb=TIAS:' + audioBitrateTIAS + '\r\n';
+          sdpStrRet += 'b=AS:' + mungeData.audioBitrate.min + '\r\n';
+          sdpStrRet += 'b=CT:' + mungeData.audioBitrate.max + '\r\n';
+          continue;
+        }
+      }
+    }
+
+    sdpStrRet += '\r\n';
+  }
+  return sdpStrRet;
+}

package/src/Types/CodecsOptions.ts

@@ -0,0 +1,9 @@
+export interface TWebRtcH264CodecOptions {
+  'packetization-mode'?: 0 | 1;
+  'profile-level-id'?: string;
+  'level-asymmetry-allowed'?: number;
+}
+
+export interface TWebRtcVP9CodecOptions {
+  'profile-id'?: number;
+}

package/src/Types/CommonConnectionTypes.ts

@@ -0,0 +1,57 @@
+import { TConstrainULongRange } from './WebRTCStreamConfig';
+import { TWebRtcH264CodecOptions, TWebRtcVP9CodecOptions } from './CodecsOptions';
+
+export type OnErrorCallback = (e: Error) => void;
+export type OnStopCallback = () => void;
+
+export interface StreamInfo {
+  applicationName: string;
+  streamName: string;
+  sessionId: string;
+}
+
+export interface WebSocketReply {
+  status: string;
+  statusDescription: string;
+  command: string;
+  streamInfo?: StreamInfo;
+  sdp?: RTCSessionDescriptionInit;
+  iceCandidates?: RTCIceCandidateInit[];
+  direction: string;
+}
+
+export enum EnumVideoCodec {
+  H264 = '42e01f',
+}
+
+export interface MediaInfo {
+  audioBitrate: TConstrainULongRange;
+  audioCodec: string;
+  videoBitrate: TConstrainULongRange;
+  videoCodec: string;
+  videoFrameRate: ConstrainULongRange;
+  h264CodecOptions: TWebRtcH264CodecOptions;
+  vp9CodecOptions: TWebRtcVP9CodecOptions;
+}
+
+export enum EnumWebSocketConnectionStatus {
+  OK = 200,
+  NOT_READY = 514,
+}
+
+export enum EnumWebSocketConnectionDirection {
+  PUBLISH = 'publish',
+  PLAY = 'play',
+}
+
+export enum EnumWebSocketConnectionCommand {
+  SEND_OFFER = 'sendOffer',
+  GET_OFFER = 'getOffer',
+  SEND_RESPONSE = 'sendResponse',
+  GET_AVAILABLE_STREAM = 'getAvailableStreams',
+}
+
+export enum EnumMediaStreamTrackKind {
+  AUDIO = 'audio',
+  VIDEO = 'video',
+}

package/src/Types/EnumCodecContentType.ts

@@ -0,0 +1,13 @@
+export enum EnumCodecContentType {
+  OPUS = 'audio/mp4;codecs="opus"',
+  VORBIS = 'audio/ogg;codecs="vorbis"',
+  H264 = 'video/mp4',
+  VP8 = 'video/webm;codecs="vp8"',
+  VP9 = 'video/webm;codecs="vp9"',
+  WEBM = 'video/webm',
+  HLS = 'application/vnd.apple.mpegURL',
+  H264_AVC = 'video/mp4; codecs="avc1.42E01E"',
+  H264_MP4 = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
+  H265_HEC = 'video/mp4; codecs="hvc1.1.L0.0"',
+  H265_HEV = 'video/mp4; codecs="hev1.1.L0.0"',
+}

package/src/Types/WebRTCStreamConfig.ts

@@ -0,0 +1,59 @@
+export abstract class WebRTCStreamConfig {
+  url = '';
+  applicationName = '';
+  streamName = '';
+
+  h264CodecOptions = {};
+  vp9CodecOptions = {};
+
+  video: TVideoPermissions = {
+    width: {
+      min: 1024,
+      ideal: 1280,
+      max: 1920,
+    },
+    height: {
+      min: 576,
+      ideal: 720,
+      max: 1080,
+    },
+    frameRate: {
+      min: 15,
+      ideal: 30,
+      max: 30,
+    },
+    bitRate: {
+      min: 800000,
+      ideal: 2500000,
+      max: 3500000,
+    },
+  };
+
+  audio: TAudioPermissions = {
+    bitRate: {
+      min: 32000,
+      ideal: 64000,
+      max: 128000,
+    },
+  };
+}
+
+export type TAudioPermissions = {
+  noiseSuppression?: boolean;
+  echoCancellation?: boolean;
+  channelCount?: number;
+  bitRate: TConstrainULongRange;
+};
+
+export type TVideoPermissions = {
+  width: TConstrainULongRange;
+  height: TConstrainULongRange;
+  frameRate: TConstrainULongRange;
+  bitRate: TConstrainULongRange;
+};
+
+export type TConstrainULongRange = {
+  min: number;
+  ideal: number;
+  max: number;
+};

package/src/WebRtcInputConnection.ts

@@ -0,0 +1,152 @@
+import {
+  EnumWebSocketConnectionCommand,
+  EnumWebSocketConnectionDirection,
+  WebSocketReply,
+  EnumWebSocketConnectionStatus,
+} from './Types/CommonConnectionTypes';
+import WebRtcPeerConnection, { IWebRtcPeerConnectionOptions } from './WebRtcPeerConnection';
+
+const REPEATER_RETRY_COUNTER = 10;
+
+export class WebRtcInputConnection extends WebRtcPeerConnection {
+  protected connectionOptions: IWebRtcInputConnection;
+  private _peerConnectionConfig?: RTCConfiguration = undefined;
+  private _repeaterRetryCount = 0;
+  private _stream: MediaStream | undefined;
+
+  constructor(connectionOptions: IWebRtcInputConnection) {
+    super(connectionOptions);
+
+    this.connectionOptions = connectionOptions;
+    this.onRtcDescription = this.onRtcDescription.bind(this);
+    this.onWsOpen = this.onWsOpen.bind(this);
+    this.onWsMessage = this.onWsMessage.bind(this);
+    this.onError = this.onError.bind(this);
+    this.onRemoteTrack = this.onRemoteTrack.bind(this);
+  }
+
+  protected onRtcDescription(description: RTCSessionDescriptionInit) {
+    if (!this.peerConnection) {
+      return this.onError(new Error('RTC got description, but no RTC'));
+    }
+    this.peerConnection
+      .setLocalDescription(description)
+      .then(() =>
+        this.sendResponse(
+          EnumWebSocketConnectionDirection.PLAY,
+          EnumWebSocketConnectionCommand.SEND_RESPONSE,
+          description
+        )
+      )
+      .catch(this.onError);
+  }
+
+  protected onRemoteTrack(event: RTCTrackEvent): void {
+    try {
+      this._stream = event.streams[0];
+      this.connectionOptions.onTrack!(event.track.kind);
+      if (this.connectionOptions.videoElement) {
+        this.connectionOptions.videoElement.srcObject = event.streams[0];
+      }
+    } catch (error) {
+      this.onError(new Error(JSON.stringify(error ? error : '')));
+    }
+  }
+
+  protected onWsOpen(): void {
+    this.peerConnection = new RTCPeerConnection(this._peerConnectionConfig);
+    this.peerConnection.ontrack = this.onRemoteTrack;
+
+    this.sendResponse(
+      EnumWebSocketConnectionDirection.PLAY,
+      EnumWebSocketConnectionCommand.GET_OFFER
+    );
+  }
+
+  protected onWsMessage(evt: MessageEvent) {
+    const msgJson: WebSocketReply = JSON.parse(evt.data);
+    const msgStatus = parseInt(msgJson.status, 10);
+
+    if (msgStatus !== EnumWebSocketConnectionStatus.OK) {
+      this._repeaterRetryCount++;
+
+      if (this._repeaterRetryCount < REPEATER_RETRY_COUNTER) {
+        setTimeout(
+          () =>
+            this.sendResponse(
+              EnumWebSocketConnectionDirection.PLAY,
+              EnumWebSocketConnectionCommand.GET_OFFER
+            ),
+          this.connectionOptions.debounceTime
+        );
+      } else {
+        this.onError(
+          new Error('Live stream repeater timeout: ' + this.connectionOptions.streamInfo.streamName)
+        );
+        this.stop();
+      }
+    } else {
+      const sdpData = msgJson.sdp;
+      const streamInfoResponse = msgJson.streamInfo;
+
+      if (streamInfoResponse !== undefined) {
+        this.connectionOptions.streamInfo.sessionId = streamInfoResponse.sessionId;
+      }
+
+      if (sdpData && this.peerConnection) {
+        this.peerConnection
+          .setRemoteDescription(new RTCSessionDescription(sdpData))
+          .then(() => {
+            if (this.peerConnection !== undefined) {
+              return this.peerConnection
+                .createAnswer()
+                .then((description: RTCSessionDescriptionInit) =>
+                  this.onRtcDescription(description)
+                )
+                .catch(this.onError);
+            }
+          })
+          .catch(this.onError);
+      }
+
+      const iceCandidates: RTCIceCandidateInit[] = msgJson.iceCandidates;
+
+      if (iceCandidates?.length > 0 && this.peerConnection) {
+        for (const iceCandidate of iceCandidates) {
+          this.peerConnection
+            .addIceCandidate(new RTCIceCandidate(iceCandidate))
+            .catch(this.onError);
+        }
+      }
+    }
+
+    if (this.wsConnection && 'sendResponse'.localeCompare(msgJson.command) === 0) {
+      if (this.wsConnection !== null) {
+        this.wsConnection.close();
+      }
+
+      this.wsConnection = undefined;
+    }
+  }
+
+  public getStream(): MediaStream {
+    return this._stream;
+  }
+
+  public start(): void {
+    super.start();
+
+    this._repeaterRetryCount = 0;
+
+    if (this.wsConnection) {
+      this.wsConnection.onopen = this.onWsOpen;
+      this.wsConnection.onmessage = this.onWsMessage;
+    }
+  }
+}
+
+export interface IWebRtcInputConnection extends IWebRtcPeerConnectionOptions {
+  videoElement?: HTMLVideoElement;
+  onTrack?: (string) => void;
+  debounceTime: number;
+}