Архивы WEB - Страница 32 из 52

Как вставить код на JavaScript между тегами

23.06.2016 Павел Грибов WEB

Для того чтобы показать на странице отформатированный javascript код, нужно воспользоваться следующей уловкой: заменить знаки < и > соотвествующими кодами: < и > . В оезультате вставка должна получиться примерно такой:

<pre>
   &lt;script&gt;
   (function(){	
	var hcc = document.createElement("script");
	hcc.type ="text/javascript";
	hcc.async =true;
	hcc.src ="http://сайт_чат_сервера/chat_client/chat_client.js";
	var s = document.getElementsByTagName("script")[0];
	s.parentNode.insertBefore(hcc, s.nextSibling);
   })();   
   &lt;/script&gt;
</pre>

<pre>

(function(){

var hcc = document.createElement("script");

hcc.type ="text/javascript";

hcc.async =true;

hcc.src ="http://сайт_чат_сервера/chat_client/chat_client.js";

var s = document.getElementsByTagName("script")[0];

s.parentNode.insertBefore(hcc, s.nextSibling);

})();

</script>

</pre>

Оставить комментарий pre, вставка кода

Добавление текста в буфер обмена на JavaScript

22.06.2016 Павел Грибов WEB

Необходимо скопировать в буфер обмена некий текст. Задача осложнаяется тем, что браузеры позволяют скопировать в буфер, в целях безопасности только программно выделенный текст. Т.е. не получится скопировать в буфер любой текст, а возможно только тот, который находится в тегах типа input, textarea и т.п.

Решение:

Работать будет только в сборках браузеров старше 2015года!

Выводим на странице скрытый текстовый блок

<textarea style="display:none;" id="url_to_copy"></textarea>

1

<textarea style="display:none;" id="url_to_copy"></textarea>
По нажатию кнопки «Скопировать», показываем этот блок. К сожалению иначе выделение не работает, приходится показывать.
Заносим в этот блок текст необходимый для копирования в буфер
Программно выделяем текст
Убираем с глаз долой этот текстовый блок.

Как показывает практика при умелом «прятаньи» этого блока в тексте страницы, пользователь ничего не замечает.

Пример кода:

           
$("#url_to_copy" ).show();
url="https://nocfcefertelesererfe.ru/index.php?content_page=lanbilling/sos&billing_id="+$("#blibase").val()+"&agrm_id="+id;            
$("#url_to_copy").val(url);           
url_to_copy.select();
document.execCommand("copy");
$("#url_to_copy").attr("display:none");

$("#url_to_copy" ).show();

url="https://nocfcefertelesererfe.ru/index.php?content_page=lanbilling/sos&billing_id="+$("#blibase").val()+"&agrm_id="+id;

$("#url_to_copy").val(url);

url_to_copy.select();

document.execCommand("copy");

$("#url_to_copy").attr("display:none");

Оставить комментарий clipboard, javascript, буфер обмена

Синхронная загрузка ajax при использовании jQuery

18.05.2016 Павел Грибов WEB

Задача: строго последоватально подгрузить код на страницу.

Решение:

  $.ajax({
        url: "controller/server/lanbilling/listgrp.php?blibaseid="+blibaseid,        
        async: false                
    }).done(function(data) {	    
	    $("#grpd").html(data);            	
    });

$.ajax({

url: "controller/server/lanbilling/listgrp.php?blibaseid="+blibaseid,

async: false

}).done(function(data) {

$("#grpd").html(data);

});

Конечно это считается не правильным подходом, т.к. в целом замедляет загрузку страницы. Однако в некоторых случая это просто необходимо. Например, когда нужно получить некое значение из загружаемого участка, а участок не понятно, уже подгрузился или еще нет.

Оставить комментарий ajax, async, javascript, sync, синхронная загрузка, синхронное выполнение

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

18.05.2016 Павел Грибов WEB

Задача: есть 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

1	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

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;
      }
    }
}

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:~#

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

1	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

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-страницы где будет встроен плеер должно иметь следующую структуру:

<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>

Один комментарий flash, html, html5, ngnix, rtps, rtsp в браузере

Jqgrid окрашивание фона ячеек

21.04.2016 Павел Грибов WEB

Задача: при определенном условии, необходимо окрасить строку

Подводные камни:

событие afterInsertRow, в последних версиях jqgrid не работает
Навешивание события по окраске на чтото типа : {name:’price’, index:’price’, width:60, align:»center», editable: true, formatter:currencyFmatter}, результата не дает, т.к. в этот момент DOM еще не сформирован.

Решение:

По завершении отрисовки, проходимся по нужным ячейкам, и окрашиваем строку случае соответствия:

	        gridComplete:function(){
		console.log("--вставил!");
		    var mya=new Array();
		    mya=$("#list2").getDataIDs(); 
		    var data=$("#list2").getRowData(mya[0]);  
		    var colNames=new Array(); 
		    var ii=0;
		    for (var i in data){colNames[ii++]=i;}		
		    for(i=0;i<mya.length;i++){
			   data=$("#list2").getRowData(mya[i]); 			
			    console.log(data[colNames[3]]);			
			    if (data[colNames[3]]=="Access-Reject"){
				$('#'+mya[i]).css({'background-color':'#FF7700'});
			        console.log(mya[i]);
			  } else {
			      $('#'+mya[i]).css({'background-color':'#229922'});
			
			    }
			}

gridComplete:function(){

console.log("--вставил!");

var mya=new Array();

mya=$("#list2").getDataIDs();

var data=$("#list2").getRowData(mya[0]);

var colNames=new Array();

var ii=0;

for (var i in data){colNames[ii++]=i;}

for(i=0;i<mya.length;i++){

data=$("#list2").getRowData(mya[i]);

console.log(data[colNames[3]]);

if (data[colNames[3]]=="Access-Reject"){

$('#'+mya[i]).css({'background-color':'#FF7700'});

console.log(mya[i]);

} else {

$('#'+mya[i]).css({'background-color':'#229922'});

}

Оставить комментарий jqgrid, окрашивание строки, окрашивание ячейки, смена цвета фона

« 1 … 30 31 32 33 34 … 52 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31