Truyền hình trực tiếp lên trang website là mối quan tâm của nhiều người, với mong muốn tạo ra một dịch vụ trực tiếp độc lập, không phụ thuộc vào các dịch vụ như Facebook, Youtube, Periscope,… với khả năng kiểm duyệt bản quyền ngày càng cao.
1- Giao thức (method) kết nối.
Đa số ứng dụng hiện nay sử dụng giao thức RTMP để kết nối giữa máy chủ trực tiếp (ở đây là MistServer) với nguồn phát (ở đây là OBS Studio).
MistServer có nhiệm vụ cung cấp một số cú pháp nhằm đưa dữ liệu video lên trang web của bạn.
OBS Studio có nhiệm vụ mã hóa các đoạn video, camera hoặc từ nguồn phát khác và chuyển chúng đến MistServer.
Cú pháp(syntax): rtmp://*HOST*:*PORT*/*APPLICATION*/*STREAM_NAME*
2- Thiết đặt MistServer
2.1-Tải phần mềm MistServer tại đây https://mistserver.org/download
2.2-Tiến hành giải nén và chạy tập tin MistController
2.3-Truy cập vào địa chỉ IP của máy cài đặt MistServer để quản lý tại địa chỉ http://ip:4242 , ở đây là: http://192.168.1.21:4242
2.4-Lấy đoạn mã nhúng để đưa vào trang web.
<div class="mistvideo" id="livestream_L7TYVs0fFArd">
<noscript>
<a href="http://192.168.1.21:8080/livestream.html" target="_blank">
Click here to play this video
</a>
</noscript>
<script>
var a = function(){
mistPlay("livestream",{
target: document.getElementById("livestream_L7TYVs0fFArd")
});
};
if (!window.mistplayers) {
var p = document.createElement("script");
p.src = "http://192.168.1.21:8080/player.js"
document.head.appendChild(p);
p.onload = a;
}
else { a(); }
</script>
</div>
3- Thiết đặt OBS Studio: chức năng của phần mềm này là mã hóa các nguồn dữ liệu như video, webcam, quay lại màn hình máy tính,…. sau đó chuyển dữ liệu đến Mistserver và từ Mistserver ta đưa lên hiển thị trên website.
3.1-Tải về tại đây https://obsproject.com/download
3.2-Vào Setting vào thiết đặt như hình bên dưới với 192.168.1.21 là địa chỉ IP máy cài Mistserver
4-Vận hành thử nghiệm
4.1- Vào một máy cùng mạng LAN sau đó nhập địa chỉ sau vào trình duyệt http://192.168.1.21:8080/livestream.html
4.2- Tạo một trang website đơn giản để kiểm nghiệm
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="mistvideo" id="livestream_olIARAeGSXY8">
<noscript>
<a href="http://192.168.1.21:8080/livestream.html" target="_blank">
Click here to play this video
</a>
</noscript>
<script>
var a = function(){
mistPlay("livestream",{
target: document.getElementById("livestream_olIARAeGSXY8")
});
};
if (!window.mistplayers) {
var p = document.createElement("script");
p.src = "http://192.168.1.21:8080/player.js"
document.head.appendChild(p);
p.onload = a;
}
else { a(); }
</script>
</div>
</body>
</html>
5- Xem video