getUserMediaで端末のカメラを起動してフレームレートを変更したい。

現在、以下のプログラムを作成して、ブラウザでカメラを起動しています。
getUserMediaのframeRateにより、カメラのフレームレートを指定しているのですが、「240」に設定してもどうもそのフレームレートになっているようには見受けられませんでした（正確に計測したわけではありませんが、iPhoneのスローカメラ撮影時のフレームレート(240fps)と比較すると違うように感じられました。）

10などの低い値に設定すると、画面のフレームレートが変化していることが観測されるのですが、一定値以上は上がりきらないように見受けられます。

こちらの設定は、最大でどの程度の値まで設定が可能なのでしょうか。
もしくは、フレームレートが上がっているように感じられないのは、端末の通信速度が原因となっている可能性もあるのでしょうか。

もしご存知の方がいらっしゃいましたら教えていただきたいです。
よろしくお願いいたします。

javascript
1const medias = {
2  audio : false,
3  video : {
4    // facingMode : "user", //フロントカメラ
5    facingMode : {exact:"environment"}, //リアカメラ
6    frameRate : {ideal:240,max:240}
7  }
8};
9
10const overlay = document.getElementById("overlay");
11const video = document.getElementById("video");
12const canvas = document.getElementById("canvas");
13const ctx = canvas.getContext("2d");
14const promise = navigator.mediaDevices.getUserMedia(medias);
15
16promise.then(successCallback)
17       .catch(errorCallback);
18
19function successCallback(stream) {
20  video.srcObject = stream;
21  requestAnimationFrame(draw);
22}
23
24function errorCallback(err) {
25  console.log(err);
26  alert(err);
27}
28
29var speed = 100;
30var flg = true;
31
32function draw() {
33    requestAnimationFrame(draw);
34    canvas.width  = window.innerWidth;
35    canvas.height = window.innerHeight;
36    ctx.drawImage(video, 0, 0);
37}

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8" />
5  <title>Canvas</title>
6  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
7  <link rel="stylesheet" href="index.css" />
8  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
9</head>
10<body>
11  <canvas id="canvas"></canvas>
12  <!-- <div id="overlay"></div> -->
13  <div id="videobox">
14    <video id="video" autoplay playsinline></video>
15  </div>
16  <script src="index.js"></script>
17</body>
18</html>

css
1body {
2  margin: 0;
3  background: #000;
4}
5
6#overlay {
7  position:fixed;
8    top:0;
9    left:0;
10    width:100%;
11    height:100%;
12    background-color:rgba(0,0,0,0.5);
13
14    display: flex;
15    align-items: center;
16    justify-content: center;
17}
18
19#videobox {
20  position: absolute;
21  top: 10px; left: 10px;
22  transform-origin: left top;
23  transform: scale(.1);
24}
25
26#video {
27  display: block;
28}
29
30#canvas {
31  display: block;
32  position: absolute;
33  top: 0; left: 0;
34  width: 100%; height: 100%;
35}