＜リズム認証＞
1.新規のプロジェクトを作成し（・jQuery ・Onsen UI ）2つのコンポーネントと、（・Camera・Capture）２つのCordovaプラグインを有効化する。
2.index.htmlのbodyタグ内に下記のようにons-navigatorタグを追加する。(リスト１)
<body>
<ons-navigator page="top.html" id="navi"></ons-navigator>
</body>
<ons-navigator page="top.html" id="navi"></ons-navigator>
</body>
リスト1：ons-navigatorタグ
3.wwwフォルダ内にtop.htmlを作成し下記の内容を追加する。（リスト２）
<ons-page id="top-page">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">リズム認証</div>
</ons-toolbar>
<div class="pagebody">
<ons-button class="yes-btn" onclick="reset_canvas();">
スタート
</ons-button>
<canvas id="canvas" style="background-color:yellow; display:none;">
</canvas>
<div id="result"></div>
</div>
</ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">リズム認証</div>
</ons-toolbar>
<div class="pagebody">
<ons-button class="yes-btn" onclick="reset_canvas();">
スタート
</ons-button>
<canvas id="canvas" style="background-color:yellow; display:none;">
</canvas>
<div id="result"></div>
</div>
</ons-page>
リスト2：top.html
以上の作業でスタートボタンが表示されるようになった。
リズム認証というものはやったことがないので次回以降のゼミで作成し早く認証精度を確かめてみたいと思う。
【TIPS】
動画を撮影して画面に表示するプログラムで、Androidに限って次のエラーメッセージが表示された。
Getting the following error when running the Basic Video Chat on android:
Refused to load the image 'android-webview-video-poster:default_video_poster/6528159162652968060' because it violates the following Content Security Policy directive: "img-src 'self' data: content:".
これは、動画撮影画面を出した瞬間に出る。
いろいろ調べてみると、これは「コンテンツ セキュリティ ポリシー」というものの制限だと分かった。
この問題の解決策としてモナカプレスの「Monacaアプリで動画を再生する色々な方法」にはコンテンツ セキュリティ ポリシー（Content-Security-Policy）
外部からデータを取得して利用する仕組みを使っている時に、悪意を持ったユーザによってXSSを引き起こされる可能性があります。例えばJavaScriptを実行されたり、CSSでデザインを変えられてしまうかも知れません。
そうした問題を防ぐのに使えるのがコンテンツ セキュリティ ポリシー（CSP）です。
Content-Security-Policyに media-src * cdvfile:; と img-src * android-webview-video-poster:; が必要です。
という記述があった。
よって、index.htmlの6行目あたりにあるメタタグ（<meta ...>～</meta>）を以下のように書き換えればよい。
<meta http-equiv="Content-Security-Policy"
content="default-src * data: gap: https://ssl.gstatic.com;
style-src * 'unsafe-inline';
img-src * android-webview-video-poster:;
script-src * 'unsafe-inline' 'unsafe-eval'">
リスト1．index.htmlのmetaタグ
リスト1の下から2行目で、img-src（これが動画ファイルの指定）に「android-webview-video-poster」を許可するように指定している。どうやらこれはAndroidで動画を撮影したときに、動画が格納される場所（モノ？）らしい。
0 件のコメント:
コメントを投稿