วันนี้เราจะมาลองทำ RTMP HLS Streamming Server สำหรับทำ Streaming บนเวปของเรา กับด้วย OBS Streamming กัน ง่ายๆกันครับ
โดย HLS ก็คือ HTTP Live Streaming มันจะทำงานโดยการแบ่ง Video เป็นชิ้นๆ เล็กๆ แล้วทยอยส่งไปยัง Client จะได้ลด Load ของทาง Server เพราะเป็นการทยอยส่ง ไม่ได้ส่งไปทั้งเรื่องเหมือนการเอา MP4 ไปวางไว้ทั้งดุ้นครับ
เริ่มต้นง่ายๆ ผมขี้เกียจ Config อะไรทั้งนั้น เราไปหา RTMP HLS Nginx ใน Docker Hub กันก่อน นั่นก็คือ alqutami/rtmp-hls โดยตัวระบบเป็น
Nginx with nginx-rtmp-module.
FFmpeg for transcoding and adaptive streaming.
ผมก็สั่ง Docker pull ลงมา
docker pull alqutami/rtmp-hls
หลังจาก Pull ลงมาแล้ว ผมสั่ง Run ด้วยคำสั่ง
docker run -d -p 1935:1935 -p 8000:8080 alqutami/rtmp-hls
หลังจากนั้นผมเข้าไปยัง url http://localhost:8000/stats จะพบกับ หน้ารวม Stats ของ ระบบ
เราจะ shell เจ้าไปใน container ของ docker เพื่อแก้ไขตัว player ให้รับ streamming key ที่เราจะทำการถ่ายทอดสดด้วยคำสั่ง
docker exec -it mystifying_heyrovsky bash
จากนั้นเราจะเข้าไปทำการแก้ไข HLS player key ใน path /usr/local/nginx/html/players
หรือจะทำการ mount path ตอนสั่งสร้าง container ไปเลยก็ได้ด้วยคำสั่ง
docker run -d -p 1935:1935 -p 8000:8080 -v $(pwd)/players:/usr/local/nginx/html/players alqutami/rtmp-hls
หลังจากนั้นให้เราสร้าง file index.html ขึ้นมา ภายใต้ folder players และให้เราใส่ html ตามนี้ลงไป
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HLS Live Streaming</title>
<link href="https://vjs.zencdn.net/7.5.5/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.5.5/video.js"></script>
</head>
<body>
<h1>HLS Player</h1>
<video id="player" class="video-js vjs-default-skin" width="720" controls preload="auto">
<source src="http://localhost:8000/hls/twinsynergyteststream.m3u8" type="application/x-mpegURL" />
</video>
<script>
var player = videojs('#player');
</script>
</body>
</html>
โดยตรงบรรทัดที่ 14 ตรง source src ให้เราใส่ url ของ server ของเราลงไป
http://<server ip>:8000/hls/<stream-key>.m3u8
ในที่นี้ผมใช้ localhost ที่ port 8000 โดยตั้ง stream key ว่า twinsynergyteststream
หลังจากนั้นเราจะมาลอง Streamming จากโปรแกรม OBS กัน ขั้นแรกเปิด OBS ขึ้นมาก่อนเลย
หรือถ้ายังไม่มีให้ไป download ได้ที่ https://obsproject.com/
หลังจากนั้นให้กด Settings เพื่อ config stream server และ stream key ดังนี้
rtmp://<server ip>:1935/live/<stream-key>
โดยให้แทนที่ server ip และ stream key ที่เราตั้งใว้ใน html file ที่ใช้แสดงตัว player นั่นก็คือ localhost และ twinsynergyteststream นั่นเองครับ
หลังจากนั้นเมื่อเรากด start streaming เราจะเห็น video ของเราบน browser เรียบร้อยครับ
เห็นไหมครับทำ streaming server ทดลองใช้งานเองเบื้องต้น ไม่ยากอย่างที่คิด
ลองเอาไปเล่นกันดูนะครับ