Ionic Framework 中的 Cordova 插件媒体兼容性问题

Cordova Plugin Media in Ionic Framework compatibillity issues

本文关键字:媒体 兼容性 问题 插件 Cordova Framework 中的 Ionic      更新时间:2023-09-26

我在使用Ionic Framework开发的无线电应用程序时遇到问题。

我想在我的应用中播放 HTML 音频流,但某些手机没有这种情况。我已经用Galaxy S6,Galaxy Note 5,Galaxy S6 Edge和Xperia Z4进行了测试,它无法自动启动,在某些情况下,它甚至无法播放。

但是,当我使用Android模拟器进行测试,或使用Geny Motion和其他设备(如Xperia M2,LG G3或阿尔卡特偶像)运行该应用程序时,声音效果很好!

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

我已经测试了 3 种方法:

首先,我已经在应用程序中直接在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 插件媒体:

<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中它是非常严格的。

会不会是挡住了什么?

你应该

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

你犯了一个常见的错误。您需要应用whitelist系统。从 Cordova Tools 5.0.0(2015 年 4 月 21 日)开始需要它。对于Phonegap构建,这意味着自cli-5.1.1以来(2015年6月16日)

如果要从互联网加载音频,则需要实现白名单系统。此白名单工作表应该会有所帮助。如何应用科尔多瓦/电话间隙白名单系统

要修复

将此添加到您的config.xml

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

注意 你的应用现在不安全。由你来保护您的应用。

将以下内容添加到您的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';">

注意 你的应用现在不安全。由你来保护您的应用。