server.js

 const mediasoup = require('mediasoup');
 const socketIO = require('socket.io');
 const express = require('express');


    
 let socketServer;
 let producer;
 let worker;
 let router;
 let consumeTransport;
 let producerTransport;
 let videoRTPport;
 let videoRtcpPort;
 const test = {
  kind          : 'video',
  rtpParameters :
  {
    codecs :
    [
      {

        mimeType     : 'video/H264',
        clockRate    : 90000,
        payloadType  : 102,
        rtcpFeedback : [ ], // FFmpeg does not support NACK nor PLI/FIR.
        parameters: {
          "packetization-mode": 1,
         }
      }
    ],
    
  encodings : [ { ssrc: 22222222 } ]
  }
}
const rtpParams =   {
  codecs :
  [
    {

      mimeType     : 'video/H264',
      clockRate    : 90000,
      payloadType  : 102,
      rtcpFeedback : [ ], // FFmpeg does not support NACK nor PLI/FIR.
      parameters: {
        "packetization-mode": 1,
       }
    }
  ],
  
encodings : [ { ssrc: 22222222 } ]
}
 const mediaCodecs =
 [
   {
     kind        : "audio",
     mimeType    : "audio/opus",
     clockRate   : 48000,
     channels    : 2
   },
   {
     kind       : "video",
     mimeType   : "video/H264",
     clockRate  : 90000,
     parameters: {
      "packetization-mode": 1,
     }
   }
 ];

 init();


async function init(){
  await runSocketServer();
  await createWorker();
  producerTransport = await router.createPlainRtpTransport({ 
    listenIp        : '127.0.0.1',
    rtcpMux  : false,
    comedia  : true
  })
  videoRTPport = producerTransport.tuple.localPort;
  videoRtcpPort = producerTransport.rtcpTuple.localPort;
  console.log(producerTransport.tuple.localPort + " " + producerTransport.rtcpTuple.localPort)
  producer = await producerTransport.produce(test).catch(error => {
    console.log(error)
  })

 
}






 async function createWorker(){
   worker = await mediasoup.createWorker({
     logLevel: "warn"
   })
   router = await worker.createRouter({mediaCodecs})
 }

 async function createTransport(){
   transport = await router.createWebRtcTransport({listenIps: [
    {
      ip: '127.0.0.1',
      announcedIp: null,
    }
  ],   enableUdp: true,
  enableTcp: true,
  preferUdp: true}, )

  return {
    transport,
    params: {
      id: transport.id,
      iceParameters: transport.iceParameters,
      iceCandidates: transport.iceCandidates,
      dtlsParameters: transport.dtlsParameters
    },
  };
 }




 async function runSocketServer(){
   socketServer = socketIO(8080, {
     serveClient: false,
     path: '/signal',
     log: false,
   })



   socketServer.on('connection', socket => {
    console.log('user connected');
  

    socket.on('getRtpCapabilities', (data,callback) => {
      callback(router.rtpCapabilities);
   })



   socket.on('transport', async (data, callback)=>{
     const {transport, params} = await createTransport();
     consumeTransport = transport;
     callback(params)
   })
   
   socket.on('consume', async (rtpCapa, callback) => {
  
     if(router.canConsume({producerId: producer.id, rtpCapabilities: rtpCapa})){
       console.log("aught")
       const consumer = await consumeTransport.consume({producerId: producer.id, rtpCapabilities: rtpCapa});
       callback({    producerId: producer.id,
        id: consumer.id,
        kind: consumer.kind,
        rtpParameters: consumer.rtpParameters, 
        type: consumer.type});
     }
   })

   socket.on('connectConsumerTransport', async (data, callback) => {
    await consumeTransport.connect({ dtlsParameters: data.dtlsParameters });
    console.log("consumer connected")
    callback();
  });

  

 });
}

video.component.ts

import { Component, OnInit, defineInjectable } from '@angular/core';
import * as mediasoupClient from 'mediasoup-client';
import * as io from 'socket.io-client';
@Component({
  selector: 'app-video',
  templateUrl: './video.component.html',
  styleUrls: ['./video.component.scss']
})
export class VideoComponent implements OnInit {
   private socket;
   private device;
   private stream;
   private transport;

  constructor() { }

  async ngOnInit() {
    this.connect();

  }



  async connect(){
    const opts = {path: '/signal'};
    this.socket = io('http://localhost:8080', opts);


    this.socket.on('connect', async() => {
      console.log('connected!!!!!!');
      await this.socket.emit('getRtpCapabilities', {},(data)=>{
        console.log(data);
        this.buildDevice(data);

      });
    });

    this.socket.on('disconnect' ,() => {
      console.log('disconnect');
    });


  }


  async buildDevice(routerRtpCapabilities){

    this.device = new mediasoupClient.Device();
    await this.device.load({ routerRtpCapabilities });
  }


  async subscribe(){
     this.socket.emit('transport', {}, async data => {
       this.transport =  this.device.createRecvTransport(data);
       this.transport.on('connect', ({ dtlsParameters }, callback, errback) => {
        this.socket.emit('connectConsumerTransport', {transportId: this.transport.id,dtlsParameters}, data => {
         console.log("connected consumer")
       }).then(callback).catch(errback);
   });




       await this.consume();


    });


}




 async consume(){
  console.log("consuming")
  this.socket.emit('consume', this.device.rtpCapabilities, async (data) => {
     console.log(data);
     const {
      producerId,
      id,
      kind,
      rtpParameters,
    } = data;
     const consumer = await this.transport.consume({ producerId,
      id,
      kind,
      rtpParameters}).catch(err => {
        console.log(err)
      });
     this.stream = new MediaStream();
     this.stream.addTrack(consumer.track);
     (<HTMLMediaElement>document.getElementById('stream')).srcObject = this.stream;

  });
}




}