OPFS 媒体缩略图生成与索引协作
`title: OPFS 媒体缩略图生成与索引协作``categories: Web 开发/前端/数据管理``keywords: OPFS,缩略图,索引,媒体,WebCodecs``description: 结合 WebCodecs 生成媒体缩略图并持久化到 OPFS，使用 IndexedDB 写入
媒体
API版本治理与媒体类型协商最佳实践
通过媒体类型与Accept头进行版本协商，统一默认与最大版本策略，按路由映射返回对应版本的响应，并在不支持时返回406，附解析与选择示例。
RTCRtpTransceiver：方向控制与媒体协商
使用 RTCRtpTransceiver 控制媒体方向（sendrecv/recvonly/sendonly），进行轨道替换与协商，提升会话灵活性与稳定性。
RTCPeerConnection getStats：网络与媒体统计分析
使用 `RTCPeerConnection.getStats` 采集媒体与网络统计，分析丢包、码率与 RTT，指导自适应策略与故障排查。
"MediaStreamTrackProcessor/Generator：媒体帧处理与合成管线"
"介绍基于 `MediaStreamTrack` 的帧处理与生成接口，构建自定义视频/音频处理管线，与 WebCodecs/WebRTC 协作，实现滤镜、叠加与合成。"
"MediaElementSource 节点：媒体元素接入音频图"
"介绍将 `/` 元素通过 `MediaElementAudioSourceNode` 接入 Web Audio 图，进行分析与效果处理，提供示例与注意事项。"
"matchMedia 与媒体查询事件：动态主题与布局协作"
"介绍 `window.matchMedia` 的查询与事件监听，结合 `prefers-color-scheme`/`prefers-reduced-motion` 等动态偏好，实时更新主题与动效策略，提供示例与可访问性建议。"
HTTP Range Requests 断点下载与媒体拖拽播放：Range/Content-Range 与性能验证
使用 HTTP Range Requests 实现断点下载与媒体拖拽播放，覆盖 Range/Content-Range 头部、分段获取与性能验证，提升下载与播放体验
CSS object-fit 与 object-position：媒体裁剪与定位
使用 `object-fit` 与 `object-position` 控制图片与视频在容器中的裁剪与定位，改善响应式布局与视觉对齐。
"CSS object-fit 与 object-position：媒体裁剪与填充策略"
"介绍 `object-fit/object-position` 在图片与视频上的应用，选择合适的裁剪/填充策略并精确对齐兴趣区域，提升画面与版式的一致性与可用性。"
