Typescript and WebRTC, 'createDataChannel' does not exist on type 'RTCPeerConnection'

Viewed 3427

I'm experimenting with WebRTC and typescript, because typescript is awesome and webrtc is even awesomer... I'm doing this in the context of Angular 6 using VS Code.

It does not seem like a match made in heaven (probably due to me not understanding some integral part of either one).

I've had a hard time finding any examples of people using typescript for webrtc but when I started to try to translate a plain javascript example I noted that the methods and properties seemed to be recognized in Visual Studio Code at least. But I did not get far.

Below you can see me trying to translate a simple example to typescript.

createConnection ()
{       
    // window.localConnection = localConnection = new RTCPeerConnection(servers);
    this.localConnection = new RTCPeerConnection();
    console.log(this.sendChannel);

    // sendChannel = localConnection.createDataChannel('sendDataChannel');
    var sendChannel = this.localConnection.createDataChannel('sendDataChannel');
    console.log(this.sendChannel);

    // localConnection.onicecandidate = e => {
    //   onIceCandidate(localConnection, e);
    // };
    // sendChannel.onopen = onSendChannelStateChange;
    // sendChannel.onclose = onSendChannelStateChange;

    // window.remoteConnection = remoteConnection = new RTCPeerConnection(servers);
    // console.log('Created remote peer connection object remoteConnection');

    // remoteConnection.onicecandidate = e => {
    //   onIceCandidate(remoteConnection, e);
    // };
    // remoteConnection.ondatachannel = receiveChannelCallback;

    // localConnection.createOffer().then(
    //   gotDescription1,
    //   onCreateSessionDescriptionError
    // );
    // startButton.disabled = true;
    // closeButton.disabled = false;
  }

On the definition of the sendChannel I get this error:

src/app/app.component.ts(48,44): error TS2339: Property 'createDataChannel' does not exist on type 'RTCPeerConnection'.

The console log for the first log is:

RTCPeerConnection { localDescription: null, currentLocalDescription: null, pendingLocalDescription: null, remoteDescription: null, currentRemoteDescription: null, pendingRemoteDescription: null, signalingState: "stable", canTrickleIceCandidates: null, iceGatheringState: "new", iceConnectionState: "new" }

and null for the second logging.

Appreciate any tips or hints as to why Im getting this error and how to fix it.

Update: added git repositoryng se that reporoduces problem.

git clone https://github.com/wokawaka/typescriptwebrtctest
npm install
ng serve --open
1 Answers

It looks like TypeScript 3.0.0 and newer have the declaration of createDataChannel but older versions do not. Try upgrading TypeScript. There is also the @types/webrtc package, which may have newer declarations before they make it into the TypeScript standard library.

Related