Рубрики
Uncategorized

Живая трансляция на HTML-странице с HTML5 видео: всего за 30 минут.

Запрос на IMP: Вы больше всего можете присоединиться к форме моей команды для присоединения …. Теги с Linux, учебником, DEVOPS, JavaScript.

Запрос на 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)

Предпосылки:

  1. Сервер: Ubuntu 18 Ubuntu 18.04.3 (LTS) X64 ($ 5 USD)

  2. Некоторые команды. Просто следуй за мной…

Все эти команды доступны здесь … 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.xml

    
    

    
    
    

sudo 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







To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

---- chown -R www-data: /var/www/html

Мы в основном сделаны! Теперь пришло время посмотреть, все ли все это работает. Поток на свой сервер и откройте свой веб-сайт или файл, который мы только что создали: https://domain.net/index.html.

Оригинал: «https://dev.to/manishfoodtechs/live-broadcast-on-html-page-with-html5-video-injust-30-minutes-3pp6»