kwindla · May 17, 2023 04:00
diff --git a/hq-video-example.html b/hq-video-example.html
 <html>
  <head>
    <title>video aspect ratio and high bitrate/framerate</title>
    <script src="https://unpkg.com/@daily-co/daily-js"></script>
  </head>
  <body onload="main()">
    <script>
      /*

            This is sample code showing a simulcast layer configuration
            with higher bitrates than the Daily defaults.

            There is no UI code here. No pixels will be drawn in the
            browser window!

            Run this with the js console window open and join the room URL
            directly, in another browser tab, to see the video being
            sent.

            */

      // change ROOM_URL to a room in your Daily domain
      const ROOM_URL = "https:// DAILY ROOM URL"; // ... <-- REPLACE ME";

      // create Daily call object with custom video constraints that will be passed to
      // getUserMedia() when the camera video track is requested
      //
      async function main() {
        window.call = DailyIframe.createCallObject({
          dailyConfig: {
            userMediaVideoConstraints: {
              width: { ideal: 1760 },
              height: { ideal: 1200 },
              frameRate: { ideal: 60 },
            },
          },
        });

        call.on("error", (e) => console.error(e));

        await call.join({ url: ROOM_URL });

        // not needed in production, as the session topology should
        // be set by a room or domain property. but helpful in
        // testing, just to be sure the session is set to sfu mode.
        //
        await call.setNetworkTopology({ topology: "sfu" });

        // use standard three-layer simulcast, to be resilient to any network issues
        // (and to make it easier to debug the video quality settings), but set
        // the top layer to 1080p60, instead of the default 720p30
        //
        await call.updateSendSettings({
          video: {
            encodings: {
              low: {
                maxBitrate: 90000,
                scaleResolutionDownBy: 4,
                maxFramerate: 15,
              },
              medium: {
                maxBitrate: 400000,
                scaleResolutionDownBy: 2,
                maxFramerate: 30,
              },
              high: {
                maxBitrate: 5 * 1000 * 1000, // 5 mbps
                scaleResolutionDownBy: 1,
                maxFramerate: 60,
              },
            },
          },
        });
      }
    </script>
  </body>
 </html>
	<html>
	<head>
	<title>video aspect ratio and high bitrate/framerate</title>
	<script src="https://unpkg.com/@daily-co/daily-js"></script>
	</head>
	<body onload="main()">
	<script>
	/*

	This is sample code showing a simulcast layer configuration
	with higher bitrates than the Daily defaults.

	There is no UI code here. No pixels will be drawn in the
	browser window!

	Run this with the js console window open and join the room URL
	directly, in another browser tab, to see the video being
	sent.

	*/

	// change ROOM_URL to a room in your Daily domain
	const ROOM_URL = "https:// DAILY ROOM URL"; // ... <-- REPLACE ME";

	// create Daily call object with custom video constraints that will be passed to
	// getUserMedia() when the camera video track is requested
	//
	async function main() {
	window.call = DailyIframe.createCallObject({
	dailyConfig: {
	userMediaVideoConstraints: {
	width: { ideal: 1760 },
	height: { ideal: 1200 },
	frameRate: { ideal: 60 },
	},
	},
	});

	call.on("error", (e) => console.error(e));

	await call.join({ url: ROOM_URL });

	// not needed in production, as the session topology should
	// be set by a room or domain property. but helpful in
	// testing, just to be sure the session is set to sfu mode.
	//
	await call.setNetworkTopology({ topology: "sfu" });

	// use standard three-layer simulcast, to be resilient to any network issues
	// (and to make it easier to debug the video quality settings), but set
	// the top layer to 1080p60, instead of the default 720p30
	//
	await call.updateSendSettings({
	video: {
	encodings: {
	low: {
	maxBitrate: 90000,
	scaleResolutionDownBy: 4,
	maxFramerate: 15,
	},
	medium: {
	maxBitrate: 400000,
	scaleResolutionDownBy: 2,
	maxFramerate: 30,
	},
	high: {
	maxBitrate: 5 * 1000 * 1000, // 5 mbps
	scaleResolutionDownBy: 1,
	maxFramerate: 60,
	},
	},
	},
	});
	}
	</script>
	</body>
	</html>