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 && ( 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] },