1. 程式人生 > >網頁顯示直播(監控)視訊 【ubuntu伺服器 (nginx+rtmp+jwplayer) 樹莓派(ffmpeg推流)】

網頁顯示直播(監控)視訊 【ubuntu伺服器 (nginx+rtmp+jwplayer) 樹莓派(ffmpeg推流)】

阿里雲伺服器(ubuntu)搭建nginx-rtmp伺服器

此文章中不再採用windows的obs進行推流,而是採用樹莓派的ffmpeg進行推流

因此,樹莓派需要安裝 ffmpeg

在樹莓派中的 ffmpeg 推流命令(-t 10可以刪除,則一直不斷的進行推流)

ffmpeg -ss 0 -t 10 -i /dev/video0 -f flv rtmp://(ip):(埠)/(nginx伺服器應用)/(自定義應用)

當配置完成後,網頁放入nginx伺服器的html資料夾中即可訪問

我的檔案目錄為:/usr/local/nginx/html/

jwplayer的demo.html

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
<head>  
<meta http-equiv="content-type" content="text/html; charset=utf-8" />  
<title>live-player</title>  
<style type="text/css">  
</style>  
</head>  
<body>  
<script type='text/javascript' src='jwplayer.js'></script>  
<center>
<b>RTMP直播系統</b>  
<div id='mediaspace'>This text will be replaced</div>  
<script type='text/javascript'>  
   var server = window.location.hostname;  
   // mylive 對應nginx.conf配置項application的名字  
   // live_stream 對應Adobe Flash Stream Media Live Encoder配置的stream名稱  
   var live_url = 'rtmp://' + server + '/hls' + '/live_stream';  
  jwplayer('mediaspace').setup({  
    'flashplayer': 'jwplayer.flash.swf',  
    'file': live_url,  
    'controlbar': 'bottom',  
    'width': '760',  
    'height': '428',  
    //autostart: true,  //如果開啟此標誌,在開啟網頁時會自動播放直播流  
  });  
</script>  
</body>  
</html>