support publish multiple simulcast track

examples/client-demo/src/App.tsx

@@ -1,13 +1,13 @@
-import { FC, useContext, useEffect, useRef, useState } from "react";
+import { FC, useContext, useEffect, useState } from "react";
 import { ClientContext } from ".";
-import { MediaInfo, SubscriberType } from "../../../packages/client/src";
-import { Box, Button, Flex, Stack, Badge } from "@chakra-ui/react";
+import { Box, Stack, Text } from "@chakra-ui/react";
 import { Control } from "./containers/control";
 import { Medias } from "./containers/remote/medias";
 import { Published } from "./containers/local/published";
 
 const App: FC = () => {
   const client = useContext(ClientContext);
+  const [peerId, setPeerId] = useState("");
 
   const init = async () => {
     const params = new URLSearchParams(window.location.hash.split("#")[1]);
@@ -19,6 +19,7 @@ const App: FC = () => {
 
     console.log("roomName", client.roomName);
     client.apiJoin();
+    client.events.onConnect.subscribe(() => setPeerId(client.peerId));
   };
 
   useEffect(() => {
@@ -27,13 +28,12 @@ const App: FC = () => {
 
   return (
     <Box>
-      <Control />
-      <Box p={2}>
+      <Text>peerId : {peerId}</Text>
+      <Stack p={2}>
+        <Control />
         <Published />
-      </Box>
-      <Box p={2}>
         <Medias />
-      </Box>
+      </Stack>
     </Box>
   );
 };

examples/client-demo/src/containers/control.tsx

@@ -5,23 +5,33 @@ import { ClientContext } from "..";
 export const Control: FC = () => {
   const client = useContext(ClientContext);
 
-  const publish = async (
+  const publishMedia = async (
     simulcast: boolean,
     constraints: MediaStreamConstraints
   ) => {
     const mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
     await client.publish({ track: mediaStream.getTracks()[0], simulcast });
   };
 
+  const publishDisplay = async (simulcast: boolean) => {
+    const mediaStream = await (navigator.mediaDevices as any).getDisplayMedia();
+    await client.publish({ track: mediaStream.getTracks()[0], simulcast });
+  };
+
   return (
     <Stack direction="row">
-      <Button onClick={() => publish(true, { video: true })}>
+      <Button onClick={() => publishMedia(true, { video: true })}>
         publish simulcast
       </Button>
-      <Button onClick={() => publish(false, { video: true })}>publish</Button>
-      <Button onClick={() => publish(false, { audio: true })}>
+      <Button onClick={() => publishMedia(false, { video: true })}>
+        publish
+      </Button>
+      <Button onClick={() => publishMedia(false, { audio: true })}>
         publish audio
       </Button>
+      <Button onClick={() => publishDisplay(true)}>
+        publish simulcast display
+      </Button>
     </Stack>
   );
 };

examples/client-demo/src/containers/remote/media.tsx

@@ -39,7 +39,7 @@ export const Media: FC<{ info: MediaInfo }> = ({ info }) => {
           unsubscribe
         </Button>
       </Stack>
-      {info.simulcast && (
+      {stream && info.simulcast && (
         <Stack direction="row" p={1}>
           <Button onClick={() => changeQuality(info, "low")}>low</Button>
           <Button onClick={() => changeQuality(info, "high")}>high</Button>

packages/client/src/domain/user.ts

@@ -40,10 +40,16 @@ export class User {
 
     if (request.simulcast) {
       const params = transceiver.sender.getParameters();
-      params.encodings = [
-        { maxBitrate: 680000, scaleResolutionDownBy: 1, rid: "high" },
-        { maxBitrate: 36000, scaleResolutionDownBy: 4, rid: "low" },
-      ];
+      params.encodings[0] = {
+        ...params.encodings[0],
+        maxBitrate: 680000,
+        scaleResolutionDownBy: 1,
+      };
+      params.encodings[1] = {
+        ...params.encodings[1],
+        maxBitrate: 36000,
+        scaleResolutionDownBy: 4,
+      };
       transceiver.sender.setParameters(params);
     }
 

packages/core/src/domains/peer.ts

@@ -0,0 +1,5 @@
+import { RTCPeerConnection } from "../../../werift";
+
+export class PeerConnection extends RTCPeerConnection {
+  simulcastIndex = 0;
+}

packages/core/src/domains/room.ts

@@ -2,7 +2,6 @@ import debug from "debug";
 import { v4 } from "uuid";
 import {
   Kind,
-  RTCPeerConnection,
   RTCRtpTransceiver,
   useAbsSendTime,
   useSdesMid,
@@ -11,6 +10,7 @@ import {
 import { Connection } from "../responders/connection";
 import { MCUManager } from "./mcu/manager";
 import { Media, MediaInfo } from "./media/media";
+import { PeerConnection } from "./peer";
 import { SFUManager } from "./sfu/manager";
 import { SFU } from "./sfu/sfu";
 
@@ -20,12 +20,12 @@ export class Room {
   readonly connection = new Connection(this);
   readonly sfuManager = new SFUManager();
   readonly mcuManager = new MCUManager();
-  peers: { [peerId: string]: RTCPeerConnection } = {};
+  peers: { [peerId: string]: PeerConnection } = {};
   medias: { [mediaId: string]: Media } = {};
 
   async join() {
     const peerId = "p_" + v4();
-    const peer = new RTCPeerConnection({
+    const peer = new PeerConnection({
       stunServer: ["stun.l.google.com", 19302],
       headerExtensions: {
         video: [useSdesMid(1), useAbsSendTime(2), useSdesRTPStreamID(3)],
@@ -71,11 +71,12 @@ export class Room {
     log("publish", publisherId, { simulcast, kind });
     const peer = this.peers[publisherId];
 
+    const simulcastId = peer.simulcastIndex++;
     const transceiver = simulcast
       ? peer.addTransceiver("video", "recvonly", {
           simulcast: [
-            { rid: "high", direction: "recv" },
-            { rid: "low", direction: "recv" },
+            { rid: simulcastId + "high", direction: "recv" },
+            { rid: simulcastId + "low", direction: "recv" },
           ],
         })
       : peer.addTransceiver(kind, "recvonly");
@@ -85,7 +86,7 @@ export class Room {
     return { media, peer };
   }
 
-  async publish(media: Media, peer: RTCPeerConnection) {
+  async publish(media: Media) {
     if (media.simulcast) {
       await media.transceiver.onTrack.asPromise();
       media.transceiver.receiver.tracks.forEach((track) =>

packages/core/src/domains/sfu/subscriber.ts

@@ -99,7 +99,7 @@ export class Subscriber {
     const track =
       state === "single"
         ? this.tracks[0].track
-        : this.tracks.find(({ track }) => track.rid === state).track;
+        : this.tracks.find(({ track }) => track.rid.includes(state)).track;
 
     const [rtp] = await track.onRtp.asPromise();
     this.sender.replaceRtp(rtp.header);

packages/core/src/responders/connection.ts

@@ -110,7 +110,7 @@ export class Connection {
     const [publisherId, request] = args;
 
     const { media, peer } = this.room.createMedia(publisherId, request);
-    this.room.publish(media, peer).then(({ peers, info }) => {
+    this.room.publish(media).then(({ peers, info }) => {
       peers.forEach((peer) => {
         this.sendRPC<HandlePublish>(
           { type: "handlePublish", payload: [info] },