Как воспроизвести поток RTMP или HLS на сайте с андроида?

Question

[Lexaz]

Настроил Nginx на выдачу потока RTMP и HLS. Конфиг следующий:

live on;
hls on;
hls_path /tmp/hls/office1/;
exec_pull ffmpeg  -i rtsp://admin:admin@0.0.0.0/cam/realmonitor?channel=01&subtype=00 -c copy -f flv -an rtmp://localhost:1935/office1/stream 2>>/usr/rtmp/office.log;

На страницу вставил JWPlayer

<script type="text/javascript">
jwplayer("container1").setup({
sources: [ {
file: "rtmp://10.10.10.10:1935/office1/stream"
},
{
file: "http://10.10.10.10/hls/office1/stream.m3u8"
} ],
});
</script>

Через десктоп поток идет отлично. А вот с андроида никак не хочет.
Если я правильно понял андроидом подхватывается только HLS а он не генерится без обращения к RTSP?
Пдскажите другой плеер для андроид, iOS, Десктоп

Answer 1

[Lexaz]

В общем для генерации hls пришлось держать поток RTSP с камеры постоянно запущеным через exec_static ffmpeg .. в конфиге nginxа. На странице сайта следующий скрипт для плеера UPPOD:

<div id="videoplayer1" style="width:480px;height:270px;">
		<script type="text/javascript">
		var ua = navigator.userAgent.toLowerCase();
		var flashInstalled = false;
		if (typeof(navigator.plugins)!="undefined" && typeof(navigator.plugins["Shockwave Flash"])=="object") { 
	         flashInstalled = true; 
		} else if (typeof  window.ActiveXObject !=  "undefined") { 
			try { 
				if (new ActiveXObject("ShockwaveFlash.ShockwaveFlash")) { 
					flashInstalled = true; 
				} 
			} catch(e) {}; 
		};
	   if(ua.indexOf("iphone") != -1 || ua.indexOf("ipad") != -1 || (ua.indexOf("android") != -1 && !flashInstalled)){
	   		// HTML5
           
          this.videoplayer1 = new Uppod({m:"video",uid:"videoplayer1",comment:"Улица ночью",file:"http://1.2.3.4/hls/cam/stream.m3u8",st:"uppodvideo"});
           
           }else{
	      if(!flashInstalled){
	      	 // NO FLASH
	         document.getElementById("videoplayer1").innerHTML="<a href=http://www.adobe.com/go/getflashplayer>Требуется установить Flash-плеер</a>";
	      }else{
	         // FLASH
               var flashvars = {"comment":"Улица ночью","st":"http://5.6.7.8/st/video248-69.txt","file":"rtmp://1.2.3.4/cam/stream"};var params = {wmode:"transparent", allowFullScreen:"true", allowScriptAccess:"always",id:"videoplayer1"}; new swfobject.embedSWF("http://5.6.7.8/player/uppod.swf", "videoplayer1", "960", "576", "9.0.115.0", false, flashvars, params);
              }

}

Answer 2

[Wexter]

на андроиде/ios нет флеша, используйте html5 video

Comments

[Lexaz]

Это я понял. Как по запросу генерировать hls?

[Wexter]

<video src="10.10.10.10/hls/office1/stream.m3u8">

[Lexaz]

Wexter: смотри, stream.m3u8 не создается пока не запросить rtmp://10.10.10.10:1935/office1/stream . На сервере поток rtmp не постоянен и постоянно тянуть с камеры RTSP не хочу а только по запросу. Если бы по запросу 10.10.10.10/hls/office1/stream.m3u8 запускался поток RTMP все бы заработало.

Answer 3

[Александр Аксентьев]

HLS генерируется через ffmpeg на сервере.

Там под кучей скриншотов есть пример sanasol.ws/2016/08/16/cloudflare-%D0%BE%D1%82%D0%B...

Comments

[Lexaz]

я понял что HLS генерируется на сервере и генерируется он только по запросу RTMP, если посмотреть мой конфиг. exec_static запускать не хочу, потому как не нужен постоянный трафик камера->сервер. Нужна схема такая: браузер->сигнал на сервер, сервер запускает поток от камеры, стримит в RTMP и генерирует HLS. Закрыли браузер, поток прекратился.