8.1 获取媒体库

优质

小牛编辑

130浏览

2023-12-01

如果在Manifest中声明了了"allAutoDetected"权限，则Chrome应用可以无需用户手动指定，自动获取到媒体库的位置。

通过getMediaFileSystems方法可以获取到媒体库对应的fileSystem：

chrome.mediaGalleries.getMediaFileSystems({
    interactive: 'if_needed'
}, function(fileSystemArray){
    //We'll do something with fileSystemArray later
});

得到的是一个包含多个fileSystem对象的数组fileSystemArray。fileSystem对象我们在第7章虽有提及，但却接触不多，更多地是对Entry对象的操作。不过我们可以回忆一下7.1节在介绍fileSystem时提到过其有两个属性，分别是name和root，其中root是此文件系统的根目录DirectoryEntry。所以filesystem.root就是我们熟悉的Entry对象。

虽然通过filesystem.root可以像操作文件系统一样操作媒体库，但是除了文件系统中提供的属性外（如isDirectory和isFile等），对于媒体库我们还希望获得其他的信息——是否是媒体设备（如音乐播放器）、是否是可以移动设备（让我们来决定是否应进行同步操作）、目前设备是否可用等等。

为了得到这些信息，通过文件系统的接口是不够的，为此Chrome提供了获取此类信息的方法，getMediaFileSystemMetadata：

mediaInfo = chrome.mediaGalleries.getMediaFileSystemMetadata(mediaFileSystem);

它的传入参数是fileSystem对象，而不是Entry对象。

也可以通过getAllMediaFileSystemMetadata方法获取到全部的媒体库信息，但是getAllMediaFileSystemMetadata方法与getMediaFileSystemMetadata方法不同的是它使用回调函数的方式传回结果：

chrome.mediaGalleries.getAllMediaFileSystemMetadata(function(mediaInfoArray){
    //do something with mediaInfoArray
});

结果是一个数组，描述每个媒体库信息，这些对象的结构与通过getMediaFileSystemMetadata方法获取到的对象结构相同。

mediaInfo对象包含6个属性，分别是name、galleryId、deviceId、isRemovable、isMediaDevice和isAvailable。其中isRemovable表明此媒体库是否是一个可移动设备，isMediaDevice表明此媒体库是否是一个媒体设备，isAvailable表明此媒体库现在是否可用。

下面我们来一起制作一款媒体库管理应用，并在之后的小节中逐步完善它。

首先创建Manifest文件：

{
    "app": {
        "background": {
            "scripts": ["background.js"]
        }
    },
    "manifest_version": 2,
    "name": "Media Manager",
    "version": "1.0",
    "description": "A media manage tool.",
    "icons": {
        "128": "logo.png"
    },
    "permissions": [
        {"mediaGalleries": ["read", "delete", "copyTo", "allAutoDetected"]}
    ]
}

background.js用来监控应用启动事件，当用户启动应用后创建一个窗口：

chrome.app.runtime.onLaunched.addListener(function() {
    chrome.app.window.create('main.html', {
        id: 'main',
        bounds: {
            width: 800,
            height: 600
        }
    });
});

在main.html用于展示检测到的媒体库：

<html>
<head>
<style>
@font-face {
    font-family: 'iconfont';
    src: url('iconfont.woff') format('woff');
}

* {
    padding: 0;
    margin: 0;
}

body {
    background: #2D2D2D;
}

#appTitle {
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
    font-size: 24px;
    color: #CCC;
    background: #222;
}

#path {
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    color: #888;
    font-size: 16px;
    background: #222;
    border-bottom: black 1px solid;
    box-sizing: border-box;
}

#path span {
    display: block;
    float: left;
}

#path span.name {
    max-width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#path span.pointer {
    padding: 0 10px 0 5px;
}

#container .item {
    display: block;
    height: 100px;
    width: 100px;
    float: left;
    color: white;
}

#container .item .icon {
    display: block;
    text-align: center;
    height: 80px;
    line-height: 80px;
    font-size: 60px;
    font-family: 'iconfont';
}

#container .item .text {
    display: block;
    text-align: center;
    padding: 0 5px;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
}
</style>
</head>
<body>
<div id="appTitle">Media Manager</div>
<div id="path"><span class="name">媒体库</span><span class="pointer">»</span></div>
<div id="container"></div>
<script src="main.js"></script>
</body>
</html>

其中用到了图标字体以显示矢量图标，字体来自http://www.iconfont.cn/。

下面来编写main.js：

function getMedia(){
    chrome.mediaGalleries.getMediaFileSystems({
        interactive: 'if_needed'
    }, listMediaGalleries);
}

function listMediaGalleries(fileSystemArray){
    document.getElementById('container').innerHTML = '';
    for(var i=0; i<fileSystemArray.length; i++){
        var info = chrome.mediaGalleries.getMediaFileSystemMetadata(fileSystemArray[i]);
        var item = document.createElement('span');
        item.className = 'item';
        item.title = info.name;
        document.getElementById('container').appendChild(item);
        var icon = document.createElement('span');
        icon.className = 'icon';
        icon.innerHTML = 'Å';
        item.appendChild(icon);
        var text = document.createElement('span');
        text.className = 'text';
        text.innerHTML = info.name;
        item.appendChild(text);
    }
}

getMedia();

载入到Chrome后可以看到目前运行的截图。

enter image description here
获取媒体库