HTML 5ビデオでHTML放送のライブ放送:わずか30分.
56537 ワード
impリクエスト
あなたは私のチーム form for joining に参加するために大歓迎です.
また、オープンソースのインテリジェントシステム(OSINT)に参加する場合は、オープンソースのプロジェクトを支援することができます
https://github.com/Manishfoodtechs/OSINTHRH/wiki
フレンドになりたい人.
今日、私はHTML 5ビデオを使用して生放送を行う方法を共有しています.ライブ放送は、スピーカーがあなたのウェブサイトのページを訪問するだけで多くの人々に到達するのに役立ちます.
私は高校生としてここで皆を扱うつもりです.その問題について何も知りません.この記事はレイメンのためです.
あなたは、これを知っていなければなりません!
過去には、アドビのFlashビデオ技術は、インターネットを通してビデオを届ける主要な方法でした.しかし、近年、オンラインビデオの世界で大きな変化がありました.具体的には、HLSストリーミングのようなプロトコルによって届けられて、HTML 5ビデオプレーヤーによって演奏されるオンラインビデオは、ますますAdobeのFlashプロトコルを取り替えました.
HLSから離れた他のいくつかのプロトコルは、HDS(HTTPダイナミックストリーミング)、RTMP(リアルタイムメッセージングプロトコル)、MSS(マイクロソフトスムーズストリーミング)とダイナミック適応ストリーミング(HTTP経由)です.
アップルは2009年夏にHTTP Liveストリーミング(HLS)プロトコルを初めて開始した.
最初に、HLSプロトコルはMP 4ビデオ内容を短く(10秒)チャンクにします.TSファイル拡張子(MPEG 2トランスポートストリーム).次に、HTTPサーバはそれらのストリームを保存し、HTTPはこれらの短いクリップをデバイスに視聴者に提供する.( HLSはH . 264やHEVC/H . 265コーデックでエンコードされたビデオを再生します)HTTPサーバも作成します.ビデオチャンクのインデックスとして機能するM 3 U 8プレイリストファイル(マニフェストファイルなど).この方法では、単一の品質オプションだけを使用してライブ放送を選択した場合でも、ファイルが存在します.
ここで何をするつもりですか
ngix -->ビデオストリームを取得します.HTMLページ( HTML 5ビデオ)
必要条件:
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
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*"/>
</cross-domain-policy>
sudo nano /var/www/html/info.php
<?php
phpinfo();
?>
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
----
<!DOCTYPE html>
<html>
<head>
<script src='https://DOMAIN.net/videojs/video.js'></script>
<script src="https://DOMAIN.net/videojs/videojs-http-streaming.js"></script>
<meta charset=utf-8 />
<title>LiveStream</title>
<link href="https://DOMAIN.net/videojs/video-js.min.css" rel="stylesheet">
<!-- <link href="https://DOMAIN.net/videojs/videojs-sublime-skin.min.css" rel="stylesheet"> -->
<!-- <link href="https://DOMAIN.net/videojs/videojs-sublime-skin.css" rel="stylesheet"> -->
<!-- <link href="https://DOMAIN.net/videojs/video-js.css" rel="stylesheet"> -->
<!-- <link href="https://DOMAIN.net/videojs/videojs-skin-twitchy.css" rel="stylesheet" type="text/css"> -->
</head>
<body>
<center>
<video-js id="live_stream" class="video-js vjs-fluid vjs-default-skin vjs-big-play-centered" controls preload="auto" autoplay="true" width="auto" height="auto" poster="https://DOMAIN.net/poster.jpg">
<source src="https://DOMAIN.net/live/stream/index.m3u8" type="application/x-mpegURL">
<p class='vjs-no-js'>
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
</p>
</video-js>
<script>
var player = videojs('live_stream');
player.play();
</script>
</center>
</body>
</html>
----
chown -R www-data: /var/www/html
Reference
この問題について(HTML 5ビデオでHTML放送のライブ放送:わずか30分.), 我々は、より多くの情報をここで見つけました https://dev.to/manishfoodtechs/live-broadcast-on-html-page-with-html5-video-injust-30-minutes-3pp6テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol