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

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

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

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

HTML

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

Processing

Processingは、オープンソースプロジェクトによるCGのためのプログラミング言語です。Javaをベースにしており、グラフィック機能に特化しています。イメージの生成やアニメーションなど、視覚的なフィードバックを簡単に得ることが可能です。

Q&A

解決済

1回答

1990閲覧

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

noutore

総合スコア7

JavaScript

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

HTML

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

Processing

Processingは、オープンソースプロジェクトによるCGのためのプログラミング言語です。Javaをベースにしており、グラフィック機能に特化しています。イメージの生成やアニメーションなど、視覚的なフィードバックを簡単に得ることが可能です。

0グッド

0クリップ

投稿2021/01/18 03:43

編集2021/02/04 03:11

前提・実現したいこと

「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>

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

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

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

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

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

guest

回答1

0

ベストアンサー

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

エラーメッセージは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

Munosuke222

総合スコア158

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

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

noutore

2021/02/04 05:53

Munosuke222さま、有難うございます。 教えていただいた「サンプル」ページを参考にやってみます。 また、インデントとマークダウン件も今後調べてやれるようにいたします。
noutore

2021/02/11 05:48

Munosuke222さま。 内臓カメラから取りんだ映像を、p5jsでブラウザに再生することができました。 有難うございました!
Munosuke222

2021/02/11 07:41

解決したようで何よりです!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問