【質問】 iPad/iPhoneのカメラのプレビュー画面にcanvasで合成…

nao hirokawa

unread,

Oct 9, 2013, 9:25:49 PM10/9/13

to html5-dev...@googlegroups.com

はじめまして。廣川と申します。

ずっとWebデザインをいたのですが、Webアプリ制作に興味があって勉強中です。

こんなことできたらいいなと思って試行錯誤してますが…表題のとおり

iPadやiPhoneでカメラを起動して、その画面にcanvasで画像を合成することは可能でしょうか？

イメージとしては、

Webアプリで「プリクラ」を実現するようなものです。

被写体の上に自分で描いたキャラを合成したいのです。

ネイティブアプリにせずにできれば、Webアプリとして提供したいなと思ってます。

イメージに近いのはこういうアプリ↓↓です。

https://itunes.apple.com/jp/app/jamakamu!-jiang-toujamadakamera/id694485735?mt=8

撮影してみないと、どのキャラが写りこむかわからないので、

カメラを起動したら、その画面にそのまま合成できばと思ってます。

是非皆様のご意見をお待ちしております。

Jun Ichikawa

unread,

Oct 9, 2013, 11:36:32 PM10/9/13

to html5-dev...@googlegroups.com

こんにちは、市川です。

iOSの場合はカメラの起動後はOSの機能なので、canvasをオーバーレイするのは無理じゃないかと思います。

逆に、カメラで撮影した後に、画像を加工するのであればできそうな気がします。

以前、HTMLからカメラを触る件についてブログを書いたので、参考にしてみてください。

http://d.hatena.ne.jp/sparkgene/20121219/1355870236

2013年10月10日 10:25 nao hirokawa <hirok...@gmail.com>:

--
このメールは Google グループのグループ「html5j」の登録者に送られています。
このグループから退会し、メールの受信を停止するには、html5-developer...@googlegroups.com にメールを送信します。
このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
http://groups.google.com/group/html5-developers-jp からこのグループにアクセスしてください。
その他のオプションについては、https://groups.google.com/groups/opt_out にアクセスしてください。

Tsuyoshi Seino

unread,

Oct 10, 2013, 12:52:47 AM10/10/13

to html5-dev...@googlegroups.com

はじめまして、清野ともうします。

恐らく廣川さんのイメージされているのは技術的には「AR合成」になるのではないでしょうか。
となるとWebアプリでiOSのカメラを動かすのはちょっとむずかしいです。
Unity等のHTML5/JavaScriptのプラットフォームを使ってネイティブアプリを作成するのが近道かと思います。

「モバイルARアプリ開発“超”入門」
http://www.atmarkit.co.jp/fsmart/index/armobile.html

Android4.0以上であればブラウザからカメラを起動することは可能かと思いますが(Capture API)、カメラ画面にリアルタイム合成するのはやっぱりむずかしいです。

市川さんのおっしゃるようにPhoneGap等のライブラリを使用すれば撮影→画像化→加工合成までがWebで出来るかと思います。

2013/10/10 Jun Ichikawa <jun...@gmail.com>

Tsuyoshi Seino

unread,

Oct 10, 2013, 1:03:29 AM10/10/13

to html5-dev...@googlegroups.com

あ、、、これはリアルタイム合成ではないのですが

例えばカメラ起動後の画面にフレームとして画像をレイヤーさせ、撮影後に全く同じ位置に同じ画像を加工合成すれば

できますね。ごまかしっぽいですがww

つまり

檻のイラストを表示しながらカメラ撮影をしたい。

http://blog.8bit.co.jp/?p=8697

こういうことですね。がっつりネイティブになってしまいましたがコピペで出来ると書いてあるのは本当だと思いますので

一度こういうので作ってみてはどうでしょうか。

2013/10/10 Tsuyoshi Seino <chao...@gmail.com>

Sangwhan Moon

unread,

Oct 9, 2013, 11:48:02 PM10/9/13

to html5-dev...@googlegroups.com

そのままでは不可能です。ただし理論的にはUIWebViewの上にWebRTC拡張機能が追加されたシェルを開発すれば可能じゃないかなと思いますが。

https://labs.ericsson.com/apps/bowser

UIWebViewを拡張すること自体が非常に敏感なので、iosのバージョンアップ時に問題がある可能性が高いです。（Bowserの場合も、最新のiosに動作不可）

--
Sangwhan Moon
@sangwhanmoon

On Thursday, October 10, 2013 at 12:36 PM, Jun Ichikawa wrote:

> こんにちは、市川です。
>
> iOSの場合はカメラの起動後はOSの機能なので、canvasをオーバーレイするのは無理じゃないかと思います。
>
> 逆に、カメラで撮影した後に、画像を加工するのであればできそうな気がします。
>
> 以前、HTMLからカメラを触る件についてブログを書いたので、参考にしてみてください。
> http://d.hatena.ne.jp/sparkgene/20121219/1355870236
>
>
>
>

> 2013年10月10日 10:25 nao hirokawa <hirok...@gmail.com (mailto:hirok...@gmail.com)>:

> >
> > はじめまして。廣川と申します。
> > ずっとWebデザインをいたのですが、Webアプリ制作に興味があって勉強中です。
> >
> > こんなことできたらいいなと思って試行錯誤してますが…表題のとおり
> >
> > iPadやiPhoneでカメラを起動して、その画面にcanvasで画像を合成することは可能でしょうか？
> > イメージとしては、
> >
> > Webアプリで「プリクラ」を実現するようなものです。
> > 被写体の上に自分で描いたキャラを合成したいのです。
> >
> > ネイティブアプリにせずにできれば、Webアプリとして提供したいなと思ってます。
> > イメージに近いのはこういうアプリ↓↓です。
> >
> > https://itunes.apple.com/jp/app/jamakamu!-jiang-toujamadakamera/id694485735?mt=8
> >
> >
> > 撮影してみないと、どのキャラが写りこむかわからないので、
> > カメラを起動したら、その画面にそのまま合成できばと思ってます。
> >
> >
> > 是非皆様のご意見をお待ちしております。
> >
> > --
> > このメールは Google グループのグループ「html5j」の登録者に送られています。

> > このグループから退会し、メールの受信を停止するには、html5-developer...@googlegroups.com (mailto:html5-developers-jp%2Bunsu...@googlegroups.com) にメールを送信します。
> > このグループに投稿するには、html5-dev...@googlegroups.com (mailto:html5-dev...@googlegroups.com) にメールを送信してください。

> > http://groups.google.com/group/html5-developers-jp からこのグループにアクセスしてください。
> > その他のオプションについては、https://groups.google.com/groups/opt_out にアクセスしてください。
>
>

> --
> このメールは Google グループのグループ「html5j」の登録者に送られています。

> このグループから退会し、メールの受信を停止するには、html5-developer...@googlegroups.com (mailto:html5-developer...@googlegroups.com) にメールを送信します。
> このグループに投稿するには、html5-dev...@googlegroups.com (mailto:html5-dev...@googlegroups.com) にメールを送信してください。

nao hirokawa

unread,

Oct 11, 2013, 3:37:22 AM10/11/13

to html5-dev...@googlegroups.com

こんにちは廣川です。

やはり起動してしまったらOSの機能ですよね。

なんとか無理やりcanvasを重ねられないかと思っているのですが、

難しいですよね。

ブログありがとうございます。

iOS7でも問題なくエフェクトかけられました。

2013年10月10日木曜日 12時36分32秒 UTC+9 いち:

こんにちは、市川です。

iOSの場合はカメラの起動後はOSの機能なので、canvasをオーバーレイするのは無理じゃないかと思います。

逆に、カメラで撮影した後に、画像を加工するのであればできそうな気がします。

以前、HTMLからカメラを触る件についてブログを書いたので、参考にしてみてください。

http://d.hatena.ne.jp/sparkgene/20121219/1355870236

2013年10月10日 10:25 nao hirokawa <hirok...@gmail.com>:

はじめまして。廣川と申します。
ずっとWebデザインをいたのですが、Webアプリ制作に興味があって勉強中です。

こんなことできたらいいなと思って試行錯誤してますが…表題のとおり

iPadやiPhoneでカメラを起動して、その画面にcanvasで画像を合成することは可能でしょうか？

イメージとしては、

Webアプリで「プリクラ」を実現するようなものです。
被写体の上に自分で描いたキャラを合成したいのです。

ネイティブアプリにせずにできれば、Webアプリとして提供したいなと思ってます。
イメージに近いのはこういうアプリ↓↓です。

https://itunes.apple.com/jp/app/jamakamu!-jiang-toujamadakamera/id694485735?mt=8

撮影してみないと、どのキャラが写りこむかわからないので、
カメラを起動したら、その画面にそのまま合成できばと思ってます。

是非皆様のご意見をお待ちしております。

--
このメールは Google グループのグループ「html5j」の登録者に送られています。

このグループから退会し、メールの受信を停止するには、html5-developers-jp+unsubscribe@googlegroups.com にメールを送信します。
このグループに投稿するには、html5-develo...@googlegroups.com にメールを送信してください。

nao hirokawa

unread,

Oct 11, 2013, 6:45:03 AM10/11/13

to html5-dev...@googlegroups.com

はじめまして廣川と申します。

まさにAR合成です。当初は撮影されたものに合成をしようと思っていたのですが、

エガちゃんや檻などが合成されたら、それはそれで楽しいけど、

リアルタイムにセカイカメラみたいなものを、ブラウザから簡単に出来れば楽しいなと思ってます。

現段階ではネイティブアプリを作った方が簡単ですよね。

リンクありがとうございます。

2013年10月10日木曜日 14時03分29秒 UTC+9 T.Seino:

2013/10/10 Tsuyoshi Seino <chao...@gmail.com>

>> このグループから退会し、メールの受信を停止するには、html5-developers-jp+unsubscribe@googlegroups.com にメールを送信します。
>> このグループに投稿するには、html5-develo...@googlegroups.com にメールを送信してください。

>> http://groups.google.com/group/html5-developers-jp からこのグループにアクセスしてください。
>> その他のオプションについては、https://groups.google.com/groups/opt_out にアクセスしてください。
>
>
> --
> このメールは Google グループのグループ「html5j」の登録者に送られています。

> このグループから退会し、メールの受信を停止するには、html5-developers-jp+unsubscribe@googlegroups.com にメールを送信します。
> このグループに投稿するには、html5-develo...@googlegroups.com にメールを送信してください。

Suzuki R

unread,

Oct 11, 2013, 9:11:17 AM10/11/13

to html5-dev...@googlegroups.com

こんばんわ。鈴木です。

iOS端末を所持していないのでろくに状況知らないのですが、AndroidのChromeなら一応WebRTC使ってARできますね。

私の実装がおかしいのかもしれませんが、カメラからの入力が動画ではなく静止画になってしまうのでそこがちょっと残念。

こんな感じになります。

<http://html5lab.digi2.jp/ar/index.html>

みなさんおっしゃっているように、現状ではネイティブアプリにしてしまう方が確実でよいと思います。

iOSならコンパスの値もJavaScriptで取得できたはずなので、WebRTCへの対応をやってくれたらかなり遊べる幅が

広がりそうですね。

2013年10月11日金曜日 19時45分03秒 UTC+9 nao hirokawa:

2013/10/10 Tsuyoshi Seino <chao...@gmail.com>

>> iPadやiPhoneでカメラを起動して、その画面にcanvasで画像を合成することは可能でしょうか?

nao hirokawa

unread,

Oct 15, 2013, 5:39:50 PM10/15/13

to html5-dev...@googlegroups.com, sang...@iki.fi

WebRTC拡張機能ですね。

先端技術に全然ついていけていないですが、面白そうですね！

http://html5experts.jp/yusuke-naka/1130/

2013年10月10日木曜日 12時48分02秒 UTC+9 Sangwhan Moon:

> > このグループから退会し、メールの受信を停止するには、html5-developers-jp+unsubscribe@googlegroups.com (mailto:html5-developers-jp%2Bunsu...@googlegroups.com) にメールを送信します。
> > このグループに投稿するには、html5-develo...@googlegroups.com (mailto:html5-dev...@googlegroups.com) にメールを送信してください。

> > http://groups.google.com/group/html5-developers-jp からこのグループにアクセスしてください。
> > その他のオプションについては、https://groups.google.com/groups/opt_out にアクセスしてください。
>
>
> --
> このメールは Google グループのグループ「html5j」の登録者に送られています。

> このグループから退会し、メールの受信を停止するには、html5-developers-jp+unsubscribe@googlegroups.com (mailto:html5-developers-jp+unsub...@googlegroups.com) にメールを送信します。
> このグループに投稿するには、html5-develo...@googlegroups.com (mailto:html5-dev...@googlegroups.com) にメールを送信してください。

nao hirokawa

unread,

Oct 15, 2013, 6:03:13 PM10/15/13

to html5-dev...@googlegroups.com

おはようございます。廣川です。

いいARですねｗ

iOSのSafariがWebRTCをサポートするようになると、
チャットとかカメラとかブラウザがあれば、
出来てしまうんですね。

2013年10月11日金曜日 22時11分17秒 UTC+9 Suzuki R:

Reply all

Reply to author

Forward