推流,网页播放

BiliBili有一个大神,开源了一套js,名字叫做flv.js

中间尝试了很多东西,

首先rtmp推流,然后需求是flv可以播放,然后要用nginx,所以下载了nginx for windows版本

然后ffmpeg推流失败之后,因为需要支持flv的视频流,所以nginx需要一个模块名字叫做nginx-rtmp-module-master

所以到github上找到相关代码发现,下载,编译,然后下载依赖项,下载mingw,下载mysys最后编译失败,因为mingw下不了

然后用linux发现编译失败

至此这条路失败。

中间回想目的,客户端推流,服务端转发,然后再用浏览器播放,

这里选择了nodejs然后加入了模块nodemediaserver。

然后下载了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();
原文地址:https://www.cnblogs.com/yang131/p/13338227.html