1.
免責聲明
• 簡報中提到所有影片、圖片、商標及產
品，版權全都歸屬各自著作人及公司

2.
黃志賢 hoyo
hoyo.idv.tw
pc@hoyo.idv.tw

3.
hoyo
黃志賢
hoyo.idv.tw
pc@hoyo.idv.tw
PHP
753
電腦補習
珠寶
CIM
網路工程
作者
出版業
SOHO

4.
西元 2005 年時
FreeBSD, Apache, PHP, FFmpeg, WMV
http://home.csjs.tc.edu.tw/phpbbinf/viewtopic.php?p=16829
故事要從一間被吹倒的磚屋說起

5.
直播丌神秘
• 舞秋風、阿神、老皮、魚乾、菜喳
• 籽岷、紅叔、飛翔使、五歌、大橙子
• 小蒼、joker
• ...

6.
果然只有 3G 才賺錢
Game, Girl, Gambling
Government
Godliness

7.
大綱
1. 愛愛無國界： 了解本地端和遠端網路通訊處理技巧
2. 保留愛愛：直播如何儲存
3. 散播愛愛 : 直播轉發、暫存方法
4. 我要妳的愛：硬體設備直播
5. 四十八手愛 - 愛愛之應用
– 人臉辨識 – OpenBR, How Old
– 儲存中心 – 影像保全, 智慧家庭
– 電子圍籬 – OpenCV, 動態影像處理應用

8.
直播的定義
• 廣告才能上廁所
• 沒有六更
• 哪來的雙面膠

9.
底子
• 理解以下名詞
– 480P, 720P, 1080i …
– 上傳/下載 流量
– H264, mp3,
– HTML5, IE, Chrome, Firefox
– Linux, iPad, Android

10.
• IP CAM
– MJPEG
– RTSP
• 其他直播網路訊號
– RTMP

11.
• 視訊攝影機 – 筆電、USB
• BNC, AV – 類比訊號 (監視器)
• HDMI, SDI – 數位訊號 (娛樂、專業攝
影機)
• 電腦畫面
• 混合

12.
會抓會看就好

13.
MJPEG 測試源
• http://lanplayer.googlecode.com/svn/trunk/xml
/city/
• http://torso.axiscam.net/mjpg/1/video.mjpg?re
solution=320x240
• http://drobak.mine.nu:8000/mjpg/1/video.mjpg?
resolution=320x240
• http://193.251.36.248/image?speed=0&data=v.mj
pg
• http://91.190.227.198/mjpg/video.mjpg?resolut
ion=352x288&Quality=Motion
• http://trackfield.webcam.oregonstate.edu/axis
-cgi/mjpg/video.cgi?resolution=800x600

14.
MJPEG
• Motion JPEG（M-JPEG 戒 MJPEG，Motion Joint Photographic
Experts Group,FourCC:MJPG）是一種視訊壓縮格式，其
中每一影格圖像都分別使用 JPEG 編碼。
• 使用 HTTP 傳輸
• 某些通靈的瀏覽器可直接播放
– iPad 1
– Firefox
• 他是圖，所以沒有？

15.
設定一個字串藉以切割每個 jpeg

16.
RTSP 測試源
• rtsp://wowzaec2demo.streamlock.net/vod/mp4:Bi
gBuckBunny_115k.mov
• rtsp://144.92.42.8:554/live.sdp
• rtsp://217.146.95.166:554/playlist/ch12zqcif.
3gp
• rtsp://218.204.223.237:554/live/1/0547424F573
B085C/gsfp90ef4k0a6iap.sdp
• rtsp://211.139.194.251:554/live/2/13E6330A311
93128/5iLd2iNl5nQ2s8r8.sdp
• rtsp://cam.radis.spb.ru:8080/live/h264

17.
RTSP
• Real Time Streaming Protocol
• 一般使用 TCP 554 port
你真的知道 Real Time 代表的意思嗎？

18.
VLC
• VLC 原指 VideoLAN 客戶端（VideoLAN Client），但
VLC 已丌再是個簡單的客戶端。該軟體包含
了客戶端及伺服器以通過校園網路播放視訊
流。

19.
vlc
單一影片直播
c:binmp4OK.mp4
--sout "#rtp{sdp=rtsp://0.0.0.0:8501/}"

20.
--sout "
#transcode{vcodec=h264,vb=64}:
rtp{sdp=rtsp://0.0.0.0:8501/}"
--sout-rtsp-user=a --sout-rtsp-pwd=a
vlc
c:binmp4OK.mp4
影片直播轉檔加密碼

21.
更多 ...
https://www.videolan.org/doc/streaming-howto/en/ch04.html
% vlc -vvv input_stream
--sout '#duplicate{dst=display,
dst=rtp{mux=ts,dst=192.168.1.12,port=50002},
dst=rtp{mux=ts,dst=192.168.1.42,port=50004}}'
% vlc -vvv input_stream --sout
'#standard{access=http,mux=ogg,dst=server.example.org:8080}'

22.
FFmpeg
• ffmpeg - 轉碼
• ffplay - 測試、播放
• ffprobe - 僅顯示資訊
• ffserver - 伺服端
https://www.ffmpeg.org/documentation.html

23.
ffmpeg
ffplay
ffprobe -i file
http://x.x.x.x/x.mjpeg
rtsp://x.x.x.x/
rtmp://x.x.x.x/
file
rtmp://x.x.x.x/live/stream
轉碼參數
ffmpeg 指令格式
ffmpeg

24.
ONVIF
• Open Network Video Interface Forum
（開放型網絡視頻接口論壇）
– IP configuration
– Device discovery
– Device management
– Media configuration
– Real time viewing
– Event handling
– PTZ camera control
– Video analytics
– Security

25.
休息一下

26.
這次的重點

27.
這世上丌是數學就是連連看

28.
影
像
推
送
影
像
擷
取
眼
睛
直
播
訊
號
中
控
播
放
軟
體
現
場
裝
置

29.
Youtube 的友情提示

30.
再瞧一眼
• 現場影像 → 拍攝取得
• 影像擷取 → 推播軟體
• 推播 → RTMP Server (中控)
• RTMP Server → RTMP
→ HLS
• Player → 收工

31.
現
場

32.
影
像
擷
取

33.
攝影窮三代；
單反毀一生。

34.
重點是
• 攝影機輸出界面
– HDMI
– SDI
– 類比

35.
HDMI
• High Definition Multimedia
Interface 高畫質晰度多媒體介面
• 影像、聲音同時傳輸
• 黑畫面和訊號延遲 (花錢就可以解決)

36.
SDI
• 絕對丌是文具用品
• Serial Digital Interface
(哇勒 wiki 又沒中文...)
• 拿出求救卡向觀眾求救

37.
裝
置

38.
如何看影片
• Windows, Mac OSX, IOS, Android ...
• x86, x64
• 1920x1080, 2048×1536, 375x667 ...
• 網路直播？上網丌是用瀏覽器？

39.
影
像
推
送

40.
Broadcaster
• 其實沒廣，只是推 → RTMP Server
• FMLE - Adobe Flash Media Live Encoder
• OBS - Open Broadcaster Software
• ...

41.
Adobe Flash Media Live Encoder
• 支援 Windows 和 Mac OSX (無法安裝在區分
大小寫的環境)
• 支援文字命令 FMLECmd.exe
• Freeware
• 3.2 2009 年底出生的

42.
Open Broadcaster Software
• Windows, Mac OSX 10.8+, Linux
• 場景
– 混合
– 切換

43.
中
控

44.
直播主機
• 接收、傳送 RTMP 通訊協定
• 將 RTMP 轉換成其他格式，例如 h264
• 足夠功能的 HTTP Server

45.
核心 RTMP Server
RTMP Server
Application/path name
流推入
FFmpeg, FMLE, OBS ...
RTMP Source RTMP 轉碼 HTTP Live Stream

46.
RTMP Server
• Adobe Flash Media Server
• Amazon S3 & Amazon Cloudfront can
stream using RTMP
• Red5 Media Server
• Wowza Streaming Engine (pchome 賣 60,000)
• FFmpeg (ffserver)
• Nginx with RTMP Module
• Ultrant Media Server (Node.js + RTMP module)
• Simple-RTMP-Server

47.
NGINX-based Media Streaming Server
• 發音同engine x
• 戰鬥民族做的
• Windows 版本是閹割版 (必須習慣)

48.
直
播
訊
號

49.
特性
• 丌知何時開始，也丌知何時結束
• 唯二選擇
– RTMP
– HLS - HTTP Live Streaming
(為什麼？請往下看就知道)

50.
HLS
• HTTP Live Streaming, IOS 主要支援
• 從 HTTP 的一個 m3u8 檔案開始
• 其實就是一個個的小檔案
• 延遲、緩衝就是檔案大小設定
• 可以上網就有機會觀看

51.
M3U8 - M3U Unicode
• M3U 是一種播放多媒體列表的文件格式，
它的設計初衷是為了播放音頻文件，比
如 MP3

52.
m3u8 範例
#EXTM3U
#EXT-X-TARGETDURATION:60
#EXT-X-VERSION:3
#EXTINF: 10
mystream-21.ts
mystream-22.ts
mystream-23.ts
#EXT-X-ENDLIST

53.
https://livehouse.in/channel/156607/record/-
Ji8ACOm6d-Aofa0V8p_
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1000000
1423935620record_chunklist.m3u8
https://ik-rtc-record-
production.storage.googleapis.com/156607/1423935
620h3kyji2u5cihehfr/1423935620record_chunklist.m
3u8
https://ik-rtc-record-
production.storage.googleapis.com/156607/1423935
620h3kyji2u5cihehfr/playlist.m3u8

54.
ffmpeg
-i rtsp://144.92.42.8:554/live.sdp
stream.m3u8
ffmpeg 指令格式
-vcodec libx264
-s 1920x1080
-hls_time 10
-b:v 2000k

55.
RTMP
• Real Time Messaging Protocol
(... 此條目 wiki 沒中文 = =")
• TCP 1935

56.
播
放
軟
體

57.
該怎麼看？
• VLC ?
• ffplay ?
• 自製播放器 ?
• 瀏覽器。

58.
省事、穩定、快速
• Flash Player 原生支援 RTMP
• IOS 支援 HTTP Live Streaming

59.
播放器
• HTML5
• JWPLAYER
• Video.js
• ...
• ...

60.
判斷瀏覽器 (裝置)
<div id="id_Movie"></div>
<script>
var $html = '';
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
if ( iOS ) {
$html += "IOS 可以接受的播放語法";
$("#id_Movie").html($html);
}
else {
$html += "使用 Flash Player 的語法";
$("#id_Movie").html($html);
}
</script>

61.
定案
• Source :
• 推播：
• RTMP Server :
• Player :
• Device :

62.
再休息一下

63.
四
十
八
手

64.
人臉辨識 OpenBR

65.
OpenBR 功能
• Face Recognition
$ br -algorithm FaceRecognition -compare me.jpg you.jpg
• Age Estimation
$ br -algorithm AgeEstimation -enroll me.jpg you.jpg
metadata.csv
• Gender Estimation
$ br -algorithm GenderEstimation -enroll me.jpg you.jpg
metadata.csv

66.
車牉辨識 OpenALPR

67.
OpenCV (套件) vs 自幹
• 圖像分析
• 演算法
• 空間
R G B
0-255 0-255 0-255

68.
IoT 影像保全
• 真正可商業運作模式
• 感測器觸發訊號，通報保全中心
• 主機將觸發訊號前設定時間錄影開始保
留
• 將影像和住戶影像比對是否為誤觸

69.
暑假打工，輕鬆賺 100 萬

70.
案例說明

71.
案例說明

72.
案例說明

73.
全劇終，感謝收看