Add fps to subscribe setting (livekit#484)

* Add fps to subscribe setting

* solve comments

.changeset/lovely-ties-tell.md

@@ -0,0 +1,5 @@
+---
+'livekit-client': patch
+---
+
+Add fps field to SubscribeSetting

example/index.html

@@ -161,6 +161,17 @@ <h2>Livekit Sample App</h2>
  <option value="medium">medium</option>
  <option value="low">low</option>
  </select>
+ <select
+ id="preferred-fps"
+ class="custom-select"
+ style="width: auto"
+ onchange="appActions.handlePreferredFPS(event)"
+ >
+ <option value="" selected>PreferredFPS</option>
+ <option value="30">30</option>
+ <option value="15">15</option>
+ <option value="8">8</option>
+ </select>
  </div>
  </div>
 

example/sample.ts

@@ -333,6 +333,17 @@ const appActions = {
  });
  }
  },
+
+ handlePreferredFPS: (e: Event) => {
+ const fps = +(<HTMLSelectElement>e.target).value;
+ if (currentRoom) {
+ currentRoom.participants.forEach((participant) => {
+ participant.tracks.forEach((track) => {
+ track.setVideoFPS(fps);
+ });
+ });
+ }
+ },
 };
 
 declare global {

src/proto/livekit_rtc.ts

@@ -267,6 +267,8 @@ export interface UpdateTrackSettings {
  width: number;
  /** for video, height to receive */
  height: number;
+ /** for video, frame rate to receive */
+ fps: number;
 }
 
 export interface LeaveRequest {
@@ -1843,7 +1845,7 @@ export const UpdateSubscription = {
 };
 
 function createBaseUpdateTrackSettings(): UpdateTrackSettings {
- return { trackSids: [], disabled: false, quality: 0, width: 0, height: 0 };
+ return { trackSids: [], disabled: false, quality: 0, width: 0, height: 0, fps: 0 };
 }
 
 export const UpdateTrackSettings = {
@@ -1863,6 +1865,9 @@ export const UpdateTrackSettings = {
  if (message.height !== 0) {
  writer.uint32(48).uint32(message.height);
  }
+ if (message.fps !== 0) {
+ writer.uint32(56).uint32(message.fps);
+ }
  return writer;
  },
 
@@ -1888,6 +1893,9 @@ export const UpdateTrackSettings = {
  case 6:
  message.height = reader.uint32();
  break;
+ case 7:
+ message.fps = reader.uint32();
+ break;
  default:
  reader.skipType(tag & 7);
  break;
@@ -1903,6 +1911,7 @@ export const UpdateTrackSettings = {
  quality: isSet(object.quality) ? videoQualityFromJSON(object.quality) : 0,
  width: isSet(object.width) ? Number(object.width) : 0,
  height: isSet(object.height) ? Number(object.height) : 0,
+ fps: isSet(object.fps) ? Number(object.fps) : 0,
  };
  },
 
@@ -1917,6 +1926,7 @@ export const UpdateTrackSettings = {
  message.quality !== undefined && (obj.quality = videoQualityToJSON(message.quality));
  message.width !== undefined && (obj.width = Math.round(message.width));
  message.height !== undefined && (obj.height = Math.round(message.height));
+ message.fps !== undefined && (obj.fps = Math.round(message.fps));
  return obj;
  },
 
@@ -1927,6 +1937,7 @@ export const UpdateTrackSettings = {
  message.quality = object.quality ?? 0;
  message.width = object.width ?? 0;
  message.height = object.height ?? 0;
+ message.fps = object.fps ?? 0;
  return message;
  },
 };

src/room/track/RemoteTrackPublication.ts

@@ -22,6 +22,8 @@ export default class RemoteTrackPublication extends TrackPublication {
 
  protected videoDimensions?: Track.Dimensions;
 
+ protected fps?: number;
+
  constructor(kind: Track.Kind, id: string, name: string, autoSubscribe: boolean | undefined) {
  super(kind, id, name);
  this.subscribed = autoSubscribe;
@@ -143,6 +145,23 @@ export default class RemoteTrackPublication extends TrackPublication {
  this.emitTrackUpdate();
  }
 
+ setVideoFPS(fps: number) {
+ if (!this.isManualOperationAllowed()) {
+ return;
+ }
+
+ if (!(this.track instanceof RemoteVideoTrack)) {
+ return;
+ }
+
+ if (this.fps === fps) {
+ return;
+ }
+
+ this.fps = fps;
+ this.emitTrackUpdate();
+ }
+
  get videoQuality(): VideoQuality | undefined {
  return this.currentVideoQuality;
  }
@@ -256,6 +275,7 @@ export default class RemoteTrackPublication extends TrackPublication {
  const settings: UpdateTrackSettings = UpdateTrackSettings.fromPartial({
  trackSids: [this.trackSid],
  disabled: this.disabled,
+ fps: this.fps,
  });
  if (this.videoDimensions) {
  settings.width = this.videoDimensions.width;