Архив метки: html

Потоковое видео rtsp на сайте

Задача: есть IP камера вещающая по протоколу rtsp. В html5 стандарте, этот протокол не поддерживается. Ни один флеш и javascript плеер, его так-же не воспроизводят. С плагинами в браузер — бред.

Решение: при помощи ngnix конвертируем видео в удобовариваемый формат. Решение стырено с: http://conture.by/post/1552#more-1552

Для начала необходимые пакеты:

apt-get install libpcre3 libpcre3-dev libssl-dev gcc build-essential unzip rtmpdump

Устанавливать nginx надо не через apt-get, а из исходников.

wget http://conture.by/wp-content/uploads/2015/06/nginx-1.8.0.tar.gz
tar -xzvf nginx-1.8.0.tar.gz
wget http://conture.by/wp-content/uploads/2015/06/nginx-rtmp-module-master.zip
unzip nginx-rtmp-module-master.zip -d nginx-rtmp-module-master
wget http://conture.by/wp-content/uploads/2015/06/ffmpeg_nginx.zip
unzip ffmpeg_nginx.zip -d /bin
chmod 777 /bin/ffmpeg_nginx
cd nginx-1.8.0
./configure --prefix=/usr --add-module=../nginx-rtmp-module-master/arut-nginx-rtmp-module-f62a083/ --pid-path=/var/run/nginx.pid --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --with-http_ssl_module
make
make install
cp ../nginx-rtmp-module-master/arut-nginx-rtmp-module-f62a083/stat.xsl /etc/nginx/stat.xsl

Далее открываем конфиг nginx расположенный /etc/nginx/nginx.conf и правим под себя. У меня он следующий…

user www-data;
worker_processes 4; # воркеры по количеству ядер процессора
pid /run/nginx.pid;
error_log  /var/log/nginx/nginx_error.log debug;
env PATH;
events {
    worker_connections 768;
}

http {
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen 88;

        # rtmp stat

        location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }

        location /stat.xsl {
            # you can move stat.xsl to a different location
            root /etc/nginx/;
        }

        location / {
            rtmp_control all;
        }


        error_page   500 502 503 504  /50x.html;

        location = /50x.html {
            root   html;
        }
    }
}

# RTMP proxy
rtmp {
    access_log /var/log/nginx/rtmp_access.log;
    server {
        listen 1935;
        ping 30s;
        notify_method get;
        # ретрансляция без звука
        application camera_1 {
            live on;
            exec_pull ffmpeg_nginx -i http://192.168.2.40:8000/71-camera1 -vcodec copy -f flv -an rtmp://localhost:1935/camera_1/live 2>>/var/log/nginx/ffmpeg_camera_1.log;
       }
       # конвертируем в меньшее разрешение без звука
        application cam_1 {
            live on;
            exec_pull ffmpeg_nginx -i http://192.168.2.40:8000/71-camera1 -threads 2 -f flv -r 25 -s 800x600 -an rtmp://localhost:1935/cam_1/live 2>>/var/log/nginx/ffmpeg_cam1.log;
       }
       # и ещё один поток...
        application infochan {
           live on;
           exec_pull ffmpeg_nginx -i http://192.168.2.40:8000/70-infokanal -threads 2 -f flv -r 25 -s 800x600 -an rtmp://localhost:1935/infochan/live 2>>/var/log/nginx/ffmpeg_infochan.log;
      }
    }
}

Проверяем корректность нашего конфига nginx:

root@kubuntu:~# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
root@kubuntu:~#

Если всё ок, то запускаем nginx:

service nginx start

Проверяем льётся ли что-нибудь на порт 1935. Выхлоп должен идти прямо в консоль.

rtmpdump -r "rtmp://127.0.0.1:1935/camera_1/live" -v
rtmpdump -r "rtmp://127.0.0.1:1935/cam_1/live" -v
rtmpdump -r "rtmp://127.0.0.1:1935/infochan/live" -v

Если есть выхлоп, то гуд. Приступаем к установке Flash-плеера на сайт. Качаем и распаковываем папку архива на сайт.
Содержимое html-страницы где будет встроен плеер должно иметь следующую структуру:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src="/jwplayer/jwplayer.js" type="text/javascript"></script>
<div id="contain">Loading the player ...</div>
<script>
jwplayer("contain").setup({
  autostart:!0,
  height:600,
  width:800,
  modes:[{
   type:"flash",
   src:"/jwplayer/player.swf",
   config:{file:"live",streamer:"rtmp://внешний_ip_сервера_rtmp/infochan",provider:"rtmp"}
  }]
});
</script>

 

Отправка сообщения на email по smtp, в utf8 с телом в html

import smtplib   
from email.mime.text import MIMEText
from email.mime.multipart import MIMEMultipart

		 msg = MIMEMultipart('alternative')
		 html_body="Внимание! У вас есть задача (№"+str(id)+") в sbss, которая уже длительное время находится в статусе ожидания! Через 3 дня она будет автоматически закрыта.. <br/><a href=https://oeirfoeriferoife.ru>"+name+"</a>".encode('utf-8')
		 msg.set_charset("utf-8")
		 msg['Subject'] = "Уведомление о длительной задаче №"+str(id);
		 msg['From'] = sbss_from_email
		 msg['To'] = m_arr["email"]		 
		 part = MIMEText(html_body, 'html', 'UTF-8')
		 msg.attach(part)
		 s = smtplib.SMTP(sbss_from_server)
		 s.login(sbss_from_email,sbss_from_pass);
		 s.set_debuglevel(1);
		 s.sendmail(sbss_from_email, m_arr["email"], msg.as_string())
		 s.quit()

Пример реализации прогресса на WEB странице

Задача: показать прогресс..ну например отправки большого количества СМС.

//запускаю таймер с периодическим срабатыванием
          var timer = setInterval(function() {
            //  отображаю прогрессбар                

$("#list2").load('predplatsmssendprogress.php?orgid='+defaultorgid+"&blibase="+$("#blibase").val()+"&grp="+$("#grp").val());                                
            }, 2000);
            // запускаю рассылку СМС
            smstxt=$("#smstext").val();
            $.get("smssend.php?orgid="+defaultorgid+"&blibase="+$("#blibase").val()+"&grp="+$("#grp").val(), { smstxt: smstxt} , function(data){                
                clearInterval(timer);
// рисуем что всё ок
                alert("Работу закончил хозяин");            
            });

Скругление «всего и вся» посредством CSS

rounded-cornersОсновная проблема «скругления», в получении кроссбраузерностни. Я использую следующий код, для «скругления»:

.round
{
border: 1px;
border-style: solid;
border-radius: 5px;
-webkit-border-radius: 5px;
}

После чего, в HTML добавляем class=»round» для того элемента углы которого хотим «скруглить», например:

<img width=200 class="round" src="foto.jpg">