มาทำ RTMP HLS Streaming Server ใช้งานเล่นกันเถอะ18 August 2020DevOps

มาทำ RTMP HLS Streaming Server ใช้งานเล่นกันเถอะ

วันนี้เราจะมาลองทำ 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 ของ ระบบ

Server Status

เราจะ 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 นั่นเองครับ

Config Stream Key

หลังจากนั้นเมื่อเรากด start streaming เราจะเห็น video ของเราบน browser เรียบร้อยครับ

Start Streaming
http://localhost:8000/players/index.html

เห็นไหมครับทำ streaming server ทดลองใช้งานเองเบื้องต้น ไม่ยากอย่างที่คิด

ลองเอาไปเล่นกันดูนะครับ

ก่อนหน้า
ถัดไป