質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

1027閲覧

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

m-mega

総合スコア56

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/06/14 04:47

現在、以下のプログラムを作成して、ブラウザでカメラを起動しています。
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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問