推流，網頁播放

時間 2020-07-19

標籤網頁播放欄目 HTML 简体版

原文原文鏈接

BiliBili有一個大神，開源了一套js，名字叫作flv.jscss

中間嘗試了不少東西，html

首先rtmp推流，而後需求是flv能夠播放，而後要用nginx，因此下載了nginx for windows版本node

而後ffmpeg推流失敗以後，由於須要支持flv的視頻流，因此nginx須要一個模塊名字叫作nginx-rtmp-module-masterlinux

因此到github上找到相關代碼發現，下載，編譯，而後下載依賴項，下載mingw,下載mysys最後編譯失敗，由於mingw下不了nginx

而後用linux發現編譯失敗git

至此這條路失敗。github

中間回想目的，客戶端推流，服務端轉發，而後再用瀏覽器播放，web

這裏選擇了nodejs而後加入了模塊nodemediaserver。windows

而後下載了obs studio中間下載了一個名字叫作OBS-Studio-22.0.2-Full-Installer-x64 version:22.0.2瀏覽器

而後作推流，固然我換成了ffmpeg推流發現流的名字就是所謂的第二個參數

而後下載flv.js，放到public目錄

根據功能，發現推流以後，轉成flv的http在線，直接把地址寫成:

//url: 'http://localhost:8000/live/s.flv'

這個是websocket寫法其中live是路徑，s是流的名稱

url: 'ws://localhost:8000/live/s.flv'

ffmpeg的推流寫法:rtmp://localhost:1938/live/s.flv

參考地址:https://github.com/illuspas/Node-Media-Server

使用obs推流到node_media_server地址:

https://www.jianshu.com/p/95c820473e9f

ffmpeg命令:

ffmpeg -list_devices true -f dshow -i dummy
ffmpeg -f dshow -i video="screen-capture-recorder" -f dshow -i audio="virtual-audio-capturer" -pix_fmt yuv420p -vcodec libx264 -g 19 -s 1280x720 -r 15 -q 10 -ar 44100 -ac 2 -tune zerolatency -preset ultrafast -f flv "rtmp://localhost:1935/live/s"
pause

測試網頁，放入node_media_server的public 目錄

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>直播</title>
</head>
<body>
   <script src="https://cdn.bootcss.com/flv.js/1.4.0/flv.min.js"></script>
   <video id="videoElement" width="100%" controls></video>
   <script>
       if (flvjs.isSupported()) {
           var videoElement = document.getElementById('videoElement');
           var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                enableWorker: true, //瀏覽器端開啓flv.js的worker,多進程運行flv.js
                isLive: true, //直播模式
                hasAudio: true, //關閉音頻             
                hasVideo: true,
                stashInitialSize: 128,
                enableStashBuffer: true, //播放flv時，設置是否啓用播放緩存，只在直播起做用。
                //url: 'http://localhost:8000/live/s.flv'
                url: 'ws://localhost:8000/live/s.flv'
           });
           flvPlayer.attachMediaElement(videoElement);
           flvPlayer.load();
           flvPlayer.play();
       }
   </script>
</body>

nodejs代碼:

const { NodeMediaServer } = require('node-media-server');

const config = {
  rtmp: {
    port: 1935,
    chunk_size: 60000,
    gop_cache: true,
    ping: 60,
    ping_timeout: 30
  },
  http: {
    port: 8000,
    allow_origin: '*'
  }
};

var nms = new NodeMediaServer(config);
nms.run();

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。