首页 文章

Cordova Plugin Media在Ionic Framework兼容性问题上的应用

提问于
浏览
2

我正在使用Ionic Framework开发的无线电应用程序遇到麻烦 .

我想在我的应用程序中播放HTML音频流,但某些手机并不存在 . 我已经使用Galaxy S6,Galaxy Note 5,Galaxy S6 Edge和Xperia Z4进行了测试,并且它无法自动启动,在某些情况下甚至无法播放 .

但是,当我使用Android模拟器测试,或者使用Geny Motion和其他设备(如Xperia M2,LG G3或Alcatel Idol)运行应用程序时,声音效果很好!

此外,该应用程序在iOS中运行良好 .

我测试了3种方法:

首先,我在app中直接在index.html中测试了这个JS代码:

<script>
audioElement.setAttribute('src', 'http://69.175.58.196:80/stream');
audioElement.setAttribute('id', 'audio');
audioElement.setAttribute('preload', 'auto');
audioElement.setAttribute('autoplay', 'true');
audioElement.setAttribute('volume','1');

audioElement.oncanplay=function(){
console.log("Ready to play");
audioElement.play();
}
</script>

如果我调用audioElement.play();从另一个按钮,但从控制台中的“准备播放”登录到实际播放需要15秒,否则它将无法启动 . 这有点随意 . 如果我按下一个调用audioElement.play()的播放按钮,它会在oncanplay触发后完美地工作 .

当我使用Chrome(chrome:// inspect)检查应用程序时,我没有收到任何错误,只是它不会自动播放,或播放15秒延迟 .

其次,我测试了其他JS代码:

<script> 
var media = new Audio("http://69.175.58.196:80/stream");
    media.play();
    media.oncanplay = function(){
      setTimeout(function(){
        $("#coso").html("Playing!")
        media.play();
      }, 3000);

    }
</script>

与以前相同的结果 . 没有错误,但没有自动播放,或延迟,或无法播放 . 使用Chrome检查应用时没有收到错误 .

最后,我测试了Cordova Plugin Media,如下所示:

<scrip>
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        console.log(Media);


      function playAudio() {
          // Create Media object from src
          my_media = new Media('http://69.175.58.196:80/stream', Success(), onError);
          // Play audio
          my_media.play();
      }
      // onSuccess Callback
      function Success() {
          setTimeout(function(){
            $('#coso').html("Playing!");  
          }, 2000); 
      }

      // onError Callback
      function onError(error) {
          alert('code: ' + error.code + '\n' +
              'message: ' + error.message + '\n');
      }

      playAudio();
}


</script>

同样的结果,没有自动播放,延迟播放,也不能让它从另一个JS事件中播放,而且,当我在电话中测试它没有自动播放时,它不记录错误,但是它可以记录它加载和播放源代码,使用Chrome检查时没有错误 .

这让我有点疯狂 . 我错过了什么吗?

这是离子信息的输出:

您的系统信息:

Cordova CLI: 5.4.0
Gulp version:  CLI version 3.9.0
Gulp local:  
Ionic CLI Version: 1.7.13
Ionic App Lib Version: 0.6.5
ios-deploy version: 1.8.2 
ios-sim version: 5.0.3 
OS: Mac OS X El Capitan
Node Version: v4.2.1
Xcode version: Xcode 7.2 Build version 7C68

提前致谢 .

编辑:

我现在测试的一件事是,在检查控制台中创建一个音频元素,当应用程序运行时,如下所示:

var audio = new Audio(69.175.58.196/stream);

我收到这个错误:

net::ERR_ADDRESS_UNREACHABLE –

我发现SEAndroid正在所有这些设备中执行 . 我从来没有在Android中处理它,但我知道在linux中它是非常严格的 .

可以阻止某些东西吗?

1 回答

  • 2

    @Gonzalo,
    你应该使用插件,因为这将给你最好的机会 . 您的问题是您正在播放来自互联网的音频样本 .

    你犯了一个常见的错误 . 您需要应用 whitelist 系统 . 自Cordova Tools 5.0.0(2015年4月21日)起需要 . 对于Phonegap Build,这意味着自cli-5.1.1(2015年6月16日)

    如果要从Internet加载音频,则需要实施白名单系统 . 这个白名单工作表应该有所帮助 . HOW TO apply the Cordova/Phonegap the whitelist system

    TO FIX

    将此添加到您的 config.xml

    <plugin name="cordova-plugin-whitelist"      source="npm" spec="1.1.0" />
    <allow-navigation href="*" />
    <allow-intent href="*" />
    <access origin="*" /> <!-- Required for iOS9 -->
    

    NOTE YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.

    将以下内容添加到 index.html

    <meta http-equiv="Content-Security-Policy" 
             content="default-src *; 
                      style-src * 'self' 'unsafe-inline' 'unsafe-eval'; 
                      script-src * 'self' 'unsafe-inline' 'unsafe-eval';">
    

    NOTE YOUR APP IS NOW INSECURE. IT IS UP TO YOU TO SECURE YOUR APP.

相关问题