{"id":1424,"date":"2024-10-14T23:33:10","date_gmt":"2024-10-14T15:33:10","guid":{"rendered":"https:\/\/www.fanyamin.com\/wordpress\/?p=1424"},"modified":"2024-10-14T23:33:10","modified_gmt":"2024-10-14T15:33:10","slug":"%e5%a6%82%e4%bd%95%e9%80%9a%e8%bf%87-web-%e6%92%ad%e6%94%be%e8%bf%9c%e7%a8%8b%e7%94%b5%e8%84%91%e7%9a%84%e8%a7%86%e9%a2%91","status":"publish","type":"post","link":"https:\/\/www.fanyamin.com\/wordpress\/?p=1424","title":{"rendered":"\u5982\u4f55\u901a\u8fc7 Web \u64ad\u653e\u8fdc\u7a0b\u7535\u8111\u7684\u89c6\u9891"},"content":{"rendered":"<ul>\n<li>\u5c06\u672c\u5730\u7684\u89c6\u9891\u6587\u4ef6\u63a8\u9001\u5230 SRS<\/li>\n<\/ul>\n<pre><code>gst-launch-1.0 -v filesrc location=material\/talk.mp4 \\\n  ! decodebin name=demux \\\n  demux. ! queue ! videoconvert \\\n  ! x264enc bitrate=1000 speed-preset=superfast tune=zerolatency \\\n  ! flvmux streamable=true name=mux \\\n  demux. ! queue ! audioconvert \\\n  ! voaacenc bitrate=128000 \\\n  ! mux. mux. \\\n  ! rtmpsink location=&#039;rtmp:\/\/192.168.104.37:1935\/live\/talktest&#039;<\/code><\/pre>\n<ul>\n<li>\u4f7f\u7528 flv.js \u4ece SRS \u64ad\u653e\u6b64\u89c6\u9891\u6587\u4ef6<\/li>\n<\/ul>\n<pre><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;Live Stream with flv.js and Controls&lt;\/title&gt;\n    &lt;!-- Bootstrap CSS --&gt;\n    &lt;link href=&quot;https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha1\/dist\/css\/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;\n    &lt;!-- flv.js --&gt;\n    &lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/flv.js@latest&quot;&gt;&lt;\/script&gt;\n    &lt;style&gt;\n        .container-wide {\n            max-width: 80%; \/* Extend the width of the container *\/\n        }\n        #videoElement {\n            width: 100%; \/* Keep video responsive *\/\n            max-width: 1280px; \/* Set maximum width of the video element *\/\n            height: auto; \/* Keep aspect ratio *\/\n            max-height: 720px; \/* Set maximum height of the video element *\/\n            border: 1px solid #ddd; \/* Border around the video *\/\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;div class=&quot;container container-wide my-5&quot;&gt;\n    &lt;h2 class=&quot;text-center mb-4&quot;&gt;Remote Video Stream&lt;\/h2&gt;\n\n    &lt;!-- URL Input Section --&gt;\n    &lt;div class=&quot;row justify-content-center mb-4&quot;&gt;\n        &lt;div class=&quot;col-md-10&quot;&gt;\n            &lt;div class=&quot;input-group&quot;&gt;\n                &lt;span class=&quot;input-group-text&quot;&gt;FLV URL:&lt;\/span&gt;\n                &lt;input id=&quot;flvUrl&quot; type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;FLV URL, e.g. http:\/\/192.168.0.108:8080\/live\/audio_test.flv&quot;&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;!-- Video and Controls Section --&gt;\n    &lt;div class=&quot;row justify-content-center&quot;&gt;\n        &lt;div class=&quot;col-md-10&quot;&gt;\n            &lt;div class=&quot;card&quot;&gt;\n                &lt;div class=&quot;card-body text-center&quot;&gt;\n                    &lt;video id=&quot;videoElement&quot; controls&gt;&lt;\/video&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n\n            &lt;div class=&quot;mt-4 text-center&quot;&gt;\n                &lt;button id=&quot;startButton&quot; class=&quot;btn btn-success me-2&quot;&gt;Start Play&lt;\/button&gt;\n                &lt;button id=&quot;stopButton&quot; class=&quot;btn btn-danger&quot;&gt;Stop Play&lt;\/button&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\n    let flvPlayer;\n    let videoElement = document.getElementById(&#039;videoElement&#039;);\n\n    document.getElementById(&#039;startButton&#039;).addEventListener(&#039;click&#039;, function() {\n        const flvUrl = document.getElementById(&#039;flvUrl&#039;).value;\n\n        if (!flvUrl) {\n            alert(&quot;Please enter a device address.&quot;);\n            return;\n        }\n\n        if (flvjs.isSupported()) {\n            if (flvPlayer) {\n                flvPlayer.unload();\n                flvPlayer.detachMediaElement();\n                flvPlayer.destroy();\n            }\n\n            flvPlayer = flvjs.createPlayer({\n                type: &#039;flv&#039;,\n                url: flvUrl\n            });\n            console.log(&quot;playback flv: &quot;, flvUrl);\n            flvPlayer.attachMediaElement(videoElement);\n            flvPlayer.load();\n            flvPlayer.play();\n        } else {\n            alert(&quot;FLV.js is not supported on this browser.&quot;);\n        }\n    });\n\n    document.getElementById(&#039;stopButton&#039;).addEventListener(&#039;click&#039;, function() {\n        if (flvPlayer) {\n            flvPlayer.pause();\n            flvPlayer.unload();\n            flvPlayer.detachMediaElement();\n            flvPlayer.destroy();\n            flvPlayer = null;\n        }\n    });\n&lt;\/script&gt;\n\n&lt;!-- Bootstrap JS --&gt;\n&lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha1\/dist\/js\/bootstrap.bundle.min.js&quot;&gt;&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>\u6548\u679c\u5982\u4e0b<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.fanyamin.com\/wordpress\/wp-content\/uploads\/2024\/10\/image-1728919985166.png\" alt=\"file\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5c06\u672c\u5730\u7684\u89c6\u9891\u6587\u4ef6\u63a8\u9001\u5230 SRS gst-launch-1.0 -v filesrc location=material\/talk.mp4 \\ ! decodebin name=demux \\ demux. ! queue ! videoconvert \\ ! x264enc bitrate=1000 speed-preset=superfast tune=zerolatency \\ ! flvmux streamable=true name=mux \\ demux. ! queue ! audioconvert \\ ! voaacenc bitrate=128000 \\ ! mux. mux. \\ ! rtmpsink location=&#039;rtmp:\/\/192.168.104.37:1935\/live\/talktest&#039; \u4f7f\u7528 flv.js \u4ece SRS \u64ad\u653e\u6b64\u89c6\u9891\u6587\u4ef6 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; [&hellip;] <a class=\"read-more\" href=\"https:\/\/www.fanyamin.com\/wordpress\/?p=1424\" title=\"Permanent Link to: \u5982\u4f55\u901a\u8fc7 Web \u64ad\u653e\u8fdc\u7a0b\u7535\u8111\u7684\u89c6\u9891\">&rarr;Read&nbsp;more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-1424","post","type-post","status-publish","format-standard","hentry","category-5"],"_links":{"self":[{"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1424"}],"collection":[{"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1424"}],"version-history":[{"count":1,"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1424\/revisions"}],"predecessor-version":[{"id":1426,"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/1424\/revisions\/1426"}],"wp:attachment":[{"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fanyamin.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}