zoukankan      html  css  js  c++  java
  • 推流,网页播放

    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();
  • 相关阅读:
    HDU 2188 悼念512汶川大地震遇难同胞——选拔志愿者
    博弈论小结
    HDU 2149 Public Sale
    有上下界限制的网络流-总结
    loj #117. 有源汇有上下界最小流
    jquery中not的用法[.not(selector)]
    Assert随笔
    Maps.newHashMapWithExpectedSize(2)
    java1.8操作日期
    控制input只输入数字--- onkeyup="value=value.replace(/[^d]/g,'')"
  • 原文地址:https://www.cnblogs.com/yang131/p/13338227.html
Copyright © 2011-2022 走看看