古風な写真を撮るカメラ

カメラを接続して、撮影すると古いフィルムカメラで撮ったような写真が撮れます。写真は、保存ボタンでローカルに保存できます。

生成AIをもちいた制作

なお、このプログラムはHTML・CSS・JSを生成AIをもちいて制作しました。

今回は、はじめてのカメラデバイスへのアクセスです。特に注意することもなく、簡単にできました。

ちなみに、書いたプロンプトは以下のような感じです。

1回目

Javascriptでローカルのカメラにアクセスし、写真を撮って、画面に表示するアプリを作ってください。詳細仕様は以下によります。
・はじめの画面には、「カメラに接続」「撮影！」「カメラを切り離し」ボタンを横並びかつ中央揃えで設置してください。
・初期状態でカメラには接続しません。
・「カメラに接続」ボタンがクリックされたとき、カメラに接続します。複数カメラが有るときは、カメラを選択できるようにしてください。
・接続できるカメラがないときは、「カメラがありません」と表示して終了してください。
・「カメラを切り離し」ボタンをクリックしたら、カメラを切り離して初期状態に戻してください。
・ボタンの下に、リアルタイムでカメラからの映像を写してください。
・カメラの映像を映すエリアには、エリアを確保したうえで、カメラが接続されていないとき「カメラを接続してください」と表示してください。
・「撮影！」ボタンがクリックされたら、リアルタイム映像の下に、撮影した画像を表示してください。
・撮影した映像を表示するエリアには、エリアを確保したうえで、撮影画像がないとき「撮影ボタンをおしてください」とひょうじしてください。
・撮影した映像を表示するエリアの下に、「保存」ボタンを設置してください。中央揃えとします。
・「保存」ボタンをクリックすると、ダイアログを開いてローカルに写真を保存して下さい。
・撮影した画像には、エフェクトを実行できるプログラムの作りとしてください。

2回目

素晴らしいできあがりだと思います。一部修正すると、さらに良くなるので、以下修正願います。
コードは差分だけでOKです。だたし、先の全体コードのどこを修正するか明示してください。
・リアルタイム映像と、撮影される写真の縦横比を合わせてください。
・エフェクトとして、「古い写真」を追加してください。
・古い写真にするには、以下を追加します。
→カラー写真からセピア写真へ色調の変更
→フィルム写真のザラザラ感を表現するノイズ追加
→周辺光量落ちを再現
→中心部にピントが合って、周辺部になると多少ぼやける
→以上、指示が適正かどうかは判断してください。必要なら追加修正願います。その場合、明示してください。

3回目

以下を修正してください。差分だけでOKです。
どこを修正したらよいか明示してください。

・周辺部のぼかし効果は、以下のコードをベースに実装してください。

～コード省略～

・周辺部のぼかしを、もう少し強くしてください。コードのぼかしを強くする部分を明示してください。。

4回目

提示のコードで、周辺光量落ちが始まる演習の設定値を示しているのはどこですか。明示してください。

5回目

以下を修正してください。差分だけでOKです。
・エフェクトをあとづけするボタンは削除してください。
・「撮影」ボタンをクリックしたと同時に、撮影した画像に「古い写真」エフェクトを施して表示してください。

6回目

captureBtn.addEventListenerにfunction applyVintageEffect()の中身を書き写すのではなく、関数呼び出しで実装してください。

写真を撮るロジックだけ作ってしまって、エフェクトはあとから作ろうと考えて1回目を指示しました。「エフェクト部分をあとから作る」と明示していたら、適当なエフェクトをいくつか作ってくれました。

ほしかったエフェクトは古臭いカメラで撮ったような効果だったので、コードの場所と書き方を参考にしただけで、最終的には削除しました。

4回目はパラメーターをて修正しようとして、聞きました。