[{"data":1,"prerenderedAt":3445},["ShallowReactive",2],{"tag-nginx-1":3},{"count":4,"content":5},2,[6,2110],{"id":7,"title":8,"body":9,"category":2093,"createdAt":2095,"description":2096,"extension":2097,"index":4,"meta":2098,"navigation":63,"path":2099,"publish":63,"seo":2100,"series":2101,"seriesTitle":2102,"stem":2103,"tag":2104,"thumbnail":2107,"updatedAt":2108,"__hash__":2109},"series\u002Fseries\u002Frtmp-manager-server-2.md","配信中継サーバ開発2：ffmpegを用いたyoutubeへのテスト配信とローカルデバッグ環境の構築",{"type":10,"value":11,"toc":2072},"minimark",[12,16,21,24,37,40,44,47,66,69,72,83,86,136,156,461,464,746,748,957,964,1111,1114,1517,1520,1523,1526,1529,1622,1649,1652,1656,1663,1669,1675,1686,1690,1693,1697,1700,1712,1715,1718,1721,1727,1733,1737,1744,1750,1763,1766,1769,1772,1776,1779,1789,1794,1797,1800,1803,1806,1811,1814,1817,1820,1823,1826,1829,1832,1835,1846,1849,1852,1855,1858,1862,1865,1999,2009,2015,2021,2024,2027,2033,2040,2043,2046,2049,2052,2068],[13,14,15],"p",{},"こんにちはjunです。前回の記事から2年も経ってしまいましたが、サイクリング欲が再度湧いてきたのでこの内容を完成させるように頑張ります。ではとりあえず前回はgoproからdockerのRTMPサーバに送信してローカルマシン上で見れるかを確かめました。最終的には以下のような構成を開発します。（その１のものと変わっています）",[17,18],"image-render",{":src":19,":width":20},"'rtmp-docker-local\u002Ffig2.jpg'","'100%'",[13,22,23],{},"今回の記事は",[25,26,27,31,34],"ul",{},[28,29,30],"li",{},"上記図の環境をローカルでdockerで構築する",[28,32,33],{},"管理用サーバ上のffmpegを用いてyoutubeにgoproの映像を中継してライブする",[28,35,36],{},"ローカルで簡単に配信をデバッグできる環境を構築する\nの3点を解説したいと思います。",[13,38,39],{},"これらの内容をまずローカルで実装するためにDockerを用いて構築します。使用しているOSはmacOs Ventura 13.4.1でdockerは4.17.0です。また前回から2年たっているのでdockerfileなどを修正します。",[41,42,43],"h2",{"id":43},"完成品",[13,45,46],{},"この記事でのゴールはこんな感じです。（字幕ON推奨）",[48,49,50],"div",{},[51,52,53,64],"no-ssr",{},[54,55],"iframe",{"width":56,"height":57,"src":58,"title":59,"frameBorder":60,"allow":61,"referrerPolicy":62,"allowFullScreen":63},"100%","400px","https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FTY61fzShv30?si=a72lxLH1mvLsYTma","YouTube video player","0","accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share","strict-origin-when-cross-origin",true,[51,65],{},[41,67,68],{"id":68},"全ファイル構成",[13,70,71],{},"とりあえず完成した必要なファイルと構成を載せます。",[73,74,79],"pre",{"className":75,"code":77,"language":78},[76],"language-text",".\n├── Dockerfile\n├── conf\n│   ├── 000-default.conf\n│   ├── default.conf\n│   └── nginx.conf\n├── debug\n│   └── index.html\n├── docker-compose.yml\n└── src\n    └── public\n        └── test.html\n","text",[80,81,77],"code",{"__ignoreMap":82},"",[13,84,85],{},"Dockerfileは管理用コンテナの構成に変更。あとでwebフレームワークのlumenを入れるためにcomposerを入れています。（この回では入れません）。そしてffmpegを入れておきます。",[73,87,91],{"className":88,"code":89,"language":90,"meta":82,"style":82},"language-Dockerfile shiki shiki-themes material-theme-ocean","FROM php:apache\nCOPY --from=composer \u002Fusr\u002Fbin\u002Fcomposer \u002Fusr\u002Fbin\u002Fcomposer\nRUN curl -O https:\u002F\u002Fjohnvansickle.com\u002Fffmpeg\u002Freleases\u002Fffmpeg-release-amd64-static.tar.xz && \\\n    tar -xJf ffmpeg-release-amd64-static.tar.xz && \\\n    mv ffmpeg-*\u002Fffmpeg \u002Fusr\u002Flocal\u002Fbin\u002F && \\\n    mv ffmpeg-*\u002Fffprobe \u002Fusr\u002Flocal\u002Fbin\u002F && \\\n    rm -rf ffmpeg-*\n","Dockerfile",[80,92,93,101,106,112,118,124,130],{"__ignoreMap":82},[94,95,98],"span",{"class":96,"line":97},"line",1,[94,99,100],{},"FROM php:apache\n",[94,102,103],{"class":96,"line":4},[94,104,105],{},"COPY --from=composer \u002Fusr\u002Fbin\u002Fcomposer \u002Fusr\u002Fbin\u002Fcomposer\n",[94,107,109],{"class":96,"line":108},3,[94,110,111],{},"RUN curl -O https:\u002F\u002Fjohnvansickle.com\u002Fffmpeg\u002Freleases\u002Fffmpeg-release-amd64-static.tar.xz && \\\n",[94,113,115],{"class":96,"line":114},4,[94,116,117],{},"    tar -xJf ffmpeg-release-amd64-static.tar.xz && \\\n",[94,119,121],{"class":96,"line":120},5,[94,122,123],{},"    mv ffmpeg-*\u002Fffmpeg \u002Fusr\u002Flocal\u002Fbin\u002F && \\\n",[94,125,127],{"class":96,"line":126},6,[94,128,129],{},"    mv ffmpeg-*\u002Fffprobe \u002Fusr\u002Flocal\u002Fbin\u002F && \\\n",[94,131,133],{"class":96,"line":132},7,[94,134,135],{},"    rm -rf ffmpeg-*\n",[25,137,138,144,150],{},[28,139,140,143],{},[80,141,142],{},"rtmptarget","がテスト配信先コンテナ",[28,145,146,149],{},[80,147,148],{},"rtmp","がGorpoなどからの受信用コンテナ",[28,151,152,155],{},[80,153,154],{},"php","が管理用web uiや配信媒体へ送信する処理を行うコンテナ",[73,157,162],{"className":158,"code":159,"filename":160,"language":161,"meta":82,"style":82},"language-yml shiki shiki-themes material-theme-ocean","version: '2'\nservices:\n  rtmptarget:\n    image: tiangolo\u002Fnginx-rtmp\n    ports:\n      - \"1930:1935\"\n      - \"1931:80\"\n    volumes:\n      - .\u002Fconf\u002Fnginx.conf:\u002Fetc\u002Fnginx\u002Fnginx.conf\n      - .\u002Fconf\u002Fdefault.conf:\u002Fetc\u002Fnginx\u002Fconf.d\u002Fdefault.conf\n      - .\u002Fdebug:\u002Fusr\u002Fshare\u002Fnginx\u002F\n  rtmp:\n    image: tiangolo\u002Fnginx-rtmp\n    ports:\n      - \"1935:1935\"\n    volumes:\n      - shared_data:\u002Fusr\u002Fshare\u002Fnginx\u002Fhls\n      - .\u002Fconf\u002Fnginx.conf:\u002Fetc\u002Fnginx\u002Fnginx.conf\n  php:\n    build: .\n    expose:\n      - 1935\n    ports:\n      - \"8080:80\"\n    volumes:\n      - shared_data:\u002Fvar\u002Fwww\u002Fhtml\u002Fhls\n      - .\u002Fsrc:\u002Fvar\u002Fwww\u002Fhtml\n      - .\u002Fconf\u002F.htpasswd:\u002Fvar\u002Fwww\u002F.htpasswd\n      - .\u002Fconf\u002F000-default.conf:\u002Fetc\u002Fapache2\u002Fsites-enabled\u002F000-default.conf\n    extra_hosts:\n      - \"host.docker.internal:host-gateway\"\nvolumes:\n  shared_data:\n","docker-compose.yml","yml",[80,163,164,184,192,199,209,216,230,241,249,257,265,273,281,290,297,309,316,324,331,339,351,359,367,374,386,393,401,409,417,425,433,445,453],{"__ignoreMap":82},[94,165,166,170,174,177,181],{"class":96,"line":97},[94,167,169],{"class":168},"s-wAU","version",[94,171,173],{"class":172},"sAklC",":",[94,175,176],{"class":172}," '",[94,178,180],{"class":179},"sfyAc","2",[94,182,183],{"class":172},"'\n",[94,185,186,189],{"class":96,"line":4},[94,187,188],{"class":168},"services",[94,190,191],{"class":172},":\n",[94,193,194,197],{"class":96,"line":108},[94,195,196],{"class":168},"  rtmptarget",[94,198,191],{"class":172},[94,200,201,204,206],{"class":96,"line":114},[94,202,203],{"class":168},"    image",[94,205,173],{"class":172},[94,207,208],{"class":179}," tiangolo\u002Fnginx-rtmp\n",[94,210,211,214],{"class":96,"line":120},[94,212,213],{"class":168},"    ports",[94,215,191],{"class":172},[94,217,218,221,224,227],{"class":96,"line":126},[94,219,220],{"class":172},"      -",[94,222,223],{"class":172}," \"",[94,225,226],{"class":179},"1930:1935",[94,228,229],{"class":172},"\"\n",[94,231,232,234,236,239],{"class":96,"line":132},[94,233,220],{"class":172},[94,235,223],{"class":172},[94,237,238],{"class":179},"1931:80",[94,240,229],{"class":172},[94,242,244,247],{"class":96,"line":243},8,[94,245,246],{"class":168},"    volumes",[94,248,191],{"class":172},[94,250,252,254],{"class":96,"line":251},9,[94,253,220],{"class":172},[94,255,256],{"class":179}," .\u002Fconf\u002Fnginx.conf:\u002Fetc\u002Fnginx\u002Fnginx.conf\n",[94,258,260,262],{"class":96,"line":259},10,[94,261,220],{"class":172},[94,263,264],{"class":179}," .\u002Fconf\u002Fdefault.conf:\u002Fetc\u002Fnginx\u002Fconf.d\u002Fdefault.conf\n",[94,266,268,270],{"class":96,"line":267},11,[94,269,220],{"class":172},[94,271,272],{"class":179}," .\u002Fdebug:\u002Fusr\u002Fshare\u002Fnginx\u002F\n",[94,274,276,279],{"class":96,"line":275},12,[94,277,278],{"class":168},"  rtmp",[94,280,191],{"class":172},[94,282,284,286,288],{"class":96,"line":283},13,[94,285,203],{"class":168},[94,287,173],{"class":172},[94,289,208],{"class":179},[94,291,293,295],{"class":96,"line":292},14,[94,294,213],{"class":168},[94,296,191],{"class":172},[94,298,300,302,304,307],{"class":96,"line":299},15,[94,301,220],{"class":172},[94,303,223],{"class":172},[94,305,306],{"class":179},"1935:1935",[94,308,229],{"class":172},[94,310,312,314],{"class":96,"line":311},16,[94,313,246],{"class":168},[94,315,191],{"class":172},[94,317,319,321],{"class":96,"line":318},17,[94,320,220],{"class":172},[94,322,323],{"class":179}," shared_data:\u002Fusr\u002Fshare\u002Fnginx\u002Fhls\n",[94,325,327,329],{"class":96,"line":326},18,[94,328,220],{"class":172},[94,330,256],{"class":179},[94,332,334,337],{"class":96,"line":333},19,[94,335,336],{"class":168},"  php",[94,338,191],{"class":172},[94,340,342,345,347],{"class":96,"line":341},20,[94,343,344],{"class":168},"    build",[94,346,173],{"class":172},[94,348,350],{"class":349},"sx098"," .\n",[94,352,354,357],{"class":96,"line":353},21,[94,355,356],{"class":168},"    expose",[94,358,191],{"class":172},[94,360,362,364],{"class":96,"line":361},22,[94,363,220],{"class":172},[94,365,366],{"class":349}," 1935\n",[94,368,370,372],{"class":96,"line":369},23,[94,371,213],{"class":168},[94,373,191],{"class":172},[94,375,377,379,381,384],{"class":96,"line":376},24,[94,378,220],{"class":172},[94,380,223],{"class":172},[94,382,383],{"class":179},"8080:80",[94,385,229],{"class":172},[94,387,389,391],{"class":96,"line":388},25,[94,390,246],{"class":168},[94,392,191],{"class":172},[94,394,396,398],{"class":96,"line":395},26,[94,397,220],{"class":172},[94,399,400],{"class":179}," shared_data:\u002Fvar\u002Fwww\u002Fhtml\u002Fhls\n",[94,402,404,406],{"class":96,"line":403},27,[94,405,220],{"class":172},[94,407,408],{"class":179}," .\u002Fsrc:\u002Fvar\u002Fwww\u002Fhtml\n",[94,410,412,414],{"class":96,"line":411},28,[94,413,220],{"class":172},[94,415,416],{"class":179}," .\u002Fconf\u002F.htpasswd:\u002Fvar\u002Fwww\u002F.htpasswd\n",[94,418,420,422],{"class":96,"line":419},29,[94,421,220],{"class":172},[94,423,424],{"class":179}," .\u002Fconf\u002F000-default.conf:\u002Fetc\u002Fapache2\u002Fsites-enabled\u002F000-default.conf\n",[94,426,428,431],{"class":96,"line":427},30,[94,429,430],{"class":168},"    extra_hosts",[94,432,191],{"class":172},[94,434,436,438,440,443],{"class":96,"line":435},31,[94,437,220],{"class":172},[94,439,223],{"class":172},[94,441,442],{"class":179},"host.docker.internal:host-gateway",[94,444,229],{"class":172},[94,446,448,451],{"class":96,"line":447},32,[94,449,450],{"class":168},"volumes",[94,452,191],{"class":172},[94,454,456,459],{"class":96,"line":455},33,[94,457,458],{"class":168},"  shared_data",[94,460,191],{"class":172},[13,462,463],{},"主にRTMPサーバ用の内容です。",[73,465,470],{"className":466,"code":467,"filename":468,"language":469,"meta":82,"style":82},"language-conf shiki shiki-themes material-theme-ocean","worker_processes  auto;\n\nerror_log  \u002Fvar\u002Flog\u002Fnginx\u002Ferror.log notice;\npid        \u002Fvar\u002Frun\u002Fnginx.pid;\n\n\nevents {\n    worker_connections  1024;\n}\n\nrtmp_auto_push on;\n\nrtmp {\n    server {\n        listen 1935;\n        listen [::]:1935 ipv6only=on;\n        access_log \u002Fvar\u002Flog\u002Frtmp_access.log;\n        chunk_size 4096;\n        timeout 10s;\n\n        application live {\n            live on;\n\n            # HLSの記述欄\n            hls on;\n            # ここに映像ファイルが配置される\n            hls_path \u002Fusr\u002Fshare\u002Fnginx\u002Fhls;\n            hls_fragment 10s;\n            hls_playlist_length 30s;\n        }\n    }\n}\n\n\n\nhttp {\n    include       \u002Fetc\u002Fnginx\u002Fmime.types;\n    default_type  application\u002Foctet-stream;\n\n    log_format  main  '$remote_addr - $remote_user [$time_local] \"$request\" '\n                      '$status $body_bytes_sent \"$http_referer\" '\n                      '\"$http_user_agent\" \"$http_x_forwarded_for\"';\n\n    access_log  \u002Fvar\u002Flog\u002Fnginx\u002Faccess.log  main;\n\n    sendfile        on;\n    #tcp_nopush     on;\n\n    keepalive_timeout  65;\n\n    #gzip  on;\n\n    include \u002Fetc\u002Fnginx\u002Fconf.d\u002F*.conf;\n}\n","conf\u002Fnginx.conf","conf",[80,471,472,477,482,487,492,496,500,505,510,515,519,524,528,533,538,543,548,553,558,563,567,572,577,581,586,591,596,601,606,611,616,621,625,629,634,639,645,651,657,662,668,674,680,685,691,696,702,708,713,719,724,730,735,741],{"__ignoreMap":82},[94,473,474],{"class":96,"line":97},[94,475,476],{},"worker_processes  auto;\n",[94,478,479],{"class":96,"line":4},[94,480,481],{"emptyLinePlaceholder":63},"\n",[94,483,484],{"class":96,"line":108},[94,485,486],{},"error_log  \u002Fvar\u002Flog\u002Fnginx\u002Ferror.log notice;\n",[94,488,489],{"class":96,"line":114},[94,490,491],{},"pid        \u002Fvar\u002Frun\u002Fnginx.pid;\n",[94,493,494],{"class":96,"line":120},[94,495,481],{"emptyLinePlaceholder":63},[94,497,498],{"class":96,"line":126},[94,499,481],{"emptyLinePlaceholder":63},[94,501,502],{"class":96,"line":132},[94,503,504],{},"events {\n",[94,506,507],{"class":96,"line":243},[94,508,509],{},"    worker_connections  1024;\n",[94,511,512],{"class":96,"line":251},[94,513,514],{},"}\n",[94,516,517],{"class":96,"line":259},[94,518,481],{"emptyLinePlaceholder":63},[94,520,521],{"class":96,"line":267},[94,522,523],{},"rtmp_auto_push on;\n",[94,525,526],{"class":96,"line":275},[94,527,481],{"emptyLinePlaceholder":63},[94,529,530],{"class":96,"line":283},[94,531,532],{},"rtmp {\n",[94,534,535],{"class":96,"line":292},[94,536,537],{},"    server {\n",[94,539,540],{"class":96,"line":299},[94,541,542],{},"        listen 1935;\n",[94,544,545],{"class":96,"line":311},[94,546,547],{},"        listen [::]:1935 ipv6only=on;\n",[94,549,550],{"class":96,"line":318},[94,551,552],{},"        access_log \u002Fvar\u002Flog\u002Frtmp_access.log;\n",[94,554,555],{"class":96,"line":326},[94,556,557],{},"        chunk_size 4096;\n",[94,559,560],{"class":96,"line":333},[94,561,562],{},"        timeout 10s;\n",[94,564,565],{"class":96,"line":341},[94,566,481],{"emptyLinePlaceholder":63},[94,568,569],{"class":96,"line":353},[94,570,571],{},"        application live {\n",[94,573,574],{"class":96,"line":361},[94,575,576],{},"            live on;\n",[94,578,579],{"class":96,"line":369},[94,580,481],{"emptyLinePlaceholder":63},[94,582,583],{"class":96,"line":376},[94,584,585],{},"            # HLSの記述欄\n",[94,587,588],{"class":96,"line":388},[94,589,590],{},"            hls on;\n",[94,592,593],{"class":96,"line":395},[94,594,595],{},"            # ここに映像ファイルが配置される\n",[94,597,598],{"class":96,"line":403},[94,599,600],{},"            hls_path \u002Fusr\u002Fshare\u002Fnginx\u002Fhls;\n",[94,602,603],{"class":96,"line":411},[94,604,605],{},"            hls_fragment 10s;\n",[94,607,608],{"class":96,"line":419},[94,609,610],{},"            hls_playlist_length 30s;\n",[94,612,613],{"class":96,"line":427},[94,614,615],{},"        }\n",[94,617,618],{"class":96,"line":435},[94,619,620],{},"    }\n",[94,622,623],{"class":96,"line":447},[94,624,514],{},[94,626,627],{"class":96,"line":455},[94,628,481],{"emptyLinePlaceholder":63},[94,630,632],{"class":96,"line":631},34,[94,633,481],{"emptyLinePlaceholder":63},[94,635,637],{"class":96,"line":636},35,[94,638,481],{"emptyLinePlaceholder":63},[94,640,642],{"class":96,"line":641},36,[94,643,644],{},"http {\n",[94,646,648],{"class":96,"line":647},37,[94,649,650],{},"    include       \u002Fetc\u002Fnginx\u002Fmime.types;\n",[94,652,654],{"class":96,"line":653},38,[94,655,656],{},"    default_type  application\u002Foctet-stream;\n",[94,658,660],{"class":96,"line":659},39,[94,661,481],{"emptyLinePlaceholder":63},[94,663,665],{"class":96,"line":664},40,[94,666,667],{},"    log_format  main  '$remote_addr - $remote_user [$time_local] \"$request\" '\n",[94,669,671],{"class":96,"line":670},41,[94,672,673],{},"                      '$status $body_bytes_sent \"$http_referer\" '\n",[94,675,677],{"class":96,"line":676},42,[94,678,679],{},"                      '\"$http_user_agent\" \"$http_x_forwarded_for\"';\n",[94,681,683],{"class":96,"line":682},43,[94,684,481],{"emptyLinePlaceholder":63},[94,686,688],{"class":96,"line":687},44,[94,689,690],{},"    access_log  \u002Fvar\u002Flog\u002Fnginx\u002Faccess.log  main;\n",[94,692,694],{"class":96,"line":693},45,[94,695,481],{"emptyLinePlaceholder":63},[94,697,699],{"class":96,"line":698},46,[94,700,701],{},"    sendfile        on;\n",[94,703,705],{"class":96,"line":704},47,[94,706,707],{},"    #tcp_nopush     on;\n",[94,709,711],{"class":96,"line":710},48,[94,712,481],{"emptyLinePlaceholder":63},[94,714,716],{"class":96,"line":715},49,[94,717,718],{},"    keepalive_timeout  65;\n",[94,720,722],{"class":96,"line":721},50,[94,723,481],{"emptyLinePlaceholder":63},[94,725,727],{"class":96,"line":726},51,[94,728,729],{},"    #gzip  on;\n",[94,731,733],{"class":96,"line":732},52,[94,734,481],{"emptyLinePlaceholder":63},[94,736,738],{"class":96,"line":737},53,[94,739,740],{},"    include \u002Fetc\u002Fnginx\u002Fconf.d\u002F*.conf;\n",[94,742,744],{"class":96,"line":743},54,[94,745,514],{},[13,747,463],{},[73,749,752],{"className":466,"code":750,"filename":751,"language":469,"meta":82,"style":82},"server {\n    listen       80;\n    listen  [::]:80;\n    server_name  localhost;\n\n    #access_log  \u002Fvar\u002Flog\u002Fnginx\u002Fhost.access.log  main;\n\n    location \u002F {\n        root   \u002Fusr\u002Fshare\u002Fnginx;\n        index  index.html index.htm;\n    }\n\n    #error_page  404              \u002F404.html;\n\n    # redirect server error pages to the static page \u002F50x.html\n    #\n    error_page   500 502 503 504  \u002F50x.html;\n    location = \u002F50x.html {\n        root   \u002Fusr\u002Fshare\u002Fnginx;\n    }\n\n    # proxy the PHP scripts to Apache listening on 127.0.0.1:80\n    #\n    #location ~ \\.php$ {\n    #    proxy_pass   http:\u002F\u002F127.0.0.1;\n    #}\n\n    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000\n    #\n    #location ~ \\.php$ {\n    #    root           html;\n    #    fastcgi_pass   127.0.0.1:9000;\n    #    fastcgi_index  index.php;\n    #    fastcgi_param  SCRIPT_FILENAME  \u002Fscripts$fastcgi_script_name;\n    #    include        fastcgi_params;\n    #}\n\n    # deny access to .htaccess files, if Apache's document root\n    # concurs with nginx's one\n    #\n    #location ~ \u002F\\.ht {\n    #    deny  all;\n    #}\n}\n","conf\u002Fdefault.conf",[80,753,754,759,764,769,774,778,783,787,792,797,802,806,810,815,819,824,829,834,839,843,847,851,856,860,865,870,875,879,884,888,892,897,902,907,912,917,921,925,930,935,939,944,949,953],{"__ignoreMap":82},[94,755,756],{"class":96,"line":97},[94,757,758],{},"server {\n",[94,760,761],{"class":96,"line":4},[94,762,763],{},"    listen       80;\n",[94,765,766],{"class":96,"line":108},[94,767,768],{},"    listen  [::]:80;\n",[94,770,771],{"class":96,"line":114},[94,772,773],{},"    server_name  localhost;\n",[94,775,776],{"class":96,"line":120},[94,777,481],{"emptyLinePlaceholder":63},[94,779,780],{"class":96,"line":126},[94,781,782],{},"    #access_log  \u002Fvar\u002Flog\u002Fnginx\u002Fhost.access.log  main;\n",[94,784,785],{"class":96,"line":132},[94,786,481],{"emptyLinePlaceholder":63},[94,788,789],{"class":96,"line":243},[94,790,791],{},"    location \u002F {\n",[94,793,794],{"class":96,"line":251},[94,795,796],{},"        root   \u002Fusr\u002Fshare\u002Fnginx;\n",[94,798,799],{"class":96,"line":259},[94,800,801],{},"        index  index.html index.htm;\n",[94,803,804],{"class":96,"line":267},[94,805,620],{},[94,807,808],{"class":96,"line":275},[94,809,481],{"emptyLinePlaceholder":63},[94,811,812],{"class":96,"line":283},[94,813,814],{},"    #error_page  404              \u002F404.html;\n",[94,816,817],{"class":96,"line":292},[94,818,481],{"emptyLinePlaceholder":63},[94,820,821],{"class":96,"line":299},[94,822,823],{},"    # redirect server error pages to the static page \u002F50x.html\n",[94,825,826],{"class":96,"line":311},[94,827,828],{},"    #\n",[94,830,831],{"class":96,"line":318},[94,832,833],{},"    error_page   500 502 503 504  \u002F50x.html;\n",[94,835,836],{"class":96,"line":326},[94,837,838],{},"    location = \u002F50x.html {\n",[94,840,841],{"class":96,"line":333},[94,842,796],{},[94,844,845],{"class":96,"line":341},[94,846,620],{},[94,848,849],{"class":96,"line":353},[94,850,481],{"emptyLinePlaceholder":63},[94,852,853],{"class":96,"line":361},[94,854,855],{},"    # proxy the PHP scripts to Apache listening on 127.0.0.1:80\n",[94,857,858],{"class":96,"line":369},[94,859,828],{},[94,861,862],{"class":96,"line":376},[94,863,864],{},"    #location ~ \\.php$ {\n",[94,866,867],{"class":96,"line":388},[94,868,869],{},"    #    proxy_pass   http:\u002F\u002F127.0.0.1;\n",[94,871,872],{"class":96,"line":395},[94,873,874],{},"    #}\n",[94,876,877],{"class":96,"line":403},[94,878,481],{"emptyLinePlaceholder":63},[94,880,881],{"class":96,"line":411},[94,882,883],{},"    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000\n",[94,885,886],{"class":96,"line":419},[94,887,828],{},[94,889,890],{"class":96,"line":427},[94,891,864],{},[94,893,894],{"class":96,"line":435},[94,895,896],{},"    #    root           html;\n",[94,898,899],{"class":96,"line":447},[94,900,901],{},"    #    fastcgi_pass   127.0.0.1:9000;\n",[94,903,904],{"class":96,"line":455},[94,905,906],{},"    #    fastcgi_index  index.php;\n",[94,908,909],{"class":96,"line":631},[94,910,911],{},"    #    fastcgi_param  SCRIPT_FILENAME  \u002Fscripts$fastcgi_script_name;\n",[94,913,914],{"class":96,"line":636},[94,915,916],{},"    #    include        fastcgi_params;\n",[94,918,919],{"class":96,"line":641},[94,920,874],{},[94,922,923],{"class":96,"line":647},[94,924,481],{"emptyLinePlaceholder":63},[94,926,927],{"class":96,"line":653},[94,928,929],{},"    # deny access to .htaccess files, if Apache's document root\n",[94,931,932],{"class":96,"line":659},[94,933,934],{},"    # concurs with nginx's one\n",[94,936,937],{"class":96,"line":664},[94,938,828],{},[94,940,941],{"class":96,"line":670},[94,942,943],{},"    #location ~ \u002F\\.ht {\n",[94,945,946],{"class":96,"line":676},[94,947,948],{},"    #    deny  all;\n",[94,950,951],{"class":96,"line":682},[94,952,874],{},[94,954,955],{"class":96,"line":687},[94,956,514],{},[13,958,959,960,963],{},"管理用コンテナに使用します。ドキュメントルートが",[80,961,962],{},"\u002Fvar\u002Fwww\u002Fhtml\u002Fpublic","なのは後でlumenを入れるためです。",[73,965,968],{"className":466,"code":966,"filename":967,"language":469,"meta":82,"style":82},"\u003CVirtualHost *:80>\n    # The ServerName directive sets the request scheme, hostname and port that\n    # the server uses to identify itself. This is used when creating\n    # redirection URLs. In the context of virtual hosts, the ServerName\n    # specifies what hostname must appear in the request's Host: header to\n    # match this virtual host. For the default virtual host (this file) this\n    # value is not decisive as it is used as a last resort host regardless.\n    # However, you must set it for any further virtual host explicitly.\n    #ServerName www.example.com\n\n    ServerAdmin webmaster@localhost\n    DocumentRoot \u002Fvar\u002Fwww\u002Fhtml\u002Fpublic\n\n    # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,\n    # error, crit, alert, emerg.\n    # It is also possible to configure the loglevel for particular\n    # modules, e.g.\n    #LogLevel info ssl:warn\n\n    ErrorLog ${APACHE_LOG_DIR}\u002Ferror.log\n    CustomLog ${APACHE_LOG_DIR}\u002Faccess.log combined\n\n    # For most configuration files from conf-available\u002F, which are\n    # enabled or disabled at a global level, it is possible to\n    # include a line for only one particular virtual host. For example the\n    # following line enables the CGI configuration for this host only\n    # after it has been globally disabled with \"a2disconf\".\n    #Include conf-available\u002Fserve-cgi-bin.conf\n\u003C\u002FVirtualHost>\n","conf\u002F000-default.conf",[80,969,970,975,980,985,990,995,1000,1005,1010,1015,1019,1024,1029,1033,1038,1043,1048,1053,1058,1062,1067,1072,1076,1081,1086,1091,1096,1101,1106],{"__ignoreMap":82},[94,971,972],{"class":96,"line":97},[94,973,974],{},"\u003CVirtualHost *:80>\n",[94,976,977],{"class":96,"line":4},[94,978,979],{},"    # The ServerName directive sets the request scheme, hostname and port that\n",[94,981,982],{"class":96,"line":108},[94,983,984],{},"    # the server uses to identify itself. This is used when creating\n",[94,986,987],{"class":96,"line":114},[94,988,989],{},"    # redirection URLs. In the context of virtual hosts, the ServerName\n",[94,991,992],{"class":96,"line":120},[94,993,994],{},"    # specifies what hostname must appear in the request's Host: header to\n",[94,996,997],{"class":96,"line":126},[94,998,999],{},"    # match this virtual host. For the default virtual host (this file) this\n",[94,1001,1002],{"class":96,"line":132},[94,1003,1004],{},"    # value is not decisive as it is used as a last resort host regardless.\n",[94,1006,1007],{"class":96,"line":243},[94,1008,1009],{},"    # However, you must set it for any further virtual host explicitly.\n",[94,1011,1012],{"class":96,"line":251},[94,1013,1014],{},"    #ServerName www.example.com\n",[94,1016,1017],{"class":96,"line":259},[94,1018,481],{"emptyLinePlaceholder":63},[94,1020,1021],{"class":96,"line":267},[94,1022,1023],{},"    ServerAdmin webmaster@localhost\n",[94,1025,1026],{"class":96,"line":275},[94,1027,1028],{},"    DocumentRoot \u002Fvar\u002Fwww\u002Fhtml\u002Fpublic\n",[94,1030,1031],{"class":96,"line":283},[94,1032,481],{"emptyLinePlaceholder":63},[94,1034,1035],{"class":96,"line":292},[94,1036,1037],{},"    # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,\n",[94,1039,1040],{"class":96,"line":299},[94,1041,1042],{},"    # error, crit, alert, emerg.\n",[94,1044,1045],{"class":96,"line":311},[94,1046,1047],{},"    # It is also possible to configure the loglevel for particular\n",[94,1049,1050],{"class":96,"line":318},[94,1051,1052],{},"    # modules, e.g.\n",[94,1054,1055],{"class":96,"line":326},[94,1056,1057],{},"    #LogLevel info ssl:warn\n",[94,1059,1060],{"class":96,"line":333},[94,1061,481],{"emptyLinePlaceholder":63},[94,1063,1064],{"class":96,"line":341},[94,1065,1066],{},"    ErrorLog ${APACHE_LOG_DIR}\u002Ferror.log\n",[94,1068,1069],{"class":96,"line":353},[94,1070,1071],{},"    CustomLog ${APACHE_LOG_DIR}\u002Faccess.log combined\n",[94,1073,1074],{"class":96,"line":361},[94,1075,481],{"emptyLinePlaceholder":63},[94,1077,1078],{"class":96,"line":369},[94,1079,1080],{},"    # For most configuration files from conf-available\u002F, which are\n",[94,1082,1083],{"class":96,"line":376},[94,1084,1085],{},"    # enabled or disabled at a global level, it is possible to\n",[94,1087,1088],{"class":96,"line":388},[94,1089,1090],{},"    # include a line for only one particular virtual host. For example the\n",[94,1092,1093],{"class":96,"line":395},[94,1094,1095],{},"    # following line enables the CGI configuration for this host only\n",[94,1097,1098],{"class":96,"line":403},[94,1099,1100],{},"    # after it has been globally disabled with \"a2disconf\".\n",[94,1102,1103],{"class":96,"line":411},[94,1104,1105],{},"    #Include conf-available\u002Fserve-cgi-bin.conf\n",[94,1107,1108],{"class":96,"line":419},[94,1109,1110],{},"\u003C\u002FVirtualHost>\n",[13,1112,1113],{},"とりあえず確認したい時に使用します。",[73,1115,1120],{"className":1116,"code":1117,"filename":1118,"language":1119,"meta":82,"style":82},"language-html shiki shiki-themes material-theme-ocean","\u003C!DOCTYPE html>\n\u003Chtml>\n\n\u003Chead>\n  \u003Cmeta charset=\"utf-8\">\n  \u003Ctitle>MediaElement\u003C\u002Ftitle>\n  \u003C!-- MediaElement style -->\n  \u003Clink rel=\"stylesheet\" href=\"\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fmediaelement\u002F4.2.9\u002Fmediaelementplayer.css\" \u002F>\n\u003C\u002Fhead>\n\n\u003Cbody>\n  \u003C!-- MediaElement -->\n  \u003Cscript src=\"\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fmediaelement\u002F4.2.9\u002Fmediaelement-and-player.js\">\u003C\u002Fscript>\n\n  \u003Cvideo id=\"player\" width=\"640\" height=\"360\">\n\u003C\u002Fbody>\n\u003Cscript type=\"text\u002Fjavascript\">\n\n      var player = new MediaElementPlayer('player', {\n        success: function(mediaElement, originalNode) {\n          console.log(\"Player initialised\");\n        }\n      });\n        player.setSrc(\"\u002Fhls\u002F.m3u8\");\n\u003C\u002Fscript>\n\n\u003C\u002Fhtml>\n","src\u002Fpublic\u002Ftest.html,debug\u002Findex.html","html",[80,1121,1122,1137,1146,1150,1159,1183,1204,1210,1244,1252,1256,1265,1270,1296,1300,1345,1353,1373,1377,1410,1436,1461,1465,1474,1497,1505,1509],{"__ignoreMap":82},[94,1123,1124,1127,1130,1134],{"class":96,"line":97},[94,1125,1126],{"class":172},"\u003C!",[94,1128,1129],{"class":168},"DOCTYPE",[94,1131,1133],{"class":1132},"sJ14y"," html",[94,1135,1136],{"class":172},">\n",[94,1138,1139,1142,1144],{"class":96,"line":4},[94,1140,1141],{"class":172},"\u003C",[94,1143,1119],{"class":168},[94,1145,1136],{"class":172},[94,1147,1148],{"class":96,"line":108},[94,1149,481],{"emptyLinePlaceholder":63},[94,1151,1152,1154,1157],{"class":96,"line":114},[94,1153,1141],{"class":172},[94,1155,1156],{"class":168},"head",[94,1158,1136],{"class":172},[94,1160,1161,1164,1167,1170,1173,1176,1179,1181],{"class":96,"line":120},[94,1162,1163],{"class":172},"  \u003C",[94,1165,1166],{"class":168},"meta",[94,1168,1169],{"class":1132}," charset",[94,1171,1172],{"class":172},"=",[94,1174,1175],{"class":172},"\"",[94,1177,1178],{"class":179},"utf-8",[94,1180,1175],{"class":172},[94,1182,1136],{"class":172},[94,1184,1185,1187,1190,1193,1197,1200,1202],{"class":96,"line":126},[94,1186,1163],{"class":172},[94,1188,1189],{"class":168},"title",[94,1191,1192],{"class":172},">",[94,1194,1196],{"class":1195},"s0W1g","MediaElement",[94,1198,1199],{"class":172},"\u003C\u002F",[94,1201,1189],{"class":168},[94,1203,1136],{"class":172},[94,1205,1206],{"class":96,"line":132},[94,1207,1209],{"class":1208},"sC9rS","  \u003C!-- MediaElement style -->\n",[94,1211,1212,1214,1217,1220,1222,1224,1227,1229,1232,1234,1236,1239,1241],{"class":96,"line":243},[94,1213,1163],{"class":172},[94,1215,1216],{"class":168},"link",[94,1218,1219],{"class":1132}," rel",[94,1221,1172],{"class":172},[94,1223,1175],{"class":172},[94,1225,1226],{"class":179},"stylesheet",[94,1228,1175],{"class":172},[94,1230,1231],{"class":1132}," href",[94,1233,1172],{"class":172},[94,1235,1175],{"class":172},[94,1237,1238],{"class":179},"\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fmediaelement\u002F4.2.9\u002Fmediaelementplayer.css",[94,1240,1175],{"class":172},[94,1242,1243],{"class":172}," \u002F>\n",[94,1245,1246,1248,1250],{"class":96,"line":251},[94,1247,1199],{"class":172},[94,1249,1156],{"class":168},[94,1251,1136],{"class":172},[94,1253,1254],{"class":96,"line":259},[94,1255,481],{"emptyLinePlaceholder":63},[94,1257,1258,1260,1263],{"class":96,"line":267},[94,1259,1141],{"class":172},[94,1261,1262],{"class":168},"body",[94,1264,1136],{"class":172},[94,1266,1267],{"class":96,"line":275},[94,1268,1269],{"class":1208},"  \u003C!-- MediaElement -->\n",[94,1271,1272,1274,1277,1280,1282,1284,1287,1289,1292,1294],{"class":96,"line":283},[94,1273,1163],{"class":172},[94,1275,1276],{"class":168},"script",[94,1278,1279],{"class":1132}," src",[94,1281,1172],{"class":172},[94,1283,1175],{"class":172},[94,1285,1286],{"class":179},"\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fmediaelement\u002F4.2.9\u002Fmediaelement-and-player.js",[94,1288,1175],{"class":172},[94,1290,1291],{"class":172},">\u003C\u002F",[94,1293,1276],{"class":168},[94,1295,1136],{"class":172},[94,1297,1298],{"class":96,"line":292},[94,1299,481],{"emptyLinePlaceholder":63},[94,1301,1302,1304,1307,1310,1312,1314,1317,1319,1322,1324,1326,1329,1331,1334,1336,1338,1341,1343],{"class":96,"line":299},[94,1303,1163],{"class":172},[94,1305,1306],{"class":168},"video",[94,1308,1309],{"class":1132}," id",[94,1311,1172],{"class":172},[94,1313,1175],{"class":172},[94,1315,1316],{"class":179},"player",[94,1318,1175],{"class":172},[94,1320,1321],{"class":1132}," width",[94,1323,1172],{"class":172},[94,1325,1175],{"class":172},[94,1327,1328],{"class":179},"640",[94,1330,1175],{"class":172},[94,1332,1333],{"class":1132}," height",[94,1335,1172],{"class":172},[94,1337,1175],{"class":172},[94,1339,1340],{"class":179},"360",[94,1342,1175],{"class":172},[94,1344,1136],{"class":172},[94,1346,1347,1349,1351],{"class":96,"line":311},[94,1348,1199],{"class":172},[94,1350,1262],{"class":168},[94,1352,1136],{"class":172},[94,1354,1355,1357,1359,1362,1364,1366,1369,1371],{"class":96,"line":318},[94,1356,1141],{"class":172},[94,1358,1276],{"class":168},[94,1360,1361],{"class":1132}," type",[94,1363,1172],{"class":172},[94,1365,1175],{"class":172},[94,1367,1368],{"class":179},"text\u002Fjavascript",[94,1370,1175],{"class":172},[94,1372,1136],{"class":172},[94,1374,1375],{"class":96,"line":326},[94,1376,481],{"emptyLinePlaceholder":63},[94,1378,1379,1382,1385,1387,1390,1394,1397,1400,1402,1404,1407],{"class":96,"line":333},[94,1380,1381],{"class":1132},"      var",[94,1383,1384],{"class":1195}," player ",[94,1386,1172],{"class":172},[94,1388,1389],{"class":172}," new",[94,1391,1393],{"class":1392},"sdLwU"," MediaElementPlayer",[94,1395,1396],{"class":1195},"(",[94,1398,1399],{"class":172},"'",[94,1401,1316],{"class":179},[94,1403,1399],{"class":172},[94,1405,1406],{"class":172},",",[94,1408,1409],{"class":172}," {\n",[94,1411,1412,1415,1417,1420,1422,1426,1428,1431,1434],{"class":96,"line":341},[94,1413,1414],{"class":1392},"        success",[94,1416,173],{"class":172},[94,1418,1419],{"class":1132}," function",[94,1421,1396],{"class":172},[94,1423,1425],{"class":1424},"s7ZW3","mediaElement",[94,1427,1406],{"class":172},[94,1429,1430],{"class":1424}," originalNode",[94,1432,1433],{"class":172},")",[94,1435,1409],{"class":172},[94,1437,1438,1441,1444,1447,1449,1451,1454,1456,1458],{"class":96,"line":353},[94,1439,1440],{"class":1195},"          console",[94,1442,1443],{"class":172},".",[94,1445,1446],{"class":1392},"log",[94,1448,1396],{"class":168},[94,1450,1175],{"class":172},[94,1452,1453],{"class":179},"Player initialised",[94,1455,1175],{"class":172},[94,1457,1433],{"class":168},[94,1459,1460],{"class":172},";\n",[94,1462,1463],{"class":96,"line":361},[94,1464,615],{"class":172},[94,1466,1467,1470,1472],{"class":96,"line":369},[94,1468,1469],{"class":172},"      }",[94,1471,1433],{"class":1195},[94,1473,1460],{"class":172},[94,1475,1476,1479,1481,1484,1486,1488,1491,1493,1495],{"class":96,"line":376},[94,1477,1478],{"class":1195},"        player",[94,1480,1443],{"class":172},[94,1482,1483],{"class":1392},"setSrc",[94,1485,1396],{"class":1195},[94,1487,1175],{"class":172},[94,1489,1490],{"class":179},"\u002Fhls\u002F.m3u8",[94,1492,1175],{"class":172},[94,1494,1433],{"class":1195},[94,1496,1460],{"class":172},[94,1498,1499,1501,1503],{"class":96,"line":388},[94,1500,1199],{"class":172},[94,1502,1276],{"class":168},[94,1504,1136],{"class":172},[94,1506,1507],{"class":96,"line":395},[94,1508,481],{"emptyLinePlaceholder":63},[94,1510,1511,1513,1515],{"class":96,"line":403},[94,1512,1199],{"class":172},[94,1514,1119],{"class":168},[94,1516,1136],{"class":172},[13,1518,1519],{},"では上記のファイルを用いて解説します。",[41,1521,1522],{"id":1522},"共有ボリュームを用いて受信した映像を扱う",[13,1524,1525],{},"まずは受信用コンテナから得られたGoproの映像を管理用コンテナで使用できるようにします。受信用コンテナにPHPなどを入れようとしましたが結構面倒だったので、別のコンテナとして独立させました。しかしそのままでは受信した映像データ（HLS）を共有できないため、受信用コンテナで生成されるHLSファイルを共有ボリュームで共有します。",[13,1527,1528],{},"その設定のために",[73,1530,1532],{"className":158,"code":1531,"filename":160,"language":161,"meta":82,"style":82},"version: '2'\nservices:\n  #...\n  rtmp:\n    #...\n    volumes:\n      - shared_data:\u002Fusr\u002Fshare\u002Fnginx\u002Fhls\n    #...\n  php:\n    #...\n    volumes:\n      - shared_data:\u002Fvar\u002Fwww\u002Fhtml\u002Fhls\n    #...\nvolumes:\n  shared_data:\n",[80,1533,1534,1546,1552,1557,1563,1568,1574,1580,1584,1590,1594,1600,1606,1610,1616],{"__ignoreMap":82},[94,1535,1536,1538,1540,1542,1544],{"class":96,"line":97},[94,1537,169],{"class":168},[94,1539,173],{"class":172},[94,1541,176],{"class":172},[94,1543,180],{"class":179},[94,1545,183],{"class":172},[94,1547,1548,1550],{"class":96,"line":4},[94,1549,188],{"class":168},[94,1551,191],{"class":172},[94,1553,1554],{"class":96,"line":108},[94,1555,1556],{"class":1208},"  #...\n",[94,1558,1559,1561],{"class":96,"line":114},[94,1560,278],{"class":168},[94,1562,191],{"class":172},[94,1564,1565],{"class":96,"line":120},[94,1566,1567],{"class":1208},"    #...\n",[94,1569,1570,1572],{"class":96,"line":126},[94,1571,246],{"class":168},[94,1573,191],{"class":172},[94,1575,1576,1578],{"class":96,"line":132},[94,1577,220],{"class":172},[94,1579,323],{"class":179},[94,1581,1582],{"class":96,"line":243},[94,1583,1567],{"class":1208},[94,1585,1586,1588],{"class":96,"line":251},[94,1587,336],{"class":168},[94,1589,191],{"class":172},[94,1591,1592],{"class":96,"line":259},[94,1593,1567],{"class":1208},[94,1595,1596,1598],{"class":96,"line":267},[94,1597,246],{"class":168},[94,1599,191],{"class":172},[94,1601,1602,1604],{"class":96,"line":275},[94,1603,220],{"class":172},[94,1605,400],{"class":179},[94,1607,1608],{"class":96,"line":283},[94,1609,1567],{"class":1208},[94,1611,1612,1614],{"class":96,"line":292},[94,1613,450],{"class":168},[94,1615,191],{"class":172},[94,1617,1618,1620],{"class":96,"line":299},[94,1619,458],{"class":168},[94,1621,191],{"class":172},[13,1623,1624,1626,1627,1629,1630,1633,1634,1637,1638,1641,1642,1644,1645,1648],{},[80,1625,450],{},"でボリュームを定義してそのボリューム名を各コンテナに配置するパスを指定します。すると",[80,1628,148],{},"（受信用コンテナ）では",[80,1631,1632],{},"\u002Fusr\u002Fshare\u002Fnginx\u002Fhls"," に",[80,1635,1636],{},"*.ts","ファイルや",[80,1639,1640],{},".m3u8","ファイルが作成されます。そして",[80,1643,154],{},"（管理用コンテナ）では",[80,1646,1647],{},"\u002Fvar\u002Fwww\u002Fhtml\u002Fhls","に同じファイル群が作成されます。",[13,1650,1651],{},"管理用コンテナでgoproから受信したデータをffmpegで色々したり、読み取ったり、配信できるようになりました。",[1653,1654,1655],"h3",{"id":1655},"テストしてみる",[13,1657,1658,1659,1662],{},"その１の記事または後述するOBSの方法を参考にGopro・OBSから",[80,1660,1661],{},"rtmp:\u002F\u002FYOUR_PC_IP\u002Flive"," にRTMP送信をします。",[73,1664,1667],{"className":1665,"code":1666,"language":78},[76],"# \u003CYOUR_PHP_CONTAINER_NAME>はあなたの環境の管理用コンテナ名に書き換えてください。\n\ndocker exec -it \u003CYOUR_PHP_CONTAINER_NAME> \u002Fbin\u002Fbash\n",[80,1668,1666],{"__ignoreMap":82},[13,1670,1671,1672,1674],{},"ボリュームのため、",[80,1673,1647],{},"というディレクトリがあると思います。そしてGoproでの収録を開始するとディレクトリ内にファイルが配置されます。",[13,1676,1677,1678,1681,1682,1685],{},"そして",[80,1679,1680],{},"\u002Fvar\u002Fwww\u002Fhtml\u002Fpublic\u002Ftest.html","があるので",[80,1683,1684],{},"http:\u002F\u002Flocalhost:8080","でweb playerを用いて確認できるはずです。",[41,1687,1689],{"id":1688},"ffmpegを用いてyoutubeに送信してみる","ffmpegを用いてYoutubeに送信してみる",[13,1691,1692],{},"次にffmpegを用いて管理用コンテナからyoutube liveに流してみます。ffmpegはlinux上で動画、音声の変換・記録・再生・配信を行うことができるOSSです。今はコマンド上で配信をするだけですが、最終的にはffmpegを利用して管理画面から配信内容を制御する予定です。現時点で自分もまだ詳細なプロパティーや映像系の知識に乏しいので、調べた際のコマンドのコピペやchat gptで調査した内容になります。",[1653,1694,1696],{"id":1695},"youtube-のライブを始めておく","youtube のライブを始めておく",[13,1698,1699],{},"本記事では簡単に述べておきます。すでにGoogle、Youtubeアカウントがありライブストリーミングが有効になっている前提とします。",[1701,1702,1703,1706,1709],"ol",{},[28,1704,1705],{},"Youtubeに移動し、右上の「＋」ボタンをクリックして「ライブ配信を開始」を選択",[28,1707,1708],{},"ライブ配信の設定からストリームURLとストリームキーを控えます。ライブストリームキーとURLは「rtmp:\u002F\u002Fa.rtmp.youtube.com\u002Flive2\u002FLIVE_KEY」とURLの後につければOKです。ただしドメインのとこはyoutubeのrtmp配信サーバのipにしておいてください（調べ方と理由は後述）",[28,1710,1711],{},"Youtubeのライブ管理画面では「ライブ配信を公開するには、ストリーミング ソフトで動画の送信を開始します」という表示がされています。ffmpegでRTMP送信をすれば表示されます。",[13,1713,1714],{},"プライバシーを非公開にしておくことをおすすめします。",[1653,1716,1717],{"id":1717},"コマンドを打つ",[13,1719,1720],{},"Goproからの映像をローカルで確認できたらとりあえず以下のコマンドを管理用コンテナ内から打ってみてください。",[73,1722,1725],{"className":1723,"code":1724,"language":78},[76],"ffmpeg -re -i \"\u002Fvar\u002Fwww\u002Fhtml\u002Fhls\u002F.m3u8\" -c:a aac -ar 44100 -ab 128k -ac 2 -strict -2 -flags +global_header -bsf:a aac_adtstoasc -f flv \"rtmp:\u002F\u002F64.233.189.134\u002Flive2\u002FYOUR_LIVE_KEY\"\n",[80,1726,1724],{"__ignoreMap":82},[13,1728,1729,1732],{},[80,1730,1731],{},"YOUR_LIVE_KEY"," はyoutuebのライブストリームキーを使用してください。ffmpegが起動してyoutubeにデータが送信されます。20秒ぐらいするとGoproからの映像の配信が開始されるはずです。",[1653,1734,1736],{"id":1735},"dnsエラー","DNSエラー？",[13,1738,1739,1740,1743],{},"本来ライブストリームURLには",[80,1741,1742],{},"a.rtmp.youtube.com","というドメインを使用すべきですが、私のdockerで管理用コンテナから実行するとffmpegが以下のようなDNSエラーが発生します。",[73,1745,1748],{"className":1746,"code":1747,"language":78},[76],"[tcp @ 0x696d2c0] Failed to resolve hostname a.rtmp.youtube.com: System error\n[rtmp @ 0x696d480] Cannot open connection tcp:\u002F\u002Fa.rtmp.youtube.com:1935?tcp_nodelay=0\n[out#0\u002Fflv @ 0x6890880] Error opening output rtmp:\u002F\u002Fa.rtmp.youtube.com\u002Flive2\u002Fefth-usbu-ye2g-f0sk-a7ta: Input\u002Foutput error\nError opening output file rtmp:\u002F\u002Fa.rtmp.youtube.com\u002Flive2\u002Fefth-usbu-ye2g-f0sk-a7ta.\nError opening output files: Input\u002Foutput error\n",[80,1749,1747],{"__ignoreMap":82},[13,1751,1752,1753,1755,1756,1759,1760,1762],{},"ホストマシン上でffmpegを使用すると問題なく配信できるますが、docker内から行うとなぜか",[80,1754,1742],{},"のホストが見つからないというエラーが発生します。そのためホストマシンで",[80,1757,1758],{},"nslookup","を使用して",[80,1761,1742],{},"のIPを調べて、直接IPを指定したら問題なく動作しました。",[13,1764,1765],{},"ここはdockerの問題かつまだ調査中です。Googleなどはこの辺のIPをころころ変えてきそうなので、最終的にはきちんとドメインを利用できるようにしますがとりあえず今はIPで指定します。",[41,1767,1768],{"id":1768},"ローカルでデバッグしやすい環境にする",[13,1770,1771],{},"ひととおり受信→中継→配信を行えるdockerコンテナが構築できました。しかし毎回goproを起動したり、youtube liveを開始するのは面倒ですし、複数人で開発する時に機材がなかったり送信先が重複してします。そのため開発用にデバッグできるように送信元、配信先をローカルで実現できるようにします。",[1653,1773,1775],{"id":1774},"送信元にgoproの代わりにobsを利用する","送信元にgoproの代わりにOBSを利用する",[13,1777,1778],{},"この記事では送信元としてGoproを使用してホストマシンの受信用コンテナにRTMPを送信しています。ですがこれはOBSなどの配信ソフトを利用することで簡単に代替できます。",[13,1780,1781,1782],{},"OBSはフリーのライブ配信や録画が行えます。PC上のウィンドウキャプチャをしたり、機材をそろえればnintedo switchなどのゲーム機の映像を配信することができます。とりあえずOBSをインストールして、webカメラなりウィンドウキャプチャを映像・音声ソースとして利用します。",[1783,1784,1788],"a",{"href":1785,"rel":1786},"https:\u002F\u002Fobsproject.com\u002Fja\u002Fdownload",[1787],"nofollow","OBSのインストールはこちらから",[1790,1791,1793],"h4",{"id":1792},"とりあえずmacの映像と音声を受信用rtmpに流そう","とりあえずmacの映像と音声を受信用RTMPに流そう",[13,1795,1796],{},"OBSをインストールしたらアプリを開きます。以下のような似た画面になっているはずです。（すでに設定がいくつかあるのは気にしないでください）",[17,1798],{":src":1799,":width":20},"'rtmp-docker-local\u002Fobs1.png'",[13,1801,1802],{},"「シーン」に何もなければ「＋」をクリックしてシーンを追加します。そして映像・音声ソースも追加していきます。「ソース」のとこの「＋」をクリックして「映像キャプチャデバイス」を選択します。",[13,1804,1805],{},"ソースのラベルを適当に入れておきます。",[17,1807],{":src":1808,":width":1809,":center":1810},"'rtmp-docker-local\u002Fobs2.png'","'400px'","true",[13,1812,1813],{},"ソースの選択画面に移動するので「デバイス」から「FaceTime HDカメラ」などを選択しておきます。",[17,1815],{":src":1816,":width":20},"'rtmp-docker-local\u002Fobs3.png'",[13,1818,1819],{},"これだとまだ映像しか拾わないので次は「ソース」のとこの「＋」をクリックして「音声入力キャプチャ」を選択します。同じようにソースのラベルを適当に入れておきます。ソースの選択画面に移動するので「デバイス」から「既定」などを選択しておきます。どれでもとりあえず音声が取得できればOKです。",[17,1821],{":src":1822,":width":20},"'rtmp-docker-local\u002Fobs4.png'",[13,1824,1825],{},"こんな感じで映像となんか奇声を発して「音声入力キャプチャ」が反応していればOKです。",[17,1827],{":src":1828,":width":20},"'rtmp-docker-local\u002Fobs5.png'",[13,1830,1831],{},"次に配信の設定をします。OBS→「設定」を開いて配信のタブをクリックします。\nサービスから「カスタム」を選択します。",[17,1833],{":src":1834,":width":20},"'rtmp-docker-local\u002Fobs6.png'",[13,1836,1837,1838,1841,1842,1845],{},"そして「サーバー」に受信用コンテナのRTMPパスをいれます。このとき",[80,1839,1840],{},"127.0.0.1","というローカルループバックアドレスにしておきます。localhostにするとうまくいかない時があります。自分は",[80,1843,1844],{},"localhost:1935","に受信用コンテナのエンドポイントが控えていますが、違うポートの時はそのポートを指定してください。「適用」をクリックして「OK」をクリックします。",[17,1847],{":src":1848,":width":20},"'rtmp-docker-local\u002Fobs7.png'",[13,1850,1851],{},"最初の画面にもどったら「配信開始」をクリックすると配信されます。下の方にこのような表示がされていたり、確認用playerで確認したり、HLSファイルが生成されていれば成功しています。",[17,1853],{":src":1854,":width":20},"'rtmp-docker-local\u002Fobs8.png'",[13,1856,1857],{},"終了する時は「配信終了」をクリックします。",[41,1859,1861],{"id":1860},"配信先にローカルの別のrtmpサーバを使用する","配信先にローカルの別のRTMPサーバを使用する。",[13,1863,1864],{},"最後に配信先のRTMPサーバをローカルに用意します。一番簡単な方法としてはもう1つRTMPサーバを立ててしまうことです。気をつける点としては管理用コンテナから配信先のホストを指定できるようにします。",[73,1866,1868],{"className":158,"code":1867,"filename":160,"language":161,"meta":82,"style":82},"version: '2'\nservices:\n  rtmptarget:\n    image: tiangolo\u002Fnginx-rtmp\n    ports:\n      - \"1930:1935\"\n      - \"1931:80\"\n    volumes:\n      - .\u002Fconf\u002Fnginx.conf:\u002Fetc\u002Fnginx\u002Fnginx.conf\n      - .\u002Fconf\u002Fdefault.conf:\u002Fetc\u002Fnginx\u002Fconf.d\u002Fdefault.conf\n      - .\u002Fdebug:\u002Fusr\u002Fshare\u002Fnginx\u002F\n    # ...\n  php:\n    # ...\n    extra_hosts:\n      - \"host.docker.internal:host-gateway\"\n    # ...\nvolumes:\n  shared_data:\n",[80,1869,1870,1882,1888,1894,1902,1908,1918,1928,1934,1940,1946,1952,1957,1963,1967,1973,1983,1987,1993],{"__ignoreMap":82},[94,1871,1872,1874,1876,1878,1880],{"class":96,"line":97},[94,1873,169],{"class":168},[94,1875,173],{"class":172},[94,1877,176],{"class":172},[94,1879,180],{"class":179},[94,1881,183],{"class":172},[94,1883,1884,1886],{"class":96,"line":4},[94,1885,188],{"class":168},[94,1887,191],{"class":172},[94,1889,1890,1892],{"class":96,"line":108},[94,1891,196],{"class":168},[94,1893,191],{"class":172},[94,1895,1896,1898,1900],{"class":96,"line":114},[94,1897,203],{"class":168},[94,1899,173],{"class":172},[94,1901,208],{"class":179},[94,1903,1904,1906],{"class":96,"line":120},[94,1905,213],{"class":168},[94,1907,191],{"class":172},[94,1909,1910,1912,1914,1916],{"class":96,"line":126},[94,1911,220],{"class":172},[94,1913,223],{"class":172},[94,1915,226],{"class":179},[94,1917,229],{"class":172},[94,1919,1920,1922,1924,1926],{"class":96,"line":132},[94,1921,220],{"class":172},[94,1923,223],{"class":172},[94,1925,238],{"class":179},[94,1927,229],{"class":172},[94,1929,1930,1932],{"class":96,"line":243},[94,1931,246],{"class":168},[94,1933,191],{"class":172},[94,1935,1936,1938],{"class":96,"line":251},[94,1937,220],{"class":172},[94,1939,256],{"class":179},[94,1941,1942,1944],{"class":96,"line":259},[94,1943,220],{"class":172},[94,1945,264],{"class":179},[94,1947,1948,1950],{"class":96,"line":267},[94,1949,220],{"class":172},[94,1951,272],{"class":179},[94,1953,1954],{"class":96,"line":275},[94,1955,1956],{"class":1208},"    # ...\n",[94,1958,1959,1961],{"class":96,"line":283},[94,1960,336],{"class":168},[94,1962,191],{"class":172},[94,1964,1965],{"class":96,"line":292},[94,1966,1956],{"class":1208},[94,1968,1969,1971],{"class":96,"line":299},[94,1970,430],{"class":168},[94,1972,191],{"class":172},[94,1974,1975,1977,1979,1981],{"class":96,"line":311},[94,1976,220],{"class":172},[94,1978,223],{"class":172},[94,1980,442],{"class":179},[94,1982,229],{"class":172},[94,1984,1985],{"class":96,"line":318},[94,1986,1956],{"class":1208},[94,1988,1989,1991],{"class":96,"line":326},[94,1990,450],{"class":168},[94,1992,191],{"class":172},[94,1994,1995,1997],{"class":96,"line":333},[94,1996,458],{"class":168},[94,1998,191],{"class":172},[13,2000,2001,2002,2005,2006,2008],{},"管理用コンテナのプロパティに",[80,2003,2004],{},"extra_hosts","に",[80,2007,442],{},"を加えることで、コンテナから利用できるホストマシンの特殊なIPアドレスがコンテナのhostsに追記されます。",[13,2010,2011,2014],{},[80,2012,2013],{},"cat \u002Fetc\u002Fhosts","を管理用サーバで実行すると追加したhostのIPがあるはずです。",[73,2016,2019],{"className":2017,"code":2018,"language":78},[76],"127.0.0.1       localhost\n::1     localhost ip6-localhost ip6-loopback\nfe00::0 ip6-localnet\nff00::0 ip6-mcastprefix\nff02::1 ip6-allnodes\nff02::2 ip6-allrouters\n192.168.65.2    host.docker.internal ←これ\n172.23.0.3      8227ce3421ec\n",[80,2020,2018],{"__ignoreMap":82},[1653,2022,2023],{"id":2023},"ffmpegを実行する",[13,2025,2026],{},"次に配信先のRTMPコンテナに向けてffmpegを用いて配信します。ローカルのホスト、ポート、パスに合わせればいいだけですが以下のコマンドを使用します。（youtubeの時とすこし違います！！）",[73,2028,2031],{"className":2029,"code":2030,"language":78},[76],"ffmpeg -re -i \"\u002Fvar\u002Fwww\u002Fhtml\u002Fhls\u002F.m3u8\" -c:v libx264 -preset ultrafast -c:a aac -ar 44100 -ab 128k -ac 2 -f flv \"rtmp:\u002F\u002F192.168.65.2:1930\u002Flive\"\n",[80,2032,2030],{"__ignoreMap":82},[13,2034,2035,2036,2039],{},"このコマンドを打って配信先コンテナの確認用htmlのプレイヤー",[80,2037,2038],{},"http:\u002F\u002Flocalhost:1931\u002Findex.html","から映像を確認できれば受信できています。（20秒ほど待つといいです）",[13,2041,2042],{},"すこしオプションの内容がyoutubeのときと違っている理由として、単純にyoutubeのIPから変えればいいと思っていたらなぜかweb playerで映像が見れず音声しか流れなかったのが原因です。色々探ってこのコマンドにしたら問題なくいけました。もしかするとIPだけ変更してyoutubeもこのコマンドでやったらほうがいいかもしれません。検証中です。",[41,2044,2045],{"id":2045},"まとめと参考文献",[13,2047,2048],{},"記事は以上となります。一通り管理用の中継コンテナを用いてgoproの映像をffmpegでyoutubeに送信したり、ローカルの開発環境を整えました。次回はffmpegを用いて任意のシーンに切り替えたり、goproからの映像が途絶えた時などの例外処理を加えていくwebシステム部分をphpを使用して実装しようと思います。",[13,2050,2051],{},"今回参考にした資料です。",[25,2053,2054,2061],{},[28,2055,2056],{},[1783,2057,2060],{"href":2058,"rel":2059},"https:\u002F\u002Fgist.github.com\u002Fqntmpkts\u002F403a027a4bfe99812ebf8952c41f8789",[1787],"Restream m3u8 stream with ffmpeg to youtube live",[28,2062,2063],{},[1783,2064,2067],{"href":2065,"rel":2066},"https:\u002F\u002Fqiita.com\u002FCyberRex\u002Fitems\u002F960bbd0f348ad8dca544",[1787],"FFmpegでよく使う例、コーデックをまとめてみた（2023年版）",[2069,2070,2071],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}",{"title":82,"searchDepth":108,"depth":108,"links":2073},[2074,2075,2076,2079,2084,2089,2092],{"id":43,"depth":4,"text":43},{"id":68,"depth":4,"text":68},{"id":1522,"depth":4,"text":1522,"children":2077},[2078],{"id":1655,"depth":108,"text":1655},{"id":1688,"depth":4,"text":1689,"children":2080},[2081,2082,2083],{"id":1695,"depth":108,"text":1696},{"id":1717,"depth":108,"text":1717},{"id":1735,"depth":108,"text":1736},{"id":1768,"depth":4,"text":1768,"children":2085},[2086],{"id":1774,"depth":108,"text":1775,"children":2087},[2088],{"id":1792,"depth":114,"text":1793},{"id":1860,"depth":4,"text":1861,"children":2090},[2091],{"id":2023,"depth":108,"text":2023},{"id":2045,"depth":4,"text":2045},[2094],"devstack","2024-07-09","youtbeへの配信テストとデバッグ環境構築","md",{},"\u002Fseries\u002Frtmp-manager-server-2",{"title":8,"description":2096},"rtmp-manager-server","Goproの配信映像を中継してyoutubeへの配信を管理するwebシステムを開発する","series\u002Frtmp-manager-server-2",[2105,2106],"docker","nginx","rtmp-docker-local\u002Fobs5.png",null,"HPFKEu4iBy3O40z_uOHtY7Ed_jACJ4aBXKcnLMlAOLo",{"id":2111,"title":2112,"body":2113,"category":3435,"createdAt":3436,"description":3437,"extension":2097,"index":97,"meta":3438,"navigation":63,"path":3439,"publish":63,"seo":3440,"series":2101,"seriesTitle":2102,"stem":3441,"tag":3442,"thumbnail":3443,"updatedAt":2108,"__hash__":3444},"series\u002Fseries\u002Frtmp-manager-server-1.md","配信中継サーバ開発1：ローカルのDockerとNginxを用いてGoproからRTMPで送信されたライブ配信映像を再生する",{"type":10,"value":2114,"toc":3408},[2115,2121,2124,2127,2130,2133,2144,2147,2150,2161,2169,2171,2174,2177,2180,2183,2186,2189,2192,2203,2206,2217,2221,2224,2228,2235,2239,2242,2255,2261,2264,2279,2288,2293,2388,2391,2394,2397,2400,2618,2625,2628,2709,2715,2718,2725,2907,2910,2913,2919,3256,3262,3265,3271,3274,3278,3282,3285,3296,3299,3302,3305,3317,3324,3330,3339,3342,3345,3348,3352,3358,3362,3369,3372,3375,3378,3381,3384,3406],[48,2116,2120],{"className":2117},[2118,2119],"alert","alert-info","\nこの記事はもともと[https:\u002F\u002Fjun-app.com\u002Farticles\u002Frtmp-docker-local](https:\u002F\u002Fjun-app.com\u002Farticles\u002Frtmp-docker-local) にて掲載していました。この記事に関連する内容をシリーズ化するため、このURLに移動しました。\n",[13,2122,2123],{},"こんにちはjunです。今回の記事は一風変わって物理世界をちょっと扱います。いつもはPC内で行えることばかりやっていますが、今回はGoproをつかってタイトルの通りライブ映像を再生したいと思います。RTMPサーバーをローカルで作成し、そこに送信できるかのテストをしてみたかった感じです。",[13,2125,2126],{},"ローカルPCのDockerにNignxをインストールしてRTMPの設定をしてブラウザから見れるようにします。この記事ではまずなぜ、このようなことを始めたいのかという理由から述べます。実装内容をさっさと知りたい方は「RTMPサーバー実装」へ移動してください。",[41,2128,2129],{"id":2129},"事の経緯",[13,2131,2132],{},"経緯としては私がyoutubeライブをやりたくなったからです笑。単純にyoutubeライブをやりたいだけならば、さっさとwebカメラからやればいいのですが、私はサイクリングが趣味でなのでその風景をライブしたいと思っていました。持っているアクションカメラがGoproであり、一応公式のスマホアプリを使用することでyoutubeライブをすることができるのですが以下の懸念がありました。",[25,2134,2135,2138,2141],{},[28,2136,2137],{},"Gopro、スマホアプリなどカメラ側の不具合によるライブの中断",[28,2139,2140],{},"柔軟なカメラ切り替えを行える環境の準備",[28,2142,2143],{},"スマホからのyoutubeライブ配信は登録者が50人必要（１番の障壁です笑）",[1653,2145,2146],{"id":2146},"カメラ側によるライブの中断",[13,2148,2149],{},"Goproは簡単にライブ配信ができるのですが、以下の様なカメラ・スマホ側の要因によってライブが中断される可能性があります。",[25,2151,2152,2155,2158],{},[28,2153,2154],{},"Goproの熱暴走",[28,2156,2157],{},"トンネルなどでwi-fi・ネットワーク切断",[28,2159,2160],{},"カメラ、スマホの電池切れ",[13,2162,2163,2164,2168],{},"本当に中断されるかは ",[2165,2166,2167],"strong",{},"未検証"," ですが可能性があるのでこれを避けるためには「Gopro側からライブの設定を制御するのでなく、Goproからは音声と映像を取得するのみで配信は別環境で行う」ことがベストな気がします。",[1653,2170,2140],{"id":2140},[13,2172,2173],{},"ライブ配信では映しっぱなしでもいいのですが、撮影禁止の箇所だったり環境によって映像のON\u002FOFFを切り替えたいと思っています。Goproアプリは確かにライブ配信は簡単なのですが、より細かい設定や制御は実装されていません。",[1653,2175,2176],{"id":2176},"登録者が50人必要",[13,2178,2179],{},"スマホ通じてライブ配信をする場合はどうやら50人が必要でしたが、RTMPやPCからであれば0人でもOKでした。",[13,2181,2182],{},"登録者的な問題だったり、より細かい制御を実装するために以下のような構成を考えた結果、まずは自前RTMPサーバーへの映像の送信と再生ができるかをテストしてみたかった次第です。最終的にはRTMPサーバーから映像を取得してyoutubeに流します。サーバーでは映像の表示制御やyoutubeのコメント読み上げなど配信に関係する機能を管理するものとします。",[17,2184],{":src":2185,":width":20},"'rtmp-docker-local\u002Ffig.png'",[41,2187,2188],{"id":2188},"実装概要",[13,2190,2191],{},"この記事での目標は",[1701,2193,2194,2197,2200],{},[28,2195,2196],{},"Goproからの映像をアプリを通じてコンテナ内のWebサーバーにRTMP通信で映像を送信。",[28,2198,2199],{},"映像をドキュメントルートへ配置。",[28,2201,2202],{},"webブラウザからアクセスして映像を見れうようにする。",[13,2204,2205],{},"まずはRTMPサーバーの実装を行います。使用しているOSはmacOs Catalina 10.15.5でdockerは3.5.2です。実装の手順としては",[1701,2207,2208,2211,2214],{},[28,2209,2210],{},"Dockerを用いてRTMPとwebが可能なNginxを構築する。",[28,2212,2213],{},"RTMPの設定をする。",[28,2215,2216],{},"web側でHLSにて映像をvideoタグを用いて再生する。",[1653,2218,2220],{"id":2219},"rtmpとは","RTMPとは？",[13,2222,2223],{},"ここまで出ているRTMPとはReal Time Messaging ProtocolのことでTCP上のプロトコルで映像、音声、データを細かいフラグメントに分けてストリーミング送信ができます。今回のようなリアルタイムに映像を撮影してサーバーに送信する際にも利用されます。",[1653,2225,2227],{"id":2226},"なぜnginx","なぜNginx？",[13,2229,2230,2231,2234],{},"NginxではRTMPモジュールというのがあり、インストールしてconfファイルに少し記述するだけで1935ポートに",[80,2232,2233],{},"rtmp:\u002F\u002Fexample.com\u002Flive","のようなURLでサーバーに送信できます。",[41,2236,2238],{"id":2237},"rtmpサーバー実装","RTMPサーバー実装",[1653,2240,2241],{"id":2241},"docker-composeの作成",[13,2243,2244,2245,2248,2249,2251,2252,2254],{},"では早速やっていきましょう。",[80,2246,2247],{},"rtmptest","みたいな適当なディレクトリを作成して、",[80,2250,90],{},"と",[80,2253,160],{},"ファイルを作成します。また、webとconfファイルを格納してボリュームしておくディレクトリも作成します。",[73,2256,2259],{"className":2257,"code":2258,"language":78},[76],"mkdir rtmptest\ncd rtmptest\n\ntouch Dockerfile docker-compose.yml\nmkdir html conf\n",[80,2260,2258],{"__ignoreMap":82},[13,2262,2263],{},"Dockerfileは以下のようにしておきます。",[73,2265,2267],{"className":88,"code":2266,"language":90,"meta":82,"style":82},"FROM tiangolo\u002Fnginx-rtmp\nVOLUME [\"\u002Fusr\u002Fshare\u002Fnginx\u002Fhtml\",\"\u002Fetc\u002Fnginx\"]\n",[80,2268,2269,2274],{"__ignoreMap":82},[94,2270,2271],{"class":96,"line":97},[94,2272,2273],{},"FROM tiangolo\u002Fnginx-rtmp\n",[94,2275,2276],{"class":96,"line":4},[94,2277,2278],{},"VOLUME [\"\u002Fusr\u002Fshare\u002Fnginx\u002Fhtml\",\"\u002Fetc\u002Fnginx\"]\n",[13,2280,2281,2282,2287],{},"今回は",[1783,2283,2286],{"href":2284,"rel":2285},"https:\u002F\u002Fhub.docker.com\u002Fr\u002Ftiangolo\u002Fnginx-rtmp\u002F",[1787],"rtmpの設定があるnginxのイメージ","を利用します。",[13,2289,2290,2292],{},[80,2291,160],{},"は以下の通りです。",[73,2294,2299],{"className":2295,"code":2296,"filename":2297,"language":2298,"meta":82,"style":82},"language-yaml shiki shiki-themes material-theme-ocean","version: '2'\nservices:\n  app:\n    build: .\n    ports:\n      - \"8085:80\"\n      - \"1935:1935\"\n    volumes:\n      -  .\u002Fhtml:\u002Fusr\u002Fshare\u002Fnginx\u002Fhtml\n      -  .\u002Fconf\u002Fnginx.conf:\u002Fetc\u002Fnginx\u002Fnginx.conf\n      -  .\u002Fconf\u002Fdefault.conf:\u002Fetc\u002Fnginx\u002Fconf.d\u002Fdefault.conf\n","docke-compose.yml","yaml",[80,2300,2301,2313,2319,2326,2334,2340,2351,2361,2367,2374,2381],{"__ignoreMap":82},[94,2302,2303,2305,2307,2309,2311],{"class":96,"line":97},[94,2304,169],{"class":168},[94,2306,173],{"class":172},[94,2308,176],{"class":172},[94,2310,180],{"class":179},[94,2312,183],{"class":172},[94,2314,2315,2317],{"class":96,"line":4},[94,2316,188],{"class":168},[94,2318,191],{"class":172},[94,2320,2321,2324],{"class":96,"line":108},[94,2322,2323],{"class":168},"  app",[94,2325,191],{"class":172},[94,2327,2328,2330,2332],{"class":96,"line":114},[94,2329,344],{"class":168},[94,2331,173],{"class":172},[94,2333,350],{"class":349},[94,2335,2336,2338],{"class":96,"line":120},[94,2337,213],{"class":168},[94,2339,191],{"class":172},[94,2341,2342,2344,2346,2349],{"class":96,"line":126},[94,2343,220],{"class":172},[94,2345,223],{"class":172},[94,2347,2348],{"class":179},"8085:80",[94,2350,229],{"class":172},[94,2352,2353,2355,2357,2359],{"class":96,"line":132},[94,2354,220],{"class":172},[94,2356,223],{"class":172},[94,2358,306],{"class":179},[94,2360,229],{"class":172},[94,2362,2363,2365],{"class":96,"line":243},[94,2364,246],{"class":168},[94,2366,191],{"class":172},[94,2368,2369,2371],{"class":96,"line":251},[94,2370,220],{"class":172},[94,2372,2373],{"class":179},"  .\u002Fhtml:\u002Fusr\u002Fshare\u002Fnginx\u002Fhtml\n",[94,2375,2376,2378],{"class":96,"line":259},[94,2377,220],{"class":172},[94,2379,2380],{"class":179},"  .\u002Fconf\u002Fnginx.conf:\u002Fetc\u002Fnginx\u002Fnginx.conf\n",[94,2382,2383,2385],{"class":96,"line":267},[94,2384,220],{"class":172},[94,2386,2387],{"class":179},"  .\u002Fconf\u002Fdefault.conf:\u002Fetc\u002Fnginx\u002Fconf.d\u002Fdefault.conf\n",[1653,2389,2390],{"id":2390},"confファイル調整",[13,2392,2393],{},"nginxのconfファイルを調整してRTMPとwebアクセスができるようにします。",[1790,2395,2396],{"id":148},"RTMP",[13,2398,2399],{},"RTMPはnginx.confというapacheで言うhttp.confに以下のように記述します。",[73,2401,2403],{"className":466,"code":2402,"filename":468,"language":469,"meta":82,"style":82},"worker_processes  auto;\n\nerror_log  \u002Fvar\u002Flog\u002Fnginx\u002Ferror.log notice;\npid        \u002Fvar\u002Frun\u002Fnginx.pid;\n\n\nevents {\n    worker_connections  1024;\n}\n\nrtmp_auto_push on;\n\nrtmp {\n    server {\n        listen 1935;\n        listen [::]:1935 ipv6only=on;\n        access_log \u002Fvar\u002Flog\u002Frtmp_access.log;\n        chunk_size 4096;\n        timeout 10s;\n\n        application live {\n            live on;\n\n            # HLSの記述欄\n            hls on;\n            # ここに映像ファイルが配置される\n            hls_path \u002Fusr\u002Fshare\u002Fnginx\u002Fhtml\u002Fhls;\n            hls_fragment 10s;\n        }\n    }\n}\n\n\n\nhttp {\n    include       \u002Fetc\u002Fnginx\u002Fmime.types;\n    default_type  application\u002Foctet-stream;\n\n    log_format  main  '$remote_addr - $remote_user [$time_local] \"$request\" '\n                      '$status $body_bytes_sent \"$http_referer\" '\n                      '\"$http_user_agent\" \"$http_x_forwarded_for\"';\n\n    access_log  \u002Fvar\u002Flog\u002Fnginx\u002Faccess.log  main;\n\n    sendfile        on;\n    #tcp_nopush     on;\n\n    keepalive_timeout  65;\n\n    #gzip  on;\n\n    include \u002Fetc\u002Fnginx\u002Fconf.d\u002F*.conf;\n}\n",[80,2404,2405,2409,2413,2417,2421,2425,2429,2433,2437,2441,2445,2449,2453,2457,2461,2465,2469,2473,2477,2481,2485,2489,2493,2497,2501,2505,2509,2514,2518,2522,2526,2530,2534,2538,2542,2546,2550,2554,2558,2562,2566,2570,2574,2578,2582,2586,2590,2594,2598,2602,2606,2610,2614],{"__ignoreMap":82},[94,2406,2407],{"class":96,"line":97},[94,2408,476],{},[94,2410,2411],{"class":96,"line":4},[94,2412,481],{"emptyLinePlaceholder":63},[94,2414,2415],{"class":96,"line":108},[94,2416,486],{},[94,2418,2419],{"class":96,"line":114},[94,2420,491],{},[94,2422,2423],{"class":96,"line":120},[94,2424,481],{"emptyLinePlaceholder":63},[94,2426,2427],{"class":96,"line":126},[94,2428,481],{"emptyLinePlaceholder":63},[94,2430,2431],{"class":96,"line":132},[94,2432,504],{},[94,2434,2435],{"class":96,"line":243},[94,2436,509],{},[94,2438,2439],{"class":96,"line":251},[94,2440,514],{},[94,2442,2443],{"class":96,"line":259},[94,2444,481],{"emptyLinePlaceholder":63},[94,2446,2447],{"class":96,"line":267},[94,2448,523],{},[94,2450,2451],{"class":96,"line":275},[94,2452,481],{"emptyLinePlaceholder":63},[94,2454,2455],{"class":96,"line":283},[94,2456,532],{},[94,2458,2459],{"class":96,"line":292},[94,2460,537],{},[94,2462,2463],{"class":96,"line":299},[94,2464,542],{},[94,2466,2467],{"class":96,"line":311},[94,2468,547],{},[94,2470,2471],{"class":96,"line":318},[94,2472,552],{},[94,2474,2475],{"class":96,"line":326},[94,2476,557],{},[94,2478,2479],{"class":96,"line":333},[94,2480,562],{},[94,2482,2483],{"class":96,"line":341},[94,2484,481],{"emptyLinePlaceholder":63},[94,2486,2487],{"class":96,"line":353},[94,2488,571],{},[94,2490,2491],{"class":96,"line":361},[94,2492,576],{},[94,2494,2495],{"class":96,"line":369},[94,2496,481],{"emptyLinePlaceholder":63},[94,2498,2499],{"class":96,"line":376},[94,2500,585],{},[94,2502,2503],{"class":96,"line":388},[94,2504,590],{},[94,2506,2507],{"class":96,"line":395},[94,2508,595],{},[94,2510,2511],{"class":96,"line":403},[94,2512,2513],{},"            hls_path \u002Fusr\u002Fshare\u002Fnginx\u002Fhtml\u002Fhls;\n",[94,2515,2516],{"class":96,"line":411},[94,2517,605],{},[94,2519,2520],{"class":96,"line":419},[94,2521,615],{},[94,2523,2524],{"class":96,"line":427},[94,2525,620],{},[94,2527,2528],{"class":96,"line":435},[94,2529,514],{},[94,2531,2532],{"class":96,"line":447},[94,2533,481],{"emptyLinePlaceholder":63},[94,2535,2536],{"class":96,"line":455},[94,2537,481],{"emptyLinePlaceholder":63},[94,2539,2540],{"class":96,"line":631},[94,2541,481],{"emptyLinePlaceholder":63},[94,2543,2544],{"class":96,"line":636},[94,2545,644],{},[94,2547,2548],{"class":96,"line":641},[94,2549,650],{},[94,2551,2552],{"class":96,"line":647},[94,2553,656],{},[94,2555,2556],{"class":96,"line":653},[94,2557,481],{"emptyLinePlaceholder":63},[94,2559,2560],{"class":96,"line":659},[94,2561,667],{},[94,2563,2564],{"class":96,"line":664},[94,2565,673],{},[94,2567,2568],{"class":96,"line":670},[94,2569,679],{},[94,2571,2572],{"class":96,"line":676},[94,2573,481],{"emptyLinePlaceholder":63},[94,2575,2576],{"class":96,"line":682},[94,2577,690],{},[94,2579,2580],{"class":96,"line":687},[94,2581,481],{"emptyLinePlaceholder":63},[94,2583,2584],{"class":96,"line":693},[94,2585,701],{},[94,2587,2588],{"class":96,"line":698},[94,2589,707],{},[94,2591,2592],{"class":96,"line":704},[94,2593,481],{"emptyLinePlaceholder":63},[94,2595,2596],{"class":96,"line":710},[94,2597,718],{},[94,2599,2600],{"class":96,"line":715},[94,2601,481],{"emptyLinePlaceholder":63},[94,2603,2604],{"class":96,"line":721},[94,2605,729],{},[94,2607,2608],{"class":96,"line":726},[94,2609,481],{"emptyLinePlaceholder":63},[94,2611,2612],{"class":96,"line":732},[94,2613,740],{},[94,2615,2616],{"class":96,"line":737},[94,2617,514],{},[13,2619,2620,2621,2624],{},"このファイルはコンテナ内の",[80,2622,2623],{},"nginx.conf","にボリュームします。tiangolo\u002Fnginx-rtmpのイメージで生成されるnginx.confはRTMPのために最低限の記述しかないので上記のようにします。",[13,2626,2627],{},"RTMPでは以下の設定です。",[73,2629,2631],{"className":466,"code":2630,"language":469,"meta":82,"style":82},"rtmp {\n    server {\n        listen 1935;\n        listen [::]:1935 ipv6only=on;\n        access_log \u002Fvar\u002Flog\u002Frtmp_access.log;\n        chunk_size 4096;\n        timeout 10s;\n\n        application live {\n            live on;\n\n            # HLSの記述欄\n            hls on;\n            # ここに映像ファイルが配置される\n            hls_path \u002Fusr\u002Fshare\u002Fnginx\u002Fhtml\u002Fhls;\n            hls_fragment 10s;\n        }\n    }\n}\n",[80,2632,2633,2637,2641,2645,2649,2653,2657,2661,2665,2669,2673,2677,2681,2685,2689,2693,2697,2701,2705],{"__ignoreMap":82},[94,2634,2635],{"class":96,"line":97},[94,2636,532],{},[94,2638,2639],{"class":96,"line":4},[94,2640,537],{},[94,2642,2643],{"class":96,"line":108},[94,2644,542],{},[94,2646,2647],{"class":96,"line":114},[94,2648,547],{},[94,2650,2651],{"class":96,"line":120},[94,2652,552],{},[94,2654,2655],{"class":96,"line":126},[94,2656,557],{},[94,2658,2659],{"class":96,"line":132},[94,2660,562],{},[94,2662,2663],{"class":96,"line":243},[94,2664,481],{"emptyLinePlaceholder":63},[94,2666,2667],{"class":96,"line":251},[94,2668,571],{},[94,2670,2671],{"class":96,"line":259},[94,2672,576],{},[94,2674,2675],{"class":96,"line":267},[94,2676,481],{"emptyLinePlaceholder":63},[94,2678,2679],{"class":96,"line":275},[94,2680,585],{},[94,2682,2683],{"class":96,"line":283},[94,2684,590],{},[94,2686,2687],{"class":96,"line":292},[94,2688,595],{},[94,2690,2691],{"class":96,"line":299},[94,2692,2513],{},[94,2694,2695],{"class":96,"line":311},[94,2696,605],{},[94,2698,2699],{"class":96,"line":318},[94,2700,615],{},[94,2702,2703],{"class":96,"line":326},[94,2704,620],{},[94,2706,2707],{"class":96,"line":333},[94,2708,514],{},[13,2710,2711,2712,2714],{},"ここでは1935ポートでRTMPをリッスンし、また",[80,2713,2233],{},"というURLでアップロードできるようにしています。",[1790,2716,2717],{"id":2717},"web",[13,2719,2720,2721,2724],{},"webは以下のようにしておきます。ドキュメントルートは",[80,2722,2723],{},"\u002Fusr\u002Fshare\u002Fnginx\u002Fhtml","です。",[73,2726,2728],{"className":466,"code":2727,"filename":468,"language":469,"meta":82,"style":82},"server {\n    listen       80;\n    listen  [::]:80;\n    server_name  localhost;\n\n    #access_log  \u002Fvar\u002Flog\u002Fnginx\u002Fhost.access.log  main;\n\n    location \u002F {\n        root   \u002Fusr\u002Fshare\u002Fnginx\u002Fhtml;\n        index  index.html index.htm;\n    }\n\n    #error_page  404              \u002F404.html;\n\n    # redirect server error pages to the static page \u002F50x.html\n    #\n    error_page   500 502 503 504  \u002F50x.html;\n    location = \u002F50x.html {\n        root   \u002Fusr\u002Fshare\u002Fnginx\u002Fhtml;\n    }\n\n    # proxy the PHP scripts to Apache listening on 127.0.0.1:80\n    #\n    #location ~ \\.php$ {\n    #    proxy_pass   http:\u002F\u002F127.0.0.1;\n    #}\n\n    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000\n    #\n    #location ~ \\.php$ {\n    #    root           html;\n    #    fastcgi_pass   127.0.0.1:9000;\n    #    fastcgi_index  index.php;\n    #    fastcgi_param  SCRIPT_FILENAME  \u002Fscripts$fastcgi_script_name;\n    #    include        fastcgi_params;\n    #}\n\n    # deny access to .htaccess files, if Apache's document root\n    # concurs with nginx's one\n    #\n    #location ~ \u002F\\.ht {\n    #    deny  all;\n    #}\n}\n",[80,2729,2730,2734,2738,2742,2746,2750,2754,2758,2762,2767,2771,2775,2779,2783,2787,2791,2795,2799,2803,2807,2811,2815,2819,2823,2827,2831,2835,2839,2843,2847,2851,2855,2859,2863,2867,2871,2875,2879,2883,2887,2891,2895,2899,2903],{"__ignoreMap":82},[94,2731,2732],{"class":96,"line":97},[94,2733,758],{},[94,2735,2736],{"class":96,"line":4},[94,2737,763],{},[94,2739,2740],{"class":96,"line":108},[94,2741,768],{},[94,2743,2744],{"class":96,"line":114},[94,2745,773],{},[94,2747,2748],{"class":96,"line":120},[94,2749,481],{"emptyLinePlaceholder":63},[94,2751,2752],{"class":96,"line":126},[94,2753,782],{},[94,2755,2756],{"class":96,"line":132},[94,2757,481],{"emptyLinePlaceholder":63},[94,2759,2760],{"class":96,"line":243},[94,2761,791],{},[94,2763,2764],{"class":96,"line":251},[94,2765,2766],{},"        root   \u002Fusr\u002Fshare\u002Fnginx\u002Fhtml;\n",[94,2768,2769],{"class":96,"line":259},[94,2770,801],{},[94,2772,2773],{"class":96,"line":267},[94,2774,620],{},[94,2776,2777],{"class":96,"line":275},[94,2778,481],{"emptyLinePlaceholder":63},[94,2780,2781],{"class":96,"line":283},[94,2782,814],{},[94,2784,2785],{"class":96,"line":292},[94,2786,481],{"emptyLinePlaceholder":63},[94,2788,2789],{"class":96,"line":299},[94,2790,823],{},[94,2792,2793],{"class":96,"line":311},[94,2794,828],{},[94,2796,2797],{"class":96,"line":318},[94,2798,833],{},[94,2800,2801],{"class":96,"line":326},[94,2802,838],{},[94,2804,2805],{"class":96,"line":333},[94,2806,2766],{},[94,2808,2809],{"class":96,"line":341},[94,2810,620],{},[94,2812,2813],{"class":96,"line":353},[94,2814,481],{"emptyLinePlaceholder":63},[94,2816,2817],{"class":96,"line":361},[94,2818,855],{},[94,2820,2821],{"class":96,"line":369},[94,2822,828],{},[94,2824,2825],{"class":96,"line":376},[94,2826,864],{},[94,2828,2829],{"class":96,"line":388},[94,2830,869],{},[94,2832,2833],{"class":96,"line":395},[94,2834,874],{},[94,2836,2837],{"class":96,"line":403},[94,2838,481],{"emptyLinePlaceholder":63},[94,2840,2841],{"class":96,"line":411},[94,2842,883],{},[94,2844,2845],{"class":96,"line":419},[94,2846,828],{},[94,2848,2849],{"class":96,"line":427},[94,2850,864],{},[94,2852,2853],{"class":96,"line":435},[94,2854,896],{},[94,2856,2857],{"class":96,"line":447},[94,2858,901],{},[94,2860,2861],{"class":96,"line":455},[94,2862,906],{},[94,2864,2865],{"class":96,"line":631},[94,2866,911],{},[94,2868,2869],{"class":96,"line":636},[94,2870,916],{},[94,2872,2873],{"class":96,"line":641},[94,2874,874],{},[94,2876,2877],{"class":96,"line":647},[94,2878,481],{"emptyLinePlaceholder":63},[94,2880,2881],{"class":96,"line":653},[94,2882,929],{},[94,2884,2885],{"class":96,"line":659},[94,2886,934],{},[94,2888,2889],{"class":96,"line":664},[94,2890,828],{},[94,2892,2893],{"class":96,"line":670},[94,2894,943],{},[94,2896,2897],{"class":96,"line":676},[94,2898,948],{},[94,2900,2901],{"class":96,"line":682},[94,2902,874],{},[94,2904,2905],{"class":96,"line":687},[94,2906,514],{},[13,2908,2909],{},"RTMPを含むNginxの設定はこれでOKです。",[1653,2911,2912],{"id":2912},"web側実装",[13,2914,2915,2918],{},[80,2916,2917],{},"html\u002Ftest.html","として以下のように作成します。",[73,2920,2923],{"className":1116,"code":2921,"filename":2922,"language":1119,"meta":82,"style":82},"\u003C!DOCTYPE html>\n\u003Chtml>\n\n\u003Chead>\n  \u003Cmeta charset=\"utf-8\">\n  \u003Ctitle>MediaElement\u003C\u002Ftitle>\n  \u003C!-- MediaElement style -->\n  \u003Clink rel=\"stylesheet\" href=\"\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fmediaelement\u002F4.2.9\u002Fmediaelementplayer.css\" \u002F>\n\u003C\u002Fhead>\n\n\u003Cbody>\n  \u003C!-- MediaElement -->\n  \u003Cscript src=\"\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Fmediaelement\u002F4.2.9\u002Fmediaelement-and-player.js\">\u003C\u002Fscript>\n\n  \u003Cvideo id=\"player\" width=\"640\" height=\"360\">\n\u003C\u002Fbody>\n\u003Cscript type=\"text\u002Fjavascript\">\n\n      var player = new MediaElementPlayer('player', {\n        success: function(mediaElement, originalNode) {\n          console.log(\"Player initialised\");\n        }\n      });\n        player.setSrc(\"hls\u002F.m3u8\");\n\u003C\u002Fscript>\n\n\u003C\u002Fhtml>\n","test.html",[80,2924,2925,2935,2943,2947,2955,2973,2989,2993,3021,3029,3033,3041,3045,3067,3071,3109,3117,3135,3139,3163,3183,3203,3207,3215,3236,3244,3248],{"__ignoreMap":82},[94,2926,2927,2929,2931,2933],{"class":96,"line":97},[94,2928,1126],{"class":172},[94,2930,1129],{"class":168},[94,2932,1133],{"class":1132},[94,2934,1136],{"class":172},[94,2936,2937,2939,2941],{"class":96,"line":4},[94,2938,1141],{"class":172},[94,2940,1119],{"class":168},[94,2942,1136],{"class":172},[94,2944,2945],{"class":96,"line":108},[94,2946,481],{"emptyLinePlaceholder":63},[94,2948,2949,2951,2953],{"class":96,"line":114},[94,2950,1141],{"class":172},[94,2952,1156],{"class":168},[94,2954,1136],{"class":172},[94,2956,2957,2959,2961,2963,2965,2967,2969,2971],{"class":96,"line":120},[94,2958,1163],{"class":172},[94,2960,1166],{"class":168},[94,2962,1169],{"class":1132},[94,2964,1172],{"class":172},[94,2966,1175],{"class":172},[94,2968,1178],{"class":179},[94,2970,1175],{"class":172},[94,2972,1136],{"class":172},[94,2974,2975,2977,2979,2981,2983,2985,2987],{"class":96,"line":126},[94,2976,1163],{"class":172},[94,2978,1189],{"class":168},[94,2980,1192],{"class":172},[94,2982,1196],{"class":1195},[94,2984,1199],{"class":172},[94,2986,1189],{"class":168},[94,2988,1136],{"class":172},[94,2990,2991],{"class":96,"line":132},[94,2992,1209],{"class":1208},[94,2994,2995,2997,2999,3001,3003,3005,3007,3009,3011,3013,3015,3017,3019],{"class":96,"line":243},[94,2996,1163],{"class":172},[94,2998,1216],{"class":168},[94,3000,1219],{"class":1132},[94,3002,1172],{"class":172},[94,3004,1175],{"class":172},[94,3006,1226],{"class":179},[94,3008,1175],{"class":172},[94,3010,1231],{"class":1132},[94,3012,1172],{"class":172},[94,3014,1175],{"class":172},[94,3016,1238],{"class":179},[94,3018,1175],{"class":172},[94,3020,1243],{"class":172},[94,3022,3023,3025,3027],{"class":96,"line":251},[94,3024,1199],{"class":172},[94,3026,1156],{"class":168},[94,3028,1136],{"class":172},[94,3030,3031],{"class":96,"line":259},[94,3032,481],{"emptyLinePlaceholder":63},[94,3034,3035,3037,3039],{"class":96,"line":267},[94,3036,1141],{"class":172},[94,3038,1262],{"class":168},[94,3040,1136],{"class":172},[94,3042,3043],{"class":96,"line":275},[94,3044,1269],{"class":1208},[94,3046,3047,3049,3051,3053,3055,3057,3059,3061,3063,3065],{"class":96,"line":283},[94,3048,1163],{"class":172},[94,3050,1276],{"class":168},[94,3052,1279],{"class":1132},[94,3054,1172],{"class":172},[94,3056,1175],{"class":172},[94,3058,1286],{"class":179},[94,3060,1175],{"class":172},[94,3062,1291],{"class":172},[94,3064,1276],{"class":168},[94,3066,1136],{"class":172},[94,3068,3069],{"class":96,"line":292},[94,3070,481],{"emptyLinePlaceholder":63},[94,3072,3073,3075,3077,3079,3081,3083,3085,3087,3089,3091,3093,3095,3097,3099,3101,3103,3105,3107],{"class":96,"line":299},[94,3074,1163],{"class":172},[94,3076,1306],{"class":168},[94,3078,1309],{"class":1132},[94,3080,1172],{"class":172},[94,3082,1175],{"class":172},[94,3084,1316],{"class":179},[94,3086,1175],{"class":172},[94,3088,1321],{"class":1132},[94,3090,1172],{"class":172},[94,3092,1175],{"class":172},[94,3094,1328],{"class":179},[94,3096,1175],{"class":172},[94,3098,1333],{"class":1132},[94,3100,1172],{"class":172},[94,3102,1175],{"class":172},[94,3104,1340],{"class":179},[94,3106,1175],{"class":172},[94,3108,1136],{"class":172},[94,3110,3111,3113,3115],{"class":96,"line":311},[94,3112,1199],{"class":172},[94,3114,1262],{"class":168},[94,3116,1136],{"class":172},[94,3118,3119,3121,3123,3125,3127,3129,3131,3133],{"class":96,"line":318},[94,3120,1141],{"class":172},[94,3122,1276],{"class":168},[94,3124,1361],{"class":1132},[94,3126,1172],{"class":172},[94,3128,1175],{"class":172},[94,3130,1368],{"class":179},[94,3132,1175],{"class":172},[94,3134,1136],{"class":172},[94,3136,3137],{"class":96,"line":326},[94,3138,481],{"emptyLinePlaceholder":63},[94,3140,3141,3143,3145,3147,3149,3151,3153,3155,3157,3159,3161],{"class":96,"line":333},[94,3142,1381],{"class":1132},[94,3144,1384],{"class":1195},[94,3146,1172],{"class":172},[94,3148,1389],{"class":172},[94,3150,1393],{"class":1392},[94,3152,1396],{"class":1195},[94,3154,1399],{"class":172},[94,3156,1316],{"class":179},[94,3158,1399],{"class":172},[94,3160,1406],{"class":172},[94,3162,1409],{"class":172},[94,3164,3165,3167,3169,3171,3173,3175,3177,3179,3181],{"class":96,"line":341},[94,3166,1414],{"class":1392},[94,3168,173],{"class":172},[94,3170,1419],{"class":1132},[94,3172,1396],{"class":172},[94,3174,1425],{"class":1424},[94,3176,1406],{"class":172},[94,3178,1430],{"class":1424},[94,3180,1433],{"class":172},[94,3182,1409],{"class":172},[94,3184,3185,3187,3189,3191,3193,3195,3197,3199,3201],{"class":96,"line":353},[94,3186,1440],{"class":1195},[94,3188,1443],{"class":172},[94,3190,1446],{"class":1392},[94,3192,1396],{"class":168},[94,3194,1175],{"class":172},[94,3196,1453],{"class":179},[94,3198,1175],{"class":172},[94,3200,1433],{"class":168},[94,3202,1460],{"class":172},[94,3204,3205],{"class":96,"line":361},[94,3206,615],{"class":172},[94,3208,3209,3211,3213],{"class":96,"line":369},[94,3210,1469],{"class":172},[94,3212,1433],{"class":1195},[94,3214,1460],{"class":172},[94,3216,3217,3219,3221,3223,3225,3227,3230,3232,3234],{"class":96,"line":376},[94,3218,1478],{"class":1195},[94,3220,1443],{"class":172},[94,3222,1483],{"class":1392},[94,3224,1396],{"class":1195},[94,3226,1175],{"class":172},[94,3228,3229],{"class":179},"hls\u002F.m3u8",[94,3231,1175],{"class":172},[94,3233,1433],{"class":1195},[94,3235,1460],{"class":172},[94,3237,3238,3240,3242],{"class":96,"line":388},[94,3239,1199],{"class":172},[94,3241,1276],{"class":168},[94,3243,1136],{"class":172},[94,3245,3246],{"class":96,"line":395},[94,3247,481],{"emptyLinePlaceholder":63},[94,3249,3250,3252,3254],{"class":96,"line":403},[94,3251,1199],{"class":172},[94,3253,1119],{"class":168},[94,3255,1136],{"class":172},[13,3257,3258,3259,3261],{},"hlsが再生できるようにjsの再生ライブラリを用意します。",[80,3260,3229],{},"については後述します。",[1653,3263,3264],{"id":3264},"dokcer起動",[73,3266,3269],{"className":3267,"code":3268,"language":78},[76],"docker-compose up -d\n",[80,3270,3268],{"__ignoreMap":82},[13,3272,3273],{},"を用いてdockerイメージを起動しましょう。",[41,3275,3277],{"id":3276},"配信テスト","配信テスト！",[1653,3279,3281],{"id":3280},"macのipを確認","MacのIPを確認",[13,3283,3284],{},"今回のはMac上にRTMPサーバを立てたのでMacのIPを確認しておきます。「システム環境設定」から「ネットワーク」を選択し、Wi-FiからIPアドレスを確認します。このPCは「192.168.0.3」なので",[13,3286,3287,3288,3291,3292,3295],{},"RTMPは",[80,3289,3290],{},"rtmp:\u002F\u002F192.168.0.3\u002Flive","、webは",[80,3293,3294],{},"http:\u002F\u002F192.168.0.3\u002Findex.html","でアクセスできます。",[17,3297],{":src":3298,":width":20},"'rtmp-docker-local\u002Fmac.png'",[1653,3300,3301],{"id":3301},"gopro側の設定",[13,3303,3304],{},"Goproとアプリのテザリングなどは省略します。",[13,3306,3307,3312],{},[1783,3308,3311],{"href":3309,"rel":3310},"https:\u002F\u002Fapps.apple.com\u002Fjp\u002Fapp\u002Fgopro-quik-%E5%8B%95%E7%94%BB-%E5%86%99%E7%9C%9F%E7%B7%A8%E9%9B%86%E3%82%A2%E3%83%97%E3%83%AA\u002Fid561350520",[1787],"公式アプリ（app store）",[1783,3313,3316],{"href":3314,"rel":3315},"https:\u002F\u002Fplay.google.com\u002Fstore\u002Fapps\u002Fdetails?id=com.gopro.smarty&hl=ja&gl=US",[1787],"公式アプリ（android）",[13,3318,3319,3320],{},"goproとアプリを接続して、「ライブの設定」に移動\n",[17,3321],{":src":3322,":width":3323,":center":1810},"'rtmp-docker-local\u002Fg1.jpg'","'200px'",[13,3325,3326,3327],{},"その他、RTMPを選択\n",[17,3328],{":src":3329,":width":3323,":center":1810},"'rtmp-docker-local\u002Fg2.jpg'",[13,3331,3332,3333,3335,3336],{},"Macと同じwi-fiに接続して",[80,3334,3290],{},"をURLに入力\n",[17,3337],{":src":3338,":width":3323,":center":1810},"'rtmp-docker-local\u002Fg3.jpg'",[13,3340,3341],{},"設定が完了したらライブ配信を開始します。",[1653,3343,3344],{"id":3344},"サーバーでは",[13,3346,3347],{},"ライブ配信を開始するとRTMPのURLへ動画がアップされていきます。サーバーの方ではドキュメントルートにこの映像のHLSが配置されるようにしたので、マウントの関係上以下のようなディレクトリが発生していると思います。",[17,3349],{":src":3350,":width":3351,":center":1810},"'rtmp-docker-local\u002Fserver.png'","'100px'",[13,3353,3354,3355,3357],{},"先程のHTMLにあった「",[80,3356,3229],{},"」はサーバーにアップロードされた映像の元でもあるファイルを示しています。",[1653,3359,3361],{"id":3360},"ブラウザを見てみると","ブラウザを見てみると..",[13,3363,3364,3365,3368],{},"では",[80,3366,3367],{},"http:\u002F\u002Flocalhost:8085\u002Findex.html","でPCから映像を見てみましょう。再生ボタンを押すと以下のようになりました。",[17,3370],{":src":3371,":width":20},"'rtmp-docker-local\u002Fweb.png'",[13,3373,3374],{},"しっかりとGoproが写している映像が表示され、音声も流れました。画面を写していましたが、いろいろカメラを回すと確かに映像・音声も切り替わります。",[13,3376,3377],{},"とりあえずこれでライブ配信映像を自前で実装したサーバに送ることが確認できました。今度はサーバー内での映像をyoutubeのlivestreaming apiなどを通じて実際にライブ映像に流せるようにしてみます。",[41,3379,3380],{"id":3380},"参考",[13,3382,3383],{},"今回参考にした資料です。非常に助かりました。",[25,3385,3386,3393,3400],{},[28,3387,3388],{},[1783,3389,3392],{"href":3390,"rel":3391},"https:\u002F\u002Fqiita.com\u002Fkobakazu0429\u002Fitems\u002F33739b83000583c5448e",[1787],"docker-nginx-rtmpとiPhoneでお手軽マルチカメラライブストリーミング配信環境の構築",[28,3394,3395],{},[1783,3396,3399],{"href":3397,"rel":3398},"https:\u002F\u002Fblog.litus.co.jp\u002F2020\u002F11\u002Fdockerhlswebcentos-nginxffmpegdocker.html",[1787],"Dockerコンテナ化させたHLSのwebストリーミング配信環境構築",[28,3401,3402],{},[1783,3403,3405],{"href":2284,"rel":3404},[1787],"Docker image",[2069,3407,2071],{},{"title":82,"searchDepth":108,"depth":108,"links":3409},[3410,3415,3419,3428,3434],{"id":2129,"depth":4,"text":2129,"children":3411},[3412,3413,3414],{"id":2146,"depth":108,"text":2146},{"id":2140,"depth":108,"text":2140},{"id":2176,"depth":108,"text":2176},{"id":2188,"depth":4,"text":2188,"children":3416},[3417,3418],{"id":2219,"depth":108,"text":2220},{"id":2226,"depth":108,"text":2227},{"id":2237,"depth":4,"text":2238,"children":3420},[3421,3422,3426,3427],{"id":2241,"depth":108,"text":2241},{"id":2390,"depth":108,"text":2390,"children":3423},[3424,3425],{"id":148,"depth":114,"text":2396},{"id":2717,"depth":114,"text":2717},{"id":2912,"depth":108,"text":2912},{"id":3264,"depth":108,"text":3264},{"id":3276,"depth":4,"text":3277,"children":3429},[3430,3431,3432,3433],{"id":3280,"depth":108,"text":3281},{"id":3301,"depth":108,"text":3301},{"id":3344,"depth":108,"text":3344},{"id":3360,"depth":108,"text":3361},{"id":3380,"depth":4,"text":3380},[2094],"2022-05-20","ローカルのDockerとNginxを用いてGoproからライブ配信映像をRTMPを再生する",{},"\u002Fseries\u002Frtmp-manager-server-1",{"title":2112,"description":3437},"series\u002Frtmp-manager-server-1",[2105,2106],"rtmp-docker-local\u002Fthumbnail.png","_e2Aj1JaZSf-KJSGe6AqjuPlf5YdLmKDjuCXzhFw0dg",1780987150682]