MonacaでSkyWayのJavaScript SDKを実行したい

###前提・実現したいこと
MonacaでSkyWayのJavaScript SDKを使ったチャットアプリの開発を予定しています。
サンプルを作成しているのですが、Android4、iPadで動作しません。

###発生している問題・エラーメッセージ
Android4.2.2, iPad(OSバージョン10.3.2)では、「The current browser dose not support WebRTC」と表示され、
映像の疎通までたどり着きませんでした。

###該当のソースコード
Web上に設置したサンプルをiframeで読み込むことで実現させています。

html
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <script src="components/loader.js"></script>
7    <link rel="stylesheet" href="components/loader.css">
8    <script src="js/feed-reader.js"></script>
9    <link rel="stylesheet" href="css/style.css">
10 
11    <style type="text/css">
12    html,body
13    {
14        width:100%;
15        height:100%;
16        padding:0;
17        margin:0;
18    }
19    iframe
20    {
21        width:100%;
22        height:100%;
23        padding:0;
24        margin:0;
25        border:0;
26    }    
27    </style>
28    <script>
29    $(function()
30    {
31        $('iframe').load(function()
32        {
33            $('iframe').contents().find('a').click(function()
34            {
35                var href = $(this).attr("href");
36                alert(href);  
37            });
38        });
39    });
40    </script>
41    </head>
42    <body>
43    <iframe src="https://boo-yuppyi.ssl-lolipop.jp/test/videochat/" seamless></iframe>
44    </body>
45</html>

###補足情報
動作が確認できた環境は「Android5.1.1」です。
上記サンプルHTMLからiframeで読み込んでいる先のアプリは
SkyWay公式のビデオチャットのサンプルコードを利用しています。

上記について、ご存知の方がいらっしゃいましたら、教えていただけると助かります。
よろしくお願いいたします。

###まとめ（2017/08/08 追記）
Androidは、Cordovaプラグイン「Crosswalk WebView Engine」を追加することで動作確認できました。

iOSは、動作確認できませんでした。
[参考]SkyWayの公式ページの対応ブラウザ

ただ、safari11からWebRTCがサポートされたようなので
今後SkyWay側が対応されると良いと思います。
[参考]Safari 11に新機能追加、プライバシー改善

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

回答1件

ベストアンサー

新規プロジェクトにそのHTMLを入れてビルドしてみました。
iPhone 4s iOS 9.3.5 で同じメッセージが出ました。
Android 4.4.2でも同じメッセージがでました。

iOSのほうは対処しようがありませんが、Androidのほうは少し対処できました。
Cordovaプラグインの管理で「Crosswalk WebView Engine」を追加してください。
Android実機内のWebview（内部ブラウザ）はhtml5への対応力が貧弱ですが、Crosswalkという、一定以上の性能を持つ内部ブラウザをアプリ内に組み込むことになり、動作するようになったようです。
といっても私はSkyWayの動作を知りませんので、ひとまず例のアラートは出なくなって、「Your id」というところに「l1RrzyDV8k9m(以下略)」みたいなIDが表示されたよ、というところまでですが。
アプリのビルドサイズが25MBほど大きくなるというデメリットはありますのでご注意下さい。

ところで、

javascript
1alert(href);

って動いてます？ iframeの中って異世界みたいな感じなので、javascriptでは扱えないと思うんですけどね。
動いてるならいいですが、動いてないようでしたら、

javascript
1$.get('https://boo-yuppyi.ssl-lolipop.jp/test/videochat/', function(res){
2	$(document.body).append(res);
3	$('a').click(function()
4	{
5		var href = $(this).attr("href");
6		alert(href);  
7	});
8});

という感じで、document.bodyの中にぶちまけるようにすればいいと思います。

投稿2017/07/27 09:03

zohnam

総合スコア1441

yuppyi

2017/07/28 03:51

実際にビルドまでして確認いただき、ありがとうございます。教えていただいた内容で確認してみます。

yuppyi

2017/07/30 07:30

1.プラグイン追加で動作改善について Cordovaプラグインの管理で「Crosswalk WebView Engine」を追加したところ Android4.2.2で動作することが確認できました。 2.alert(href);について当方でも動作せず、ご提案頂いた方法も含めて実験しておりますが解決に至っておりません。私の質問の主目的である1について知ることができ、とても助かりました。ありがとうございました。 2については、今後のためにもいろいろ実験してみて分かったら共有させていただきたいと思います。

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