「PC内臓カメラやWEBカメラから取りんだ映像をブラウザに再生する」プログラムをprocessingで作りたい

前提・実現したいこと

「PC内臓カメラやWEBカメラから取りんだ映像をブラウザに再生する」プログラムをprocessingで作りたい。

processing3.5.4では「実行」で動作確認ができたのですが、HTMLにprocessingコードを記載してブラウザで確認すると「エラーメッセージ」が発生しどうしても解決できません。

何か内容に不備があれば、追記または修正いたしますのでどうぞ宜しくお願い致します。

数日間、検索でいろいろと情報を探しても見つかりませんでした（調べた内容）

実際にブラウザ上にで「PC内臓カメラやWEBカメラから取りんだ映像をブラウザに再生」しているプログラムを見つけることができません。
FLASHでは「PC内臓カメラやWEBカメラから取りんだ映像をブラウザに再生する」ことができたのでが、最近はセキュリティが厳しくなったためブラウザで再生できなくなったのでしょうか？
もし、ご存知の方がいらっしゃれば情報をいただけないでしょうか。
どうぞ宜しくお願い致します。

発生している問題・エラーメッセージ

ブラウザで表示されるエラーメッセージです
Exception: ReferenceError: Capture is not defined

該当のソースコード

<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript"> $(function () { sizing(); $(window).resize(function() { sizing(); }); }); function sizing(){ $("#main").attr({height:$("#wrapper").height()}); $("#main").attr({width:$("#wrapper").width()}); } </script> <script src="processing.js"></script> <script type="application/processing" data-processing-target="pjs" > import processing.video.*; Capture cam; void setup() { size(400, 300); try { String[] cameras = Capture.list(); if (cameras == null || cameras.length == 0) { // ここにnull check追加した。 println("no camera!"); exit(); } else { println("DEVICE resolution"); for (int i = 0; i < cameras.length; i++) { println("" + i + "," + cameras[i]); } cam = new Capture(this, cameras[0]); println("device start"); cam.start(); } } catch (Exception e) { // exception時にstacktraceをログ出力 e.printStackTrace(); } } void draw() { if (cam.available()) { cam.read(); } set(0, 0, cam); // this is faster than image(cam, 0, 0) // image(cam, 0, 0); } </script> </head> <body> <div id="wrapper"><canvas id="pjs">　</canvas></div> </body> </html>

行動規範の内容に同意します

回答1件

ベストアンサー

面白そうだったので調べてみました。

エラーメッセージはCaptureが定義されてへんで、と言う内容なのでそもそもProcessing.jsにCaptureがないんじゃないかと思って、Googleで「processing.js capture」とか[processing.js video]とかで検索するといくつか出てきました

Processing.jsでCaptureを使えるようにしてみた
 Video in Processing JS?

とまあなんだかやっぱりそもそも使えない感じがしています。1つ目のリンク先を見て色々やってみましたが、そもそもprocessing.js内でエラーが発生します。JSは良く分からんので何がダメなのかさっぱりなんですが、JSに自信ニキならどうにかなるかも知れませんね(それでもCaptureが結局動くのかどうか知りませんが)

2つ目のリンク先でp5js使えば？と言ってるので「p5js capture」とかで検索するとサンプルが出ます。まあ確かにカメラが動いている(フィルターなんかもかけれるんですねえ)のでカメラの画像を画面に映すだけならp5jsなら何とかなるんじゃないでしょうか。ただまあprocessingの知見がそのまま使えなさそうなので質問者さん的にはウーンって感じかも知れませんが。

後別件ですがインデントとマークダウン使ってくれるとコードチェックとかがやり易いので回答する側としては助かりますので以後よろしくお願いします。

投稿2021/02/04 05:10