スマホのカメラをブラウザ上で起動し、画面のフレームレート(fps)を変更することでストロボライトのようなアプリを作成できないか検討しています。
理想とするアプリは、ネイティブアプリですが、以下のものです。
https://apps.apple.com/jp/app/video-tachometer/id1492583587
現在、カメラ映像のフレームレートを変更しているのですが、作成したアプリでカメラ越しに回転体(模様が描かれたコマなど)を見てみても、描かれた模様が止まって見えるような理想とする動きになりません。
https://www.nissin-ele.co.jp/zoetrope/index.php
上記の例では、フラッシュライトの間隔により実際に目で見た時にストロボ効果を得られるようになっていますが、webアプリとして実装したいのと、iOSのLED制御はブラウザ上ではできないので、フレームレートでなんとかできないか検討しています。
そもそもフレームレートを変更するだけでは、理想とするストロボ効果は得られないのでしょうか。
理想のアプリとの違いが何かわからず、こちらに質問させていただきました。
また、現在のコードは以下のようになっています。
javascript
1const medias = {audio : false, 2 video : true 3 // video : { 4 // facingMode : { 5 // exact : "environment" 6 // } 7 // } 8}; 9 10const video = document.getElementById("video"); 11const canvas = document.getElementById("canvas"); 12const ctx = canvas.getContext("2d"); 13const promise = navigator.mediaDevices.getUserMedia(medias); 14 15promise.then(successCallback) 16 .catch(errorCallback); 17 18function successCallback(stream) { 19 video.srcObject = stream; 20 requestAnimationFrame(draw); 21} 22 23function errorCallback(err) { 24 console.log(err); 25 alert(err); 26} 27 28var fps = 10; 29 30function draw() { 31 setTimeout(function() { 32 requestAnimationFrame(draw); 33 canvas.width = window.innerWidth; 34 canvas.height = window.innerHeight; 35 ctx.drawImage(video, 0, 0); 36 }, 1000/fps); 37}
あなたの回答
tips
プレビュー