1、showSaveFilePicker
showSaveFilePicker
是 WebAPI 中的一个方法,可用于显示本地文件保存框,让用户保存一个文件。该方法可以在不需要服务器干预的情况下,向本地系统写入文件,同时保留浏览器的独立性。
async function writeFile() {
const options = {
suggestedName: 'myFile.txt',
types: [{
description: 'Text Files',
accept: {'text/plain': ['.txt']},
}],
};
const fileHandle = await window.showSaveFilePicker(options);
const writable = await fileHandle.createWritable();
await writable.write('Hello, world!');
await writable.close();
console.log('File written successfully!');
}
在上述示例中,调用 showSaveFilePicker
弹出本地文件保存框,并显示默认的文件名 myFile.txt
。定义 types
数组,其中包含一种类型描述,使用文本类型描述并确定使用"txt"作为后缀名。 方法返回一个 promise,该promise可以暂停代码执行,直到用户选择文件并执行操作。
最后,使用createWritable
方法创建一个可写文件,并将" Hello,world!'写入该文件,最后关闭文件写入器并在控制台输出"File written successfully!"。
注意:该API需要在安全上下文中调用,例如HTTPS站点或 localhost上的站点。在非安全上下文中调用此方法会抛出
SecurityError
错误。
此外,showSaveFilePicker
方法也支持多种文件类型,以及在保存时附加元数据等更高级的用法,具体使用请参考 MDN 文档。
2、MeidaStreamTrackProcessor
MediaStreamTrackProcessor
是 WebRTC API 中的一个接口,可用于对媒体流轨道数据进行处理。该接口可以在媒体轨道的数据传输过程中拦截数据流,进行操作,然后将修改后的媒体轨道数据传递给下一个事件。MediaStreamTrackProcessor 接口是 MediaStreamTrack API 的一个扩展,使用 MediaStreamTrackProcessor,可以轻松地对音视频流数据进行修改、过滤、处理等操作。
使用 MediaStreamTrackProcessor
从 MediaStreamTrack 持续获取 VideoFrame