3种ffmpeg-web端视频直播推流方案

最新推荐文章于 2024-05-05 14:54:55 发布

老张音视频开发进阶

最新推荐文章于 2024-05-05 14:54:55 发布

阅读量1k

点赞数 6

文章标签： ffmpeg 前端音视频

本文链接：https://blog.csdn.net/qq_52703909/article/details/135633703

版权

ffmpeg-web端视频直播推流方案

记录了三种 ffmpeg 工具进行推流的方法，并在web端实现直播效果。

一. node-media-server + ffmpeg 推流rtmp

安装node-media-server依赖,新建app.js运行

npm install node-media-server -g

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();

node app.js

执行ffmpeg推流

官网下载ffmpeg并配置把bin目录添加到环境变量
ffmpeg -version 查看版本
mpeg -list_devices true -f dshow -i dummy 查看可用以音视频设备

使用本地摄像头推流

ffmpeg -f dshow -i video="Integrated Camera":audio="麦克风阵列 (Synaptics SmartAudio HD)" -vcodec libx264 -acodec copy -preset:v ultrafast -tune:v zerolatency -f flv "rtmp://192.168.20.107:1935/live/home"

使用网络摄像头推流

ffmpeg -threads 5 -i rtsp://admin:px123456@192.168.20.100:554/Streaming/Channels/101 -tune zerolatency -preset ultrafast -vcodec libx264 -threads 5 -b:v 400k -s 720x576 -r 25 -acodec libfaac -b:a 64k -f flv rtmp://192.168.20.107:1935/live/home

rtsp://{账号}:{密码}@{ip}:{端口}/根据摄像头厂牌区分

rtmp://{本地ip}:1935/live/home

本地ip地址要设置为与网络摄像头同一网段

web端HTML页面

因为各浏览器不再支持flash，需要使用flv.js插件

<!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" style="width: 80%;" controls="controls"></video>
<script>
    if (flvjs.isSupported()) {//检查flvjs能否正常使用
        var videoElement = document.getElementById('videoElement');//使用id选择器找到第二步设置的dom元素
        var flvPlayer = flvjs.createPlayer({//创建一个新的flv播放器对象
            type: 'flv',//类型flv
            url: 'http://192.168.20.107:8000/live/home.flv'//flv文件地址
        },{
            enableWorker: true,
            enableStashBuffer: false,
            stashInitialSize: 128
        });
        flvPlayer.attachMediaElement(videoElement);//将flv视频装载进video元素内
        flvPlayer.load();//载入视频
        flvPlayer.play();//自动播放
    }
</script>
</body>
</html></

最低0.47元/天解锁文章

老张音视频开发进阶

关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
3种ffmpeg-web端视频直播推流方案

记录了三种 ffmpeg 工具进行推流的方法，并在web端实现直播效果。rtsp://{账号}:{密码}@{ip}:{端口}/根据摄像头厂牌区分。rtmp://{本地ip}:1935/live/home。因为各浏览器不再支持flash，需要使用flv.js插件。hls流延迟比较大，按官方的说法60秒内算正常！二. nginx + ffmpeg 推流hls。本地ip地址要设置为与网络摄像头同一网段。web端HTML页面。
复制链接

扫一扫