diff --git a/examples/client-demo/src/App.tsx b/examples/client-demo/src/App.tsx
index ec3f86e..1050741 100644
--- a/examples/client-demo/src/App.tsx
+++ b/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 (
-
-
+ peerId : {peerId}
+
+
-
-
-
+
);
};
diff --git a/examples/client-demo/src/containers/control.tsx b/examples/client-demo/src/containers/control.tsx
index 32585e4..53de7c7 100644
--- a/examples/client-demo/src/containers/control.tsx
+++ b/examples/client-demo/src/containers/control.tsx
@@ -5,7 +5,7 @@ import { ClientContext } from "..";
export const Control: FC = () => {
const client = useContext(ClientContext);
- const publish = async (
+ const publishMedia = async (
simulcast: boolean,
constraints: MediaStreamConstraints
) => {
@@ -13,15 +13,25 @@ export const Control: FC = () => {
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 (
-
);
};
diff --git a/examples/client-demo/src/containers/remote/media.tsx b/examples/client-demo/src/containers/remote/media.tsx
index 761d175..37a0480 100644
--- a/examples/client-demo/src/containers/remote/media.tsx
+++ b/examples/client-demo/src/containers/remote/media.tsx
@@ -39,7 +39,7 @@ export const Media: FC<{ info: MediaInfo }> = ({ info }) => {
unsubscribe
- {info.simulcast && (
+ {stream && info.simulcast && (
changeQuality(info, "low")}>low
changeQuality(info, "high")}>high
diff --git a/packages/client/src/domain/user.ts b/packages/client/src/domain/user.ts
index 3d4dd02..29293cd 100644
--- a/packages/client/src/domain/user.ts
+++ b/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);
}
diff --git a/packages/core/src/domains/peer.ts b/packages/core/src/domains/peer.ts
new file mode 100644
index 0000000..1628ba9
--- /dev/null
+++ b/packages/core/src/domains/peer.ts
@@ -0,0 +1,5 @@
+import { RTCPeerConnection } from "../../../werift";
+
+export class PeerConnection extends RTCPeerConnection {
+ simulcastIndex = 0;
+}
diff --git a/packages/core/src/domains/room.ts b/packages/core/src/domains/room.ts
index a13b634..7fece8d 100644
--- a/packages/core/src/domains/room.ts
+++ b/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) =>
diff --git a/packages/core/src/domains/sfu/subscriber.ts b/packages/core/src/domains/sfu/subscriber.ts
index ea5889c..15caae8 100644
--- a/packages/core/src/domains/sfu/subscriber.ts
+++ b/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);
diff --git a/packages/core/src/responders/connection.ts b/packages/core/src/responders/connection.ts
index 3b8362d..5d08add 100644
--- a/packages/core/src/responders/connection.ts
+++ b/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(
{ type: "handlePublish", payload: [info] },