Jump to content

Вещание камеры на сайте

postuser
 Share

Recommended Posts

postuser

postuser

Posted
Posted

Подскажите, где я ошибся при организации трансляции камеры на 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.

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

major12

major12

Posted
Posted

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

 

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>

postuser

postuser

Posted
  • Author
Posted (edited)

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

 

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

 

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

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

Edited by postuser
roysbike

roysbike

Posted
Posted (edited)

Подскажите, где я ошибся при организации трансляции камеры на 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
  • 2 weeks later...
postuser

postuser

Posted
  • Author
Posted (edited)

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

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

Edited by postuser
peektoseen

peektoseen

Posted
Posted

Вещаю через 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>

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.

×
 Share
Go to topic listing
×
×
  • Create New...
На сайте используются файлы cookie и сервисы аналитики для корректной работы форума и улучшения качества обслуживания. Продолжая использовать сайт, вы соглашаетесь с использованием файлов cookie и с Политикой конфиденциальности.