RTSP Video yayınını FFmpeg Kullanarak HTML5’e dönüştürme

tarihinde gönderilmiş tarafından

Merhabalar;

Bu anlatımımda sizlere IP kameraların vs kullandığı RTSP steaminin HTML5 bir sayfada nasıl görüntülenebileceğini göstereceğim.

RTSP’yi kısaca açıklamak gerekirse açılımı; Real Time Streamin Protocol’dür. Büyük CCTV sistemlerinde birçok üreticinin bütünleşik halde çalışması için geliştirilmiş ortak bir protokoldür. Neredeyse tüm IP kameralar desteklemektedir.

Peki bu kadar güzel görünen bir protokolü kullanarak video kaydını canlı olarak web sitenizde nasıl yayınlayabilirsiniz; onu anlatacağım.

RTSP Video yayınını FFmpeg Kullanarak HTML5’e dönüştürme

Öncelikle işlemlere başlamadan önce işletim sisteminizde ffmpeg kurulu olmalıdır.

ffmpeg -i "rtsp://kadi:sifre@IP/LiveMedia/ch1/Media1" -s 1000x525  -f image2 -update 1 -vf fps=fps=1 /var/www/html/video/999999.jpg -y &

Yukarıda gördüğünüz gibi çok basit bir işlemle yapmak istediğimizi yapabiliyoruz. Ben çok düşük FPS ile ve bu kameranın saniyelik fotosunu çekerek web sayfama koymak istiyorum. Yukarıdaki kadi:sifre@KameraIP bölümüne kamera bilgilerini yazıyoruz. 1000×525 bölümüne de görüntünün çıktısının boyutlarını yazıyoruz. 999999.jpg olarak /var/www/html/video/ dizinine 1 saniyede bir üzerine yazarak fotograf oluşturuyoruz.

Ardından bir adet Php dosyası açıp içine alttaki kodu ekliyoruz. Ben bu php dosyasının adını cam.php yaptım.

$data = file_get_contents('/var/www/html/video/999999.jpg');
$base64 = 'data:image/jpg;base64,' . base64_encode($data);
print_r($base64);

Daha sonra kamerayı paylaşmak istediğim sayfada alttaki javascript kodu ile saniyede 1 defa olmak üzere setInterval ile cam.php dosyasına istek atarak fotografı sayfamda gösterdim.

<img src="" id ="img_cam" width ="100%" style="max-height: 510px; min-height: 510px">

<script>
setInterval(function(){ 
$.ajax({
    url: "cam.php",
    method: "POST",
    data: {}
})
.done(function(result) {  
    $("#img_cam").prop('src', result);            
});
}, 1000);
</script>

Ben yüksek FPS’e gerek duymadığım ve bant genişliğini fazla kullanmamak için bu şekilde yaptım. Bu benim için yeterli oldu. Sizde yukarıda paylaştığım kodun FPS ve interval süreleri ile oynayarak geliştirmeler yapabilir, veya ffmpeg ile direkt video stream edebilirsiniz. RTSP Video yayınını FFmpeg Kullanarak HTML5’e dönüştürme işlemini gerçekleştirdik.

Bir dahaki anlatımda görüşmek üzere…