日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當(dāng)前位置:首頁 > 科技  > 軟件

基于WebCodecs的網(wǎng)頁端高性能視頻截幀

來源: 責(zé)編: 時間:2024-02-01 12:51:25 205觀看
導(dǎo)讀業(yè)務(wù)介紹web投稿頁是B站的主要投稿來源,有很多高粉UP主使用web端進(jìn)行投稿。封面部分是投稿過程中耗時占比較高的步驟,因此在過去,web投稿頁已上線了自動的封面截取&推薦功能,有效提升了用戶體驗。同時在此過程中有了一定

業(yè)務(wù)介紹

web投稿頁是B站的主要投稿來源,有很多高粉UP主使用web端進(jìn)行投稿。nrO28資訊網(wǎng)——每日最新資訊28at.com

封面部分是投稿過程中耗時占比較高的步驟,因此在過去,web投稿頁已上線了自動的封面截取&推薦功能,有效提升了用戶體驗。同時在此過程中有了一定的技術(shù)積累。nrO28資訊網(wǎng)——每日最新資訊28at.com

自動封面功能依賴于對用戶上傳視頻進(jìn)行截幀的能力,最簡單的方式是在上傳完成之后由服務(wù)端進(jìn)行視頻截幀并返回推薦的候選封面,但顯然這一步會有大量的等待時間,因此我們采用的是純前端視頻截幀能力。nrO28資訊網(wǎng)——每日最新資訊28at.com

實際上在web投稿頁有多處需要截幀的地方:nrO28資訊網(wǎng)——每日最新資訊28at.com

  • 封面推薦:截取多張低清圖在前端進(jìn)行AI打分,基于打分結(jié)果截取最多10張高清圖供UP主選擇
  • 封面選幀:對默認(rèn)推薦的幀不滿意,手動獲取準(zhǔn)確時間點的幀畫面
  • 分區(qū)&話題推薦:從視頻中截取多幀,打包上傳至后臺進(jìn)行分析后返回推薦結(jié)果

nrO28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片nrO28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

過去方案

nrO28資訊網(wǎng)——每日最新資訊28at.com

過去web投稿頁采取兩套視頻截幀方案,wasm優(yōu)先,canvas兜底nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com


nrO28資訊網(wǎng)——每日最新資訊28at.com

Video + CanvasnrO28資訊網(wǎng)——每日最新資訊28at.com

WebAssembly + FFmpegnrO28資訊網(wǎng)——每日最新資訊28at.com

流程nrO28資訊網(wǎng)——每日最新資訊28at.com

  • Video標(biāo)簽 --> 設(shè)置video時間
  • canvas context 2d, drawImage()直接成圖

FFmpeg API調(diào)用+數(shù)據(jù)傳遞為主nrO28資訊網(wǎng)——每日最新資訊28at.com

  • 視頻文件解封裝
  • 逐個讀取關(guān)鍵幀圖像數(shù)據(jù)
  • 數(shù)據(jù)層層傳遞
  • web端進(jìn)行圖像渲染(webgl / canvas)

優(yōu)點nrO28資訊網(wǎng)——每日最新資訊28at.com

  • 開發(fā)簡單:利用瀏覽器內(nèi)部的視頻播放器能力
  • 視頻支持性好:幾乎支持所有市面上可見的視頻格式(行業(yè)標(biāo)桿)

缺點nrO28資訊網(wǎng)——每日最新資訊28at.com

  • 無法進(jìn)行錯誤處理,有時會黑屏,但不報錯
  • 不同瀏覽器有形態(tài)各異的表現(xiàn),速度和可用性難以保證
  • 播放器本身的緩存或預(yù)加載等機(jī)制帶來性能浪費(fèi)
  • 性能損耗大:相比canvas截幀慢;
  • 內(nèi)存消耗大:早期的wasm功能甚至?xí)?dǎo)致頁面崩潰;
  • 開發(fā)門檻高,需要了解ffmpeg lib的使用方式,要寫C代碼,需要手動構(gòu)建各類基礎(chǔ)庫

nrO28資訊網(wǎng)——每日最新資訊28at.com

現(xiàn)狀:截幀成功率97%左右,封面推薦耗時(去掉極端數(shù)據(jù))nrO28資訊網(wǎng)——每日最新資訊28at.com

  • 平均:8.4s
  • 50分位:16s
  • 90分位:19s

nrO28資訊網(wǎng)——每日最新資訊28at.com

WebCodecs是什么

nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

WebCodecs于21年9月份推出,是用于在web頁面上對音視頻進(jìn)行底層操縱(如編解碼)的API。nrO28資訊網(wǎng)——每日最新資訊28at.com

WebCodecs是相對底層的API,準(zhǔn)確來說是為有音視頻開發(fā)基礎(chǔ)的人準(zhǔn)備的,對前端同學(xué)來說有一定的門檻。nrO28資訊網(wǎng)——每日最新資訊28at.com

在使用FFmpeg時可直接調(diào)用包裝好的方法,主要門檻在于wasm環(huán)境的配置和構(gòu)建。而使用WebCodecs時則需要基于編解碼的原理手動實現(xiàn)功能。或許后續(xù)WebCodecs將會推出更加上層的API。nrO28資訊網(wǎng)——每日最新資訊28at.com

所以在進(jìn)一步介紹WebCodecs截幀方案之前,我想先介紹一些視頻處理的入門知識,感興趣的可以參考附錄中的鏈接進(jìn)一步學(xué)習(xí)。nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

MP4的入門知識

nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

視頻處理的基本概念

nrO28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

編碼/解碼:nrO28資訊網(wǎng)——每日最新資訊28at.com

  • 視頻的編碼是將原始的圖像信息進(jìn)行變換壓縮等處理,方便傳輸并保證圖像質(zhì)量。解碼則是將壓縮后的文件還原成視頻需要的一連串圖像
  • 常見的編碼格式:H.265; mpeg4; vp9 ……

封裝/解封裝:nrO28資訊網(wǎng)——每日最新資訊28at.com

  • 一個視頻文件可能包含多個音頻和視頻流,通過封裝格式將他們聚合在一起,在使用時按照規(guī)則逐步解析
  • 常見的封裝格式:mov,mp4,m4a,3gp,3g2; matroska; flv; avi ……

在這里簡單介紹下.mp4文件常用的h264編碼以及MP4封裝nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

編碼-幀內(nèi)編碼(以JPEG圖片壓縮算法為例)

nrO28資訊網(wǎng)——每日最新資訊28at.com

利用人眼的生物特性結(jié)合數(shù)學(xué)方法進(jìn)行數(shù)據(jù)壓縮,并確保圖片質(zhì)量。主要步驟:nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

具體流程在這就不展開了,總之,經(jīng)過壓縮后圖片的文件大小將有非常顯著的縮小nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片nrO28資訊網(wǎng)——每日最新資訊28at.com

??nrO28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

原圖大小:1620*1080*3/1024/1204 = 4.25MB ----> 編碼后大小:856KBnrO28資訊網(wǎng)——每日最新資訊28at.com

PS:效果僅供參考,兩者皆為經(jīng)過JPEG壓縮的圖片,只不過壓縮比不同nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

編碼-幀間編碼

nrO28資訊網(wǎng)——每日最新資訊28at.com

盡管經(jīng)過幀內(nèi)編碼的壓縮,圖片已經(jīng)有了很明顯的體積減少,但存儲視頻的每一幀是依然是很不明智的行為。因此需要幀間編碼。nrO28資訊網(wǎng)——每日最新資訊28at.com

通常有兩種方式進(jìn)行幀間編碼:動態(tài)補(bǔ)償+幀間差異nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

動態(tài)補(bǔ)償

nrO28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

通常,兩個連續(xù)的幀之間是存在相同部分的,只是位置發(fā)生了變化因此可以通過存儲 塊的索引 + 偏移量(向量)以減少存儲體積nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

幀間差異

nrO28資訊網(wǎng)——每日最新資訊28at.com

僅有動態(tài)補(bǔ)償還不夠還原每一幀的畫面,還需要通過兩幀之間的diff幀來輔助還原nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

diff幀的畫面通常信息量比較低,因此通過幀內(nèi)壓縮會獲得很高的壓縮比nrO28資訊網(wǎng)——每日最新資訊28at.com

使用這兩種方法,結(jié)合上一幀參考幀,便可以獲得當(dāng)前幀了nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

不同的幀類型

nrO28資訊網(wǎng)——每日最新資訊28at.com

對應(yīng)的,產(chǎn)生了三種幀類型nrO28資訊網(wǎng)——每日最新資訊28at.com

I 幀:俗稱的關(guān)鍵幀,僅使用了幀內(nèi)編碼,可以被獨(dú)立還原為圖像nrO28資訊網(wǎng)——每日最新資訊28at.com

P幀:幀的圖像還原依賴前一幀的解碼結(jié)果nrO28資訊網(wǎng)——每日最新資訊28at.com

B幀:幀的圖像還原依賴前一幀與后一幀的解碼結(jié)果nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

幀的展示順序與解碼順序可能是不一樣的nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

封裝

nrO28資訊網(wǎng)——每日最新資訊28at.com

MP4封裝文件基本結(jié)構(gòu):所有數(shù)據(jù)存放在box中nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

WebCodecs截幀方案

nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

設(shè)想一個問題:只使用一個編程語言的基本API,如何最高效地獲取一個.mp4文件中的某一個時間點所在的圖像?nrO28資訊網(wǎng)——每日最新資訊28at.com

在了解了上面的基本知識后,我們可以分4步解決這個問題:nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

不同于播放器:截幀不需要預(yù)解碼緩存等步驟。為了保證性能,需要多少數(shù)據(jù)拿多少,拿多少處理多少,避免多余的文件讀取和解析造成性能和內(nèi)存的浪費(fèi)。nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

 元數(shù)據(jù)讀取&解析

nrO28資訊網(wǎng)——每日最新資訊28at.com

1. 讀取文件頭部8byte的數(shù)據(jù),按照box的header規(guī)則逐個獲取各box的位置以及大小nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

PS:moov可能在文件的末尾,順序不固定nrO28資訊網(wǎng)——每日最新資訊28at.com

2. 將moov box所在文件塊切片,提供給解封裝器解析,獲取到:nrO28資訊網(wǎng)——每日最新資訊28at.com

  • 該視頻的詳細(xì)編碼參數(shù)
  • 所有幀的索引信息

nrO28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

尋幀

nrO28資訊網(wǎng)——每日最新資訊28at.com

策略:幀的時間戳并不是連續(xù)的的 → 某個時間點對應(yīng)的幀可能并不存在 → 使用距離最近的幀nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

獲取到最近的關(guān)鍵幀和非關(guān)鍵幀之后,則要根據(jù)截幀的需求提供不同的文件塊給解碼器解碼nrO28資訊網(wǎng)——每日最新資訊28at.com

只提供關(guān)鍵幀速度更快,適合精度不高的場景(封面推薦),準(zhǔn)確截幀適合精度要求高的場景(封面選幀)nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

整體過程

nrO28資訊網(wǎng)——每日最新資訊28at.com

由于解封裝器(mp4box.js)和解碼器(WebCodecs-VideoDecoder)本身為流式設(shè)計,優(yōu)先服務(wù)于流式的應(yīng)用場景(如直播視頻流,點播視頻流,需要通過網(wǎng)絡(luò)請求分塊獲取到文件內(nèi)容)。而視頻截幀是一個本地場景,已經(jīng)有了完整的文件。且視頻截幀的API最好是類似同步的方式,在一個方法調(diào)用中完成所有的幀截取,并一起返回。nrO28資訊網(wǎng)——每日最新資訊28at.com

因此設(shè)計了通過事件拋出以及定時器機(jī)制以達(dá)到對內(nèi)部流式依賴庫的包裝。nrO28資訊網(wǎng)——每日最新資訊28at.com

同時將計算密集的解封裝、解碼、渲染工作擋在獨(dú)立的web worker中執(zhí)行,確保宿主頁面運(yùn)行流暢不受影響。nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

圖片nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

性能分析

nrO28資訊網(wǎng)——每日最新資訊28at.com

本地測試:nrO28資訊網(wǎng)——每日最新資訊28at.com

測試機(jī)上模擬了web投稿頁場景,對WebCodecs / WebAssembly / Canvas 三種截幀方式的性能進(jìn)行了測試。nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

測試樣本:720p視頻2個,1080p視頻3個,2k視頻1個,4k視頻3個nrO28資訊網(wǎng)——每日最新資訊28at.com

測試環(huán)境:2020 M1 MacBook pro, 公司測試windows本(i5-1135G7 1.38~2.40GHz)nrO28資訊網(wǎng)——每日最新資訊28at.com

測試方式:在不同測試機(jī)上對每個視頻跑三次測試用例,共81次nrO28資訊網(wǎng)——每日最新資訊28at.com

測試用例:模擬web投稿頁截幀流程,數(shù)量,分辨率保持相同nrO28資訊網(wǎng)——每日最新資訊28at.com

實際場景中:視頻的編碼,分辨率,壓制參數(shù)等都會對截幀性能有影響,在這里以分辨率進(jìn)行粗略的分類nrO28資訊網(wǎng)——每日最新資訊28at.com

線上數(shù)據(jù):nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片nrO28資訊網(wǎng)——每日最新資訊28at.com

圖片圖片nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

總結(jié):nrO28資訊網(wǎng)——每日最新資訊28at.com

  • 隨著視頻規(guī)格的提升,webcodecs的截幀速度為wasm和canvas的 2.5~5 倍
  • 提前 3~13s 完成頁面所需的截幀任務(wù),用戶能夠更快的看到推薦結(jié)果
  • 在內(nèi)存消耗上有一定的降低

nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

WebCodecs截幀方案的優(yōu)點&缺點nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

優(yōu)點nrO28資訊網(wǎng)——每日最新資訊28at.com

  • 速度很快,受視頻規(guī)格影響小
  • 讀取文件少
  • 內(nèi)存占用有一定降低,且表現(xiàn)穩(wěn)定

缺點nrO28資訊網(wǎng)——每日最新資訊28at.com

  • 依賴解封裝器的實現(xiàn),當(dāng)前使用了mp4box.js作為解封裝器,約能覆蓋95%的視頻
  • 目前僅mp4和webm的解封裝器較完善
  • WebCodecs瀏覽器支持性一般,當(dāng)前為85%左右

規(guī)劃nrO28資訊網(wǎng)——每日最新資訊28at.com

  • 作為web投稿頁首選截幀方式,根據(jù)線上表現(xiàn)做進(jìn)一步優(yōu)化
  • 其他封裝格式的視頻支持:支持webm封裝格式(已支持,且開源了mkv demuxer)
  • 開源

nrO28資訊網(wǎng)——每日最新資訊28at.com

附錄nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

nrO28資訊網(wǎng)——每日最新資訊28at.com

jpeg壓縮算法介紹:nrO28資訊網(wǎng)——每日最新資訊28at.com

  • 我站:https://www.bilibili.com/video/BV1TZ4y1S7iG
  • 知乎:影像算法解析——JPEG 壓縮算法 - 知乎(https://zhuanlan.zhihu.com/p/40356456)

視頻編碼介紹:https://www.youtube.com/watch?v=QoZ8pccsYo4nrO28資訊網(wǎng)——每日最新資訊28at.com

不同的幀類型:I, P, and B-frames - Differences and Use Cases Made Easy - OTTVerse(https://ottverse.com/i-p-b-frames-idr-keyframes-differences-usecases)nrO28資訊網(wǎng)——每日最新資訊28at.com

codec string的含義([avc1.4d0033]代表什么):Codecs in common media types - Web media technologies | MDN(https://developer.mozilla.org/en-US/docs/Web/Media/Formats/codecs_parameter#using_the_codecs_parameter)nrO28資訊網(wǎng)——每日最新資訊28at.com

MP4封裝類型介紹:mp4封裝格式各box類型講解及IBP幀計算 - 知乎(https://zhuanlan.zhihu.com/p/457888765)nrO28資訊網(wǎng)——每日最新資訊28at.com

在線MP4解析工具:Online Mp4 Parser(https://www.onlinemp4parser.com/)nrO28資訊網(wǎng)——每日最新資訊28at.com

WebCodecs官方說明:WebCodecs(https://w3c.github.io/webcodecs/#videodecoder-interface)nrO28資訊網(wǎng)——每日最新資訊28at.com

WebCodecs代碼示例:https://github.com/w3c/webcodecsnrO28資訊網(wǎng)——每日最新資訊28at.com

本期作者nrO28資訊網(wǎng)——每日最新資訊28at.com

張鋒嗶哩嗶哩資深開發(fā)工程師張鋒嗶哩嗶哩資深開發(fā)工程師nrO28資訊網(wǎng)——每日最新資訊28at.com


nrO28資訊網(wǎng)——每日最新資訊28at.com


nrO28資訊網(wǎng)——每日最新資訊28at.com


nrO28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-70451-0.html基于WebCodecs的網(wǎng)頁端高性能視頻截幀

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 一文搞懂設(shè)計模式—責(zé)任鏈模式

下一篇: Go Gin框架實現(xiàn)優(yōu)雅地重啟和停止

標(biāo)簽:
  • 熱門焦點
Top 主站蜘蛛池模板: 双城市| 张家口市| 逊克县| 诏安县| 习水县| 临澧县| 林西县| 娄烦县| 乐陵市| 滨海县| 德阳市| 得荣县| 云和县| 凤山县| 铅山县| 时尚| 出国| 尖扎县| 海安县| 龙州县| 盖州市| 灵山县| 襄垣县| 合山市| 达日县| 沛县| 农安县| 琼海市| 隆化县| 黄浦区| 汪清县| 台南县| 峨山| 新田县| 曲周县| 阆中市| 东山县| 潞西市| 铜山县| 屯留县| 河曲县|