專案意義：

長久以來，安防領域的網路攝像機(IPC)的WEB視訊直播都依賴於瀏覽器外掛，IE瀏覽器使用ActiveX外掛，Chrome和Firefox瀏覽器使用NPAPI外掛。
之所以開發瀏覽器外掛來收流、解碼、播放IPC的實時視訊，是因為早期HTML的發展過於緩慢，在純web程式碼無法實現的情況下開發者只能使用外掛來輔助。
此方法的弊端顯而易見，比如使用者使用不方便，開啟web之後需要點選下載並安裝外掛才可以播放IPC的實時視訊，而且很多使用者會擔心第三方外掛的安全性。
原本出於安全考慮，瀏覽器把web程式碼的執行限制於沙箱之中，並限制web程式碼很多本地介面的許可權，營造出比較安全的網路環境。
瀏覽器外掛的設計違背了這個初衷，因為外掛可以獲得和桌面應用程式幾乎一樣的許可權，安裝完外掛之後開啟web時，web程式碼可以呼叫外掛肆意的讀寫電腦本地資料。
這幾年微軟、谷歌、蘋果、Mozilla等各大瀏覽器廠商也意識到了瀏覽器外掛的安全問題，開始在新發布的瀏覽器中限制第三方外掛的使用。
現在Edge、Chrome、Safari、Firefox等瀏覽器已經不支援NPAPI外掛，只剩下IE瀏覽器還在支援ActiveX外掛，導致IPC的web頁面只能在IE核心的瀏覽器播放實時視訊。
所以實現web無外掛實時播放IPC的H264/H265視訊十分重要。

專案描述：

視訊傳輸使用websocket協議，ipc後端推流使用C語言程式設計，web前端收流使用js語言。
web的視訊解碼庫使用js語言，通過emscripten工具把C語言解碼庫程式碼編譯成js。
解碼後的YUV資料轉換為RGB後推到HTML5的canvas播放。

解碼器選擇：

由於找不到合適的開源js解碼器程式碼，所以選用C語言的解碼器，通過emscripten工具把C語言解碼庫編譯成js庫。
先後嘗試過libde265、openhevc、ffmpeg，最後選擇了ffmpeg。ffmpeg原始碼的下載與api使用參考之前釋出的文章。

emscripten安裝：

這個工具的安裝非常麻煩，過程會報很多錯誤，需要預先安裝很多軟體，需要一定耐心。沒關係，根據報錯提示一個個排除，最後就可以成功的。

//下載
wget https://s3.amazonaws.com/mozilla-games/emscripten/releases/emsdk-portable.tar.gz 
tar -xvf emsdk-portable.tar.gz 
cd emsdk-portable 

//安裝
./emsdk update
./emsdk install latest
./emsdk activate latest

//更新環境變數
source ./emsdk_env.sh

//測試,檢視版本
emcc -v 

emconfigure ./configure --cc="emcc" --cxx="em++" --ar="emar" --prefix=$(pwd)/../dist --enable-cross-compile --target-os=none --arch=x86_32 --cpu=generic \
 --enable-gpl --enable-version3 --disable-avdevice --disable-avformat --disable-swresample --disable-postproc --disable-avfilter \
 --disable-programs --disable-logging --disable-everything --enable-decoder=hevc --enable-decoder=h264 \
 --disable-ffplay --disable-ffprobe --disable-ffserver --disable-asm --disable-doc --disable-devices --disable-network \
 --disable-hwaccels --disable-parsers --disable-bsfs --disable-debug --disable-protocols --disable-indevs --disable-outdevs 
make
make install

export TOTAL_MEMORY=268435456
export EXPORTED_FUNCTIONS="[ \
    '_avcodec_register_all', \
    '_avcodec_find_decoder', \
    '_avcodec_alloc_context3', \
    '_avcodec_open2', \
    '_av_free', \
    '_av_frame_alloc', \
    '_avcodec_close', \
    '_avcodec_decode_video2_js', \
    '_avcodec_get_image_width_js', \
    '_avcodec_get_image_height_js', \
    '_avcodec_get_chroma_format_js', \
    '_avcodec_get_image_plane_js', \
    '_avcodec_get_image_pitch_js', \
    '_avcodec_get_image_bit_depth_js', \
    '_avcodec_close_AVCodecContext_js', \
    '_avcodec_flush_buffers' 
]"
emcc dist/lib/libavcodec.a dist/lib/libavutil.a \
 -s OUTLINING_LIMIT=100000 \
 -s TOTAL_MEMORY=${TOTAL_MEMORY} \
 -s EXPORTED_FUNCTIONS="${EXPORTED_FUNCTIONS}" \
 -O2 \
 --pre-js libffmpeg_pre.js \
 --post-js libffmpeg_post.js \
 -o libffmpeg.js 
 

測試效果：

使用最新的Firefox瀏覽器
解碼H264的1080P解析度時，延時可以控制在幾百毫秒以內，測試的最大解析度是2592X1944，也比較實時。
解碼H265的1080P解析度時，比較負荷比較大，會有卡頓現象。

還有更高效能的解決方案，使用WebAssembly解碼H264/H265，可參考我的另一篇文章：

http://blog.csdn.net/Jacob_job/article/details/79436639

http://blog.csdn.net/Jacob_job/article/details/79434207