Запрос на IMP:
Вы больше всего можете присоединиться к форме моей команды для присоединения.
Также вы можете присоединиться к интеллектуальной системе с открытым исходным кодом (Osint), если вы можете помочь в проекте открытого исходного кода в отношении защиты людей от различных заболеваний, таких как вспышка короны.
https://github.com/Manishfoodtechs/OSINTHRH/wiki
Здравствуйте, друзья и благодаря всем, кто последовал за мной.
Сегодня я делюсь, как вы можете использовать видео HTML5, чтобы сделать трансляцию в прямом эфире. Живая трансляция может помочь докладчику достичь многих людей, просто посетив страницу вашего сайта.
Я собираюсь относиться к всем здесь как ученики средней школы. То есть мы ничего не знаем о предмете. Так что эта статья для слоев.
КРАТКИЙ БОЛЬШОЙ: Вы должны знать это !!! В прошлом Adobe Flash Video Technology была основным способом доставки видео через Интернет. В последние годы, однако, был главным сдвигом в мире онлайн-видео. В частности, онлайн-видео, доставляемые протоколами, такими как HLS Treaking и играют видеоигустами HTML5, все чаще заменили протокол Flash Adobe.
Несколько других протоколов, кроме HLS HDS (HTTP Dynamic Treaking), RTMP (Протокол обмена сообщениями в реальном времени), MSS (Microsoft Packred Treaking) и динамическая адаптивная потоковая передача (по сравнению с http).
Apple впервые запустила протокол Live Treaking (HLS) HTTP летом 2009 года.
Во-первых, протокол HLS отбившись до видеоконтента MP4 в короткие (10-секунды) куски с расширением файлов .ts (транспортировка MPEG2). Далее HTTP-сервер хранит эти потоки, а HTTP обеспечивает эти короткие зажимы для зрителей на своих устройствах. (HLS будет воспроизводить видео, закодированное с помощью кодеков H.264 или HEVC/H.265.) HTTP-сервер также создает файл списка воспроизведения .m3u8 (файл mainestex e.g.), который служит индексом для блоков видео. Таким образом, даже если вы решите транслироваться в прямом эфире, используя только одно качество, файл все равно будет существовать.
Что мы собираемся сделать здесь: NGIX -> Получить RTMP видеопоток —> Video.js -> HTML-страница (HTML5 Video)
Предпосылки:
Сервер: Ubuntu 18 Ubuntu 18.04.3 (LTS) X64 ($ 5 USD)
Некоторые команды. Просто следуй за мной…
Все эти команды доступны здесь … https://gist.github.com/Manishfoodtechs/5feb532fb626ece6a92698a1e5b6a984
# 1: Install Nginx + RTMP module. sudo apt install -y nginx sudo apt install -y libnginx-mod-rtmp # 2: Installing required & additional software. sudo apt install -y software-properties-common sudo add-apt-repository ppa:certbot/certbot sudo dpkg --add-architecture i386 sudo apt update sudo apt install wget nano python-certbot-nginx ufw unzip software-properties-common dpkg-dev git make gcc automake build-essential joe ntp ntpdate zlib1g-dev libpcre3 libpcre3-dev libssl-dev libxslt1-dev libxml2-dev libgd-dev libgeoip-dev libgoogle-perftools-dev libperl-dev pkg-config autotools-dev gpac ffmpeg sysstat nasm yasm mediainfo mencoder lame libvorbisenc2 libvorbisfile3 libx264-dev libvo-aacenc-dev libmp3lame-dev libopus-dev libfdk-aac-dev libavcodec-dev libavformat-dev libavutil-dev g++ libc6:i386 freeglut3-dev libx11-dev libxmu-dev libxi-dev libglu1-mesa libglu1-mesa-dev OPTIONAL! sudo apt install mariadb-server mariadb-client phpmyadmin php php-cgi php-common php-pear php-mbstring php-fpm # 3: Setup a firewall and perform other required steps. cd /usr/src git clone https://github.com/arut/nginx-rtmp-module cp /usr/src/nginx-rtmp-module/stat.xsl /var/www/html/stat.xsl sudo nano /var/www/html/crossdomain.xmlsudo nano /var/www/html/info.php wget -O /var/www/html/poster.jpg https://i.imgur.com/gTeWLDO.jpg sudo mkdir /var/livestream sudo mkdir /var/livestream/hls sudo chown -R www-data: /var/livestream sudo ufw allow 22/tcp sudo ufw allow 80/tcp sudo ufw allow 443/tcp sudo ufw allow 10000/tcp sudo ufw allow 1935 sudo nano /etc/nginx/nginx.conf #4. Ngnix configurations On line 2 change the worker_processes option from auto to 1, so it says: worker_processes 1; Scroll all the way down and add the following at the end of the file, or something similar if you're situation requires other variables (use your brain :-) ---- rtmp { server { listen 1935; chunk_size 8192; application live { live on; interleave off; meta on; wait_key on; wait_video on; idle_streams off; sync 300ms; session_relay on; allow publish all; allow play all; max_connections 1000; ## == FORWARD STREAM (OPTIONAL) == ## # == == TWITCH RE-STREAM == == # # push rtmp://live-ams.twitch.tv/app/LIVESTREAM_KEY; # == == YOUTUBE RE-STREAM == == # # push rtmp://a.rtmp.youtube.com/live2/LIVESTREAM_KEY; # == == MIXER.com RE-STREAM == == # # push rtmp://ingest-ams.mixer.com:1935/beam/LIVESTREAM_KEY; publish_notify off; # play_restart off; # on_publish http://your-website/on_publish.php; # on_play http://your-website/on_play.php; # on_record_done http://your-website/on_record_done.php; ## == HLS == ## hls off; # hls_nested on; # hls_path /var/livestream/hls/live; # hls_base_url http://abc.de:1953/hls; # hls_playlist_length 60s; # hls_fragment 10s; # hls_sync 100ms; # hls_cleanup on; ## == DASH == ## dash off; # dash_nested on; # dash_path /var/livestream/dash; # dash_fragment 10s; # dash_playlist_length 60s; # dash_cleanup on; push rtmp://localhost/hls; } application hls { live on; allow play all; hls on; hls_type live; hls_nested on; hls_path /var/livestream/hls; hls_cleanup on; hls_sync 100ms; hls_fragment 10s; hls_playlist_length 60s; hls_fragment_naming system; } } } ---- nginx -t sudo systemctl restart nginx sudo nano /etc/nginx/sites-available/default ---- server { listen 80 default_server; listen [::]:80 default_server; # listen 443 ssl http2 default_server; # listen [::]:443 ssl default_server; # include snippets/snakeoil.conf; keepalive_timeout 70; gzip off; root /var/www/html; # Add index.php to the list if you are using PHP index index.php index.nginx-debian.html index.html index.htm; server_name _; # add_header Strict-Transport-Security "max-age=63072000;"; # add_header X-Frame-Options "DENY"; location / { location ~* \.m3u8$ { add_header Cache-Control no-cache; } add_header Access-Control-Allow-Origin *; # First attempt to serve request as file, then as directory, then fall back to displaying a 404. try_files $uri $uri/ =404; } location ~ \.php$ { include snippets/fastcgi-php.conf; # # With php-fpm (or other unix sockets): fastcgi_pass unix:/var/run/php/php7.2-fpm.sock; # # With php-cgi (or other tcp sockets): # fastcgi_pass 127.0.0.1:9000; } ## deny access to .htaccess files, if Apache's document root concurs with nginx's one #location ~ /\.ht { # deny all; #} ## This provides RTMP statistics in XML at http://domain.net/stat location /stat { rtmp_stat all; rtmp_stat_stylesheet stat.xsl; # auth_basic "Restricted Content"; # auth_basic_user_file /etc/nginx/.htpasswd; } ## XML stylesheet to view RTMP stats. Copy stat.xsl wherever you want and put the full directory path here location /stat.xsl { root /var/www/html/; } } ---- nginx -t sudo systemctl restart nginx # Obviously you need to change the DOMAIN part in the next lines to whatever your domain name is. sudo nano /etc/nginx/sites-available/DOMAIN.net.conf # Add the following to this new file, but don't forget to change DOMAIN first! ---- server { listen 80; listen [::]:80; root /var/www/html; server_name DOMAIN.net www.DOMAIN.net; } ---- nginx -t ln -s /etc/nginx/sites-available/DOMAIN.net.conf /etc/nginx/sites-enabled/DOMAIN.net.conf nginx -t sudo systemctl restart nginx # 5: Confirm that the RTMP stream works. (seeany youtube video how to run RTMP link in VLC) # 6: Create SSL certificates for Nginx sudo openssl dhparam -out /etc/ssl/certs/dhparam.pem 4096 sudo certbot --nginx -d DOMAIN.net -d www.DOMAIN.net sudo crontab -e 0 12 * * * /usr/bin/certbot renew --quiet sudo nano /etc/nginx/sites-available/DOMAIN.net.conf --- erver { listen 80; listen [::]:80; listen 443 ssl http2; listen [::]:443 ssl; # include snippets/snakeoil.conf; keepalive_timeout 70; gzip off; root /var/www/html; # Add index.php to the list if you are using PHP index index.php index.nginx-debian.html index.html index.htm; server_name DOMAIN.COM; ssl_certificate /etc/letsencrypt/live/DOMAIN.COM/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/DOMAIN.COM/privkey.pem; ssl_trusted_certificate /etc/letsencrypt/live/DOMAIN.COM/chain.pem; ssl_dhparam /etc/ssl/certs/dhparam.pem; ssl_protocols TLSv1.2 TLSv1.3; ssl_session_cache shared:le_nginx_SSL:1m; ssl_session_timeout 1440m; ssl_prefer_server_ciphers on; ssl_session_tickets off; ssl_stapling off; ssl_stapling_verify on; resolver 8.8.8.8 8.8.4.4 valid=300s; resolver_timeout 5s; ssl_ecdh_curve secp384r1; ssl_ciphers "EECDH+AESGCM:EDH+AESGCM:ECDHE-RSA-AES128-GCM-SHA256:AES256+EECDH:DHE-RSA-AES128-GCM-SHA256:AES256+EDH:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA256:ECDHE-RSA-AES256-SHA:ECDHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES128-SHA256:DHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES256-GCM-SHA384:AES128-GCM-SHA256:AES256-SHA256:AES128-SHA256:AES256-SHA:AES128-SHA:DES-CBC3-SHA:HIGH:!aNULL:!eNULL:!EXPORT:!DES:!MD5:!PSK:!RC4"; add_header Strict-Transport-Security "max-age=63072000;"; add_header X-Frame-Options "DENY"; # Redirect non-https traffic to https # if ($scheme != "https") { # return 301 https://$host$request_uri; # } location / { location ~* \.m3u8$ { add_header Cache-Control no-cache; } add_header Access-Control-Allow-Origin *; # First attempt to serve file, then as directory, then a 404. try_files $uri $uri/ =404; } # pass PHP scripts to FastCGI server location ~ \.php$ { include snippets/fastcgi-php.conf; # # With php-fpm (or other unix sockets): fastcgi_pass unix:/var/run/php/php7.2-fpm.sock; # # With php-cgi (or other tcp sockets): # fastcgi_pass 127.0.0.1:9000; } # deny access to .htaccess files, if Apache's document root concurs with nginx's one #location ~ /\.ht { # deny all; #} # This provides RTMP statistics in XML at http://your-server-address/stat location /stat { rtmp_stat all; rtmp_stat_stylesheet stat.xsl; # auth_basic "Restricted Content"; # auth_basic_user_file /etc/nginx/.htpasswd; } # XML stylesheet to view RTMP stats. Copy stat.xsl wherever you want and put the full directory path here location /stat.xsl { root /var/www/html/; } # Control interface (extremely useful, but can also boot people from streams so we put basic auth in front of it - see https://github.com/arut/nginx-rtmp-module/wiki/Control-module for more info #location /control { # you'll need a htpasswd auth file, that's outside the scope of this doc but any apache one will work # auth_basic "Restricted Content"; # auth_basic_user_file /etc/nginx/.htpasswd; #rtmp_control all; #} #creates the http-location for our full-res desktop HLS stream "http://my-ip/live/my-stream-key/index.m3u8" location /live { # root /var/livestream/hls; alias /var/livestream/hls; expires -1; autoindex on; autoindex_localtime on; # CORS setup # set $sent_http_accept_ranges bytes; add_header 'Cache-Control' 'no-cache'; add_header Cache-Control no-cache; add_header 'Access-Control-Allow-Origin' '*' always; add_header 'Access-Control-Expose-Headers' 'Content-Length'; # allow CORS preflight requests # if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Max-Age' 1728000; add_header 'Content-Type' 'text/plain charset=UTF-8'; add_header 'Content-Length' 0; return 204; } types { application/vnd.apple.mpegurl m3u8; application/dash+xml mpd; video/mp2t ts; } } } ---- nginx -t sudo systemctl restart nginx # 7: Video.js installation & and example index.html sudo mkdir /var/www/html/videojs cd /var/www/html/videojs wget https://github.com/videojs/video.js/releases/download/v7.7.6/video-js-7.7.6.zip wget https://github.com/videojs/http-streaming/releases/download/v1.13.1/videojs-http-streaming.js unzip /var/www/html/videojs/video-js-7.7.6.zip chown -R www-data: /var/www/html ls -la /var/www/html/videojs sudo nano /var/www/html/index.html ---- LiveStream ---- chown -R www-data: /var/www/html To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
Мы в основном сделаны! Теперь пришло время посмотреть, все ли все это работает. Поток на свой сервер и откройте свой веб-сайт или файл, который мы только что создали: https://domain.net/index.html.
Оригинал: «https://dev.to/manishfoodtechs/live-broadcast-on-html-page-with-html5-video-injust-30-minutes-3pp6»