Jump to content
Калькуляторы

Вещание камеры на сайте h.264 rtsp

Подскажите, где я ошибся при организации трансляции камеры на web-сайт.

Камера отдает поток h264 по протоколу rtsp. Забираю поток vlc, меняю контейнер и отдаю в FlowPlayer так:

cvlc -d -R rtsp://$IP_RIV:$PORT_CAM/ --http-caching=1000 --no-sout-audio --sout='#std{access=http{mime=video/x-flv},dst=$IP_SERV:8080/v.flv,mux=ffmpeg{mux=flv}}'

 

 

На сайте:

<script type="text/javascript" src="/js/flowplayer-3.2.11.min.js"></script>

 

<a href="http://IP_SERVER:8080/v.flv" style="display:block;width:520px;height:390px;margin:10px auto;" id="player1"></a>

 

<script>

flowplayer("player1", "/flow/flowplayer-3.2.12.swf", {

 

plugins: {

controls: {

url: '/flow/flowplayer.controls-3.2.12.swf',

 

right: 7,

bottom: 7,

opacity: 0.95,

width: 190,

 

timeColor: '#44BBEE',

all: false,

play: true,

time: true,

fullscreen: true,

 

tooltips: {

buttons: true,

play: 'Воспроизвести',

pause: 'Пауза',

fullscreen: 'Полноэкранный режим',

fullscreenExit: 'Оконный режим'

},

autoHide: {

hideStyle: 'move',

fullscreenOnly: false

}

}

}

}

);

 

 

Данный код работает на старых версиях flash, но после обновления flash показывает стоп-кадр (иногда после задержки, начинает вещать нормально). С чем это может быть связано и как правильно организовать вещание h264 камер. Желательно без перекодирования или с перекодированием с минимальными потерями качества.

Планирую перейти на erlyvideo, если не получится победить vlc.

Заранее спасибо.

Share this post


Link to post
Share on other sites

У меня (с перекодированием) так

 

H264_OPT=":sout-x264-preset=veryfast :sout-x264-tune=stillimage \
:sout-x264-partitions=none :sout-x264-keyint=40 :sout-x264-bframes=0"

VLC_CMD="/usr/local/bin/cvlc -vv $SOURCE :no-audio :sout=#transcode{vcodec=h264,vb=0,scale=0,acodec=mp4a,ab=0,channels=0,samplerate=44100}:http{mux=ffmpeg{mux=flv},dst=$STREAM} :no-sout-rtp-sap :no-sout-standard-sap :ttl=1 :sout-keep $H264_OPT"

 

<head>
<script src="/flowplayer/flowplayer-3.2.6.min.js"></script>
</head>

 

 

<a
href="http://xxxxxxxxx"
style="display:block;width:640px;height:480px"
id="player">
</a>
<script>
flowplayer("player", "/flowplayer/flowplayer-3.2.7.swf", {
clip : {
			autoPlay: false,
			live: true,
		}
});
</script>

Share this post


Link to post
Share on other sites

Зависит от параметра --http-caching=1000

 

P.S. erlyvideo та еще какшка.

 

Пробовал менять (в большую и в меньшую сторону) параметр --http-caching= и вообще убират его. Все равно flash плеер показывает вначале стопкадр, а потом может пойти видео, а может так и стоять, пока не перегрузишь страницу. Время стопкадра тоже разное, иногда 2-3 сек, а иногда 40 (или вообще так и стоит до перезагрузки).

Думаю, у меня где-то в архитектуре проблема. Какие сочетания кодека и контейнера подходят для плееров (flowplayer,jwplayer итд)?

Edited by postuser

Share this post


Link to post
Share on other sites

Подскажите, где я ошибся при организации трансляции камеры на web-сайт.

Камера отдает поток h264 по протоколу rtsp. Забираю поток vlc, меняю контейнер и отдаю в FlowPlayer так:

cvlc -d -R rtsp://$IP_RIV:$PORT_CAM/ --http-caching=1000 --no-sout-audio --sout='#std{access=http{mime=video/x-flv},dst=$IP_SERV:8080/v.flv,mux=ffmpeg{mux=flv}}'

 

 

Вещаю через erlyvideo

Может пригодится.

config

Ubuntu amd64

root@cam-333:~# uptime 
13:48:42 up 81 days, 16:48,  1 user,  load average: 0.00, 0.01, 0.05

% Bing ports where to listen for RTMP, RTSP and HTTP traffic
{rtmp_port, 1935}.
{rtsp_port, 8081}.
{http_port, 8082}.
% Useful for those, who want to intercept RTSP traffic and for example rewrite RTSP requests
{rtsp_callback, ems_rtsp}.
% iPhone streaming splits media stream in segments of this size. Size given in milliseconds
{iphone_segment_size, 10000}.
% RTCP is a synchronization messaging for RTSP/RTP protocols. Tell how often to send it in milliseconds
{rtcp_interval, 5000}.
% This is a very thin configuration option. If you ask a web-server for a nonexistent file, it replies you 404
% This behaviour is good and clean. But if you ask a default RTMP server for a nonexistent file, it will block you
% and tell: ok, I've started a new live stream for you, let's wait untill publisher comes.
% This option tunes this behaviour. When false, it will behave as RTMP server. When true, it will return you 404.
{rtmp_default_wait, false}.
% List of additional applications to start. Erlyvideo will take this list and call Module:start() one by one.
{modules,[]}.
% Additional load paths. Better follow OTP conventions than use this option
{paths, ["/var/lib/erlyvideo/plugins", "/usr/local/lib/erlyvideo/plugins"]}.
% List of file formats. Add your own if you wish more
{file_formats,[mp4_reader,flv_reader,mp3_reader]}.
%
{script_paths, ["scripts"]}.
{vhosts, [
% default virtual host is a fallback vhost, if no other hosts matched
 {default, [
   % This may be changed to mmap, if you are brave
   {file_access, file},
 % When new stream is asked by any client, erlyvideo goes through this list of detectors and try them
 	{detectors, [rewrite, http, rtsp, ts_file, file, livestream]},
   {hostname, ["localhost"]},
   {rtmp_handlers, [{auth_users_limit, 200}, trusted_login, remove_useless_prefix, apps_streaming, apps_recording]},
   {event_handlers, [
     {stream_stopped, {ems_hook_http, "http://localhost:8082/stopped"}},
     {user_connected, {ems_hook_http, "http://localhost:3000/"}}
   ]},
   {secret_key, "123"},
   {file_dir, "movies"},
   {wwwroot, "wwwroot"},
   {www_handlers, [
     ems_http_rtmpt, % RTMPT should be first handler, because it is called REALLY often
      %ems_http_hls, % uncomment this line if you have purchased commercial license
      {ems_http_admin_protect, "admin", "password"}, % uncomment this line to enable password protection for admin panel
     ems_http_mpegts, % This handler can response with endless MPEG-TS streams
     ems_http_flv, % replies with endless FLV files for your streams
     ems_http_erlyvideo_api, % this one replies with stream status and can modify your server.
     {ems_http_file,"wwwroot"} % just plain static files
   ]},
   {rewrite, [

     {"1", rtsp, "rtsp://10.10.210.1:554/live/ch00_0", []},
     {"2", rtsp, "rtsp://10.10.210.2:554/live/ch00_0" ,[]}
     ]}
 ]}
]}.

 

Поток в RTMP

flowplayer.

index.html

<html>
<link rel="stylesheet" type="text/css" href="style.css">
<head>
<meta charset='utf-8'>
</head>
<body bgcolor="black" text="white">
<table cellpadding="2" border="1" style="font-size:13; font-family: sans-serif;>
<tr><font color="white">
<center>
<tr><center>Видеонаблюдение</center></tr>
<td>Камера 1</td> <td>Камера 2</td>
<tr><td>
<object width="520" height="330" type="application/x-shockwave-flash" classid="clsid:D27AB7DE-AE6D-11cf-96B8-444553540000">
<param name="movie" value="/flowplayer/flowplayer-3.2.7.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="bgcolor" value="#000000" />
<param name="flashvars" value='config={"clip":{"live":true, "autoPlay":true, "provider":"rtmp", "url":"rtmp://172.18.0.113:1935/1", "bufferLength":1}, "plugins":{"controls":{"url":"http://172.18.0.113/flowplayer/flowplayer.controls-3.2.5.swf", "time":true, "scrubber":false, "stop":true, "play":true}, "rtmp":{"url":"/flowplayer/flowplayer.rtmp-3.2.3.swf", "netConnectionUrl":"rtmp://172.18.0.113:1935/1"}}}'>
<embed type="application/x-shockwave-flash" src="/flowplayer/flowplayer-3.2.7.swf" width="520" height="330" bgcolor="#000000" allowscriptaccess="always" allowfullscreen="true" flashvars='config={"clip":{"live":true, "autoPlay":true, "provider":"rtmp", "url":"rtmp://172.18.0.113:1935/1", "bufferLength":1}, "plugins":{"controls":{"url":"/flowplayer/flowplayer.controls-3.2.5.swf", "time":true, "scrubber":false, "stop":true, "play":false}, "rtmp":{"url":"/flowplayer/flowplayer.rtmp-3.2.3.swf", "netConnectionUrl":"rtmp://172.18.0.113:1935/1"}}}'>
</object>

</td><td>
<object width="520" height="330" type="application/x-shockwave-flash" classid="clsid:D27AB7DE-AE6D-11cf-96B8-444553540000">
<param name="movie" value="/flowplayer/flowplayer-3.2.7.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="bgcolor" value="#000000" />
<param name="flashvars" value='config={"clip":{"live":true, "autoPlay":false, "provider":"rtmp", "url":"rtmp://172.18.0.113:1935/2", "bufferLength":1}, "plugins":{"controls":{"url":"/flowplayer/flowplayer.controls-3.2.5.swf", "time":false, "scrubber":false, "stop":true, "play":false}, "rtmp":{"url":"/flowplayer/flowplayer.rtmp-3.2.3.swf", "netConnectionUrl":"rtmp://172.18.0.113:1935/1"}}}'>
<embed type="application/x-shockwave-flash" src="/flowplayer/flowplayer-3.2.7.swf" width="520" height="330" bgcolor="#000000" allowscriptaccess="always" allowfullscreen="true" flashvars='config={"clip":{"live":true, "autoPlay":true, "provider":"rtmp", "url":"rtmp://172.18.0.113:1935/2", "bufferLength":1}, "plugins":{"controls":{"url":"/flowplayer/flowplayer.controls-3.2.5.swf", "time":false, "scrubber":false, "stop":true, "play":false}, "rtmp":{"url":"/flowplayer/flowplayer.rtmp-3.2.3.swf", "netConnectionUrl":"rtmp://172.18.0.113:1935/2"}}}'>
</object>

</td></tr>
<tr><td>Камера 3</td><td>Камера 4</td></tr>
<tr><td>
<object width="520" height="330" type="application/x-shockwave-flash" classid="clsid:D27AB7DE-AE6D-11cf-96B8-444553540000">
<param name="movie" value="/flowplayer/flowplayer-3.2.7.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="bgcolor" value="#000000" />
<param name="flashvars" value='config={"clip":{"live":true, "autoPlay":false, "provider":"rtmp", "url":"rtmp://172.18.0.113:1935/3", "bufferLength":1}, "plugins":{"controls":{"url":"/flowplayer/flowplayer.controls-3.2.5.swf", "time":false, "scrubber":false, "stop":true, "play":false}, "rtmp":{"url":"/flowplayer/flowplayer.rtmp-3.2.3.swf", "netConnectionUrl":"rtmp://172.18.0.113:1935/1"}}}'>
<embed type="application/x-shockwave-flash" src="/flowplayer/flowplayer-3.2.7.swf" width="520" height="330" bgcolor="#000000" allowscriptaccess="always" allowfullscreen="true" flashvars='config={"clip":{"live":true, "autoPlay":true, "provider":"rtmp", "url":"rtmp://172.18.0.113:1935/3", "bufferLength":1}, "plugins":{"controls":{"url":"/flowplayer/flowplayer.controls-3.2.5.swf", "time":false, "scrubber":false, "stop":true, "play":false}, "rtmp":{"url":"/flowplayer/flowplayer.rtmp-3.2.3.swf", "netConnectionUrl":"rtmp://172.18.0.113:1935/3"}}}'>
</object>
</td><td>
[code]
</td></tr>
</tr>

Edited by roysbike

Share this post


Link to post
Share on other sites

Имеет смысл всё таки отказываться от rtmp и переходить на erlyvideo 3 (flussonic), в котором есть HDS.

Share this post


Link to post
Share on other sites

Имеет смысл всё таки отказываться от rtmp и переходить на erlyvideo 3 (flussonic), в котором есть HDS.

Где можно посмотреть пример конфига для вещания h264 rtsp камеры по технологии HDS? Думаю, что это многим пригодится, так как почти у всех тут две задачи: вещание камер через web и IPTV OTT.

Edited by postuser

Share this post


Link to post
Share on other sites

Вещаю через VLC, какраз как вам и нужно.

Строка запуска:

cvlc --daemon rtsp://root:passwd@192.168.1.1/axis-media/media.amp --sout  '#transcode{acodec=none}:std{access=http,mux=ffmpeg{mux=flv}, dst=0.0.0.0:8024/stream.flv}

WEB:

<html>
<script type="text/javascript" src="flowplayer/flowplayer-3.2.11.min.js"></script>
<style>
body,html,div,a {margin:0;padding:0}
</style>
<body>
<div style="widht:320px;height:240px;">
<a href="http://192.168.100.50:8024/stream.flv" id="player"style="display: block; width: 320px; height: 240px;margin-bottom:200px"></a>
<script>flowplayer("player","http://192.168.100.50/flowplayer/flowplayer-3.2.12.swf",{
 clip:{
 autoPlay:true,
 autoBuffering:false
 }
});</script></div></body></html>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.