个人中心
gpt4 book ai didi

cordova - 使用Cordova访问托管的PWA Web应用程序的 native 摄像头，音频和文件

转载 作者：行者123 更新时间：2023-12-02 22:45:05 26 4
gpt4 key购买 nike

语境

我正在PWA应用程序中工作。 Webapp已完成。它使用MediaDevices API在浏览器中具有相机，视频和音频记录功能。在台式机和移动设备(如Android)中使用Chrome或Firefox测试此应用程序时，一切正常。

但是，根据to the browse's compatibility tab，很少有浏览器支持此功能。

受此限制，我被分配去开发使用本地电话资源的混合应用程序。

约束条件

  • 构建混合应用程序
  • 指向主机的Web资源(文件不能位于本地)
  • 媒体资源:拍照，录制音频和视频，上传文件
  • 对AngularJS的支持

    • 最佳答案

    科尔多瓦

    作为Web开发人员，使用Cordova是自然的选择。

    我决定记录此过程，因为我花了一个星期才能完成所有工作。

    脚步

    概要

  • 打开不带本地缓存的托管应用程序
  • 在托管应用程序
    • 中访问插件
  • 处理文件；从设备到Webview


    • 1)打开没有本地缓存​​的托管应用

    为了使应用程序指向Web应用程序，可以简单地更改 config.xml: 
    <content src="http://YOUR-DOMAIN/index.html" />

    但是那样，当应用程序加载时，它将所有页面缓存到设备中。如果我们更改了Web应用程序中的某些内容，则仅当我们清除应用程序缓存后，它才会在设备中更改。

    为了解决第一个问题，我们使用了 com.tiltshiftfocus.cordova.plugin.clearCache插件。
  • 1)安装插件:

    • 在bash中: 
    cordova plugin add com.tiltshiftfocus.cordova.plugin.clearCache
  • 2)创建一个简单的script.js:

    • 脚本: 
    var URL = "http://YOUR-DOMAIN/index.html?platform="
    var app = {
        initialize: function() {
            document.addEventListener('deviceready', this.onDeviceReady, false);
        },
        onDeviceReady: function() {
            var targetUrl = URL + cordova.platformId;
            function cb(){
                window.location.replace(targetUrl);
            }
            window.cache.clear(cb, cb);
        }
    };
    app.initialize();

    请注意，我们正在将 platform变量传递到主URL中。我们稍后将在webapp中使用此变量。
  • 3)创建简单的index.html来加载script.js:

    • HTML: 
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: cdvfile: http://YOUR-DOMAIN/ https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
            <meta name="format-detection" content="telephone=no">
            <meta name="msapplication-tap-highlight" content="no">
            <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
            <title>TITLE</title>
        </head>
        <body>
            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript" src="script.js"></script>
        </body>
    </html>
  • 4)更新config.xml以指向index.html:

    • Config.xml: 
    <content src="index.html" />

    2)访问托管应用程序中的插件

    使用托管的Web应用程序的问题在于，我们无法简单地访问应用程序中打包安装的插件。幸运的是，解决方案很简单。

    在安装完所有要使用的插件之后，在您的Cordova项目中，导航到platform文件夹，然后将所有内容复制到您的webapp项目中。

    Android

    复制内容 
    Cordova_Project_Folder/platforms/android/platform_www

    到webapp项目内的 public目录 
    Webapp_Project_Folder/public_www/android/

    Web应用程序

    复制插件文件夹后，您需要引用 cordova.js。

    Webapp Index.html: 
    <script scr="/android/cordova.js"></script>

    注意，我们需要为正确的平台引用正确的文件夹。然后，在此步骤中，我们使用先前提供给托管Webapp的 platform变量。我不会详细介绍这个过程。

    3)处理文件；从设备到网络 View

    到目前为止，我们已使托管的Webapp和所需的插件正常工作。现在我们需要处理存储在设备中的文件。

    为了使此过程正常进行，我们最终使用了以下步骤:
  • 获取文件的完整URL。
  • 将完整URL转换为cdvfile://。
  • 在Web应用程序中使用cdvfile://。
  • 将任何URL转换为Blob。

    • 1)获取文件的完整URL。

    几乎所有可用于创建或读取文件(相机，音频等)的插件都将返回完整的URL。

    2.将完整的URL转换为cdvfile://。

    相机插件 cordova-plugin-media-capture返回一个 MediaFile对象，该对象已经包含 cdvfile://路径: fullPath属性。

    但在某些情况下，您必须转换完整路径，例如 file:///Pictures/image.jpg到 cdvfile://localhost/image.jpg。
    您可以使用 resolveLocalFileSystemURL中的 cordova-plugin-file方法实现此目的。

    脚本: 
    function getCDVFromFullURL(fullURL, callback){
        window.resolveLocalFileSystemURL(fullURL, gotFile, callback);
        function gotFile(fileEntry) {
            callback(null, fileEntry.toInternalURL());
        }
    };
    getCDVFromFullURL('file:///Picture/image.jpg', function(err, cdvUrl){
        cdvUrl === 'cdvfile://localhost/image.jpg'; // example!!!
    });

    3.在Web应用程序中使用cdvfile://。

    问题之一是webapp标记中的引用文件。以下代码段无效。 
    <img src="cdvfile://path/image.jpg" />

    为了工作，我们需要使用以下命令更新 config.xml: 
    <access origin="cdvfile://*" />

    注意:如果您使用的是AngularJS，则必须将 cdvfile://协议(protocol)列入白名单: 
    .config(['$compileProvider', function( $compileProvider ){ 
        $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|file|blob|cdvfile):|data:image\//);
    }]);

    4.将任何URL转换为Blob。

    这项工作的整个目标是将资源发送到服务器。我们需要一个 Blob对象来追加 FormData。我们仍然可以使用 resolveLocalFileSystemURL。 
    function getBlob(anyUrl, callback){
        window.resolveLocalFileSystemURL(anyUrl, gotFile, callback);
        function gotFile(fileEntry) {
            fileEntry.file(readFile);
        }
        function readFile(file){
            var reader = new FileReader();
            reader.onloadend = function(e) {
                callback(null, new Blob([ this.result ], { type: file.type } ));
            };
            reader.readAsArrayBuffer(file);
        }
    }

    getBlob('file:///Picture/image.jpg', function(err, blob){
        // formData.append('imagem', blob, 'iamge name');
    }

    包起来

    现在我们有:
  • 从设备
    • 访问任何媒体
  • 能够在我们托管的Webapp中显示任何本地媒体
  • 工具来转换此本地媒体，然后通过webapp进行上传

    • 希望这篇文章可以节省时间。

    关于cordova - 使用Cordova访问托管的PWA Web应用程序的 native 摄像头，音频和文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46475447/

    26 4 0
    文章推荐： ruby-on-rails - 用 Searchkick on Rails 做一个专业术语 "more like this query"？
    文章推荐： elasticsearch - 在 Elasticsearch 中根据字符串值排序
    文章推荐： elasticsearch - 如何更改用于Elasticsearch的数据存储路径
    文章推荐： python-3.x - 将频谱图存储为Python中的图像
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com