编程技术分享平台

网站首页 > 技术教程 正文

基于开源组件搭建流媒体服务实现网页实时播放监控视频

xnh888 2024-09-28 03:18:00 技术教程 23 ℃ 0 评论

最近工作上有个需求,要实现监控摄像头的视频在浏览器中进行点播播放,之前没接触过这方面的技术,在网上研究了一段时间,相关的实现方案有很多,相对来说搭建比较简单同时又不需要购买付费功能的方案是基于FFmpeg和nginx的flv实现方式,总结了一下相关的实现步骤,有需要的同学可以拿去。

一、安装ffmpeg

首先需要安装ffmpeg,ffmpeg是开源的音视频处理软件,功能强大,也很稳定,既能实现视频的编解码进行格式转换,也能进行视频流的推送和拉取,同时支持rtsp、rtmp、hls等多种协议。

ffmpeg的下载地址如下:

http://ffmpeg.org/download.html

我选择的版本是4.4,大家可以根据需要自己选择合适的版本,注意下载的是ffmpeg的源码,后面要根据不同的平台进行编译安装。


在编译ffmpeg之前需要安装第三方库yasm,下载地址如下:http://www.tortall.net/projects/yasm/releases/yasm-1.3.0.tar.gz

将安装包上传服务器,按照如下步骤进行yasm的安装。

tar zxvf yasm-1.3.0.tar.gz

cd yasm-1.3.0

./configure

make

make install

yasm安装完后,再通过yum安装gcc编译器。

yum install gcc

gcc编译器安装完成之后就可以编译ffmpeg,并进行安装了。

tar zxvf ffmpeg-4.4.tar.gz

cd ffmpeg-4.4

./configure --enable-shared --prefix=/usr/local/ffmpeg

make

make install

ffmpeg安装完后,需要修改配置文件,引入相关的类库。

vi /etc/ld.so.conf


输入以下内容


include ld.so.conf.d/*.conf

/usr/local/ffmpeg/lib/


执行如下命令,使设置生效:

ldconfig

查看下ffmpeg版本,是否是预期的版本。

/usr/local/ffmpeg/bin/ffmpeg -version


二、安装nginx

注意这里使用的nginx需要在原始nginx的基础上增加编译nginx-http-flv-module模块。nginx-http-flv-module是github上开源的项目。

github项目地址:https://github.com/winshining/nginx-http-flv-module


分别下载Nginx(http://nginx.org/en/download.html)和nginx-http-flv-module源码,进行编译安装。我使用的nginx版本是1.18.0,编译命令中--prefix参数执行nginx安装路径,--add-module参数指定nginx-http-flv-module源码路径。

cd nginx-1.18.0/

./configure --prefix=/usr/local/nginx-media --with-http_gzip_static_module --with-http_stub_status_module --with-http_ssl_module --add-module=../nginx-http-flv-module-1.2.9

make

make install

安装完成之后,修改nginx配置文件/usr/local/nginx-media/conf/nginx.conf,配置流媒体服务器。配置可以参考https://github.com/winshining/nginx-http-flv-module主页的说明样例。


三、启动推流

nginx配置完成之后,就可以使用ffmpeg从摄像头中拉取原始rtsp视频流,转换为trmp视频流,并推送到nginx服务器中,由nginx服务器对外提供flv格式的视频流。

可以通过如下命令启动推流。-i参数执行原始rtsp视频流地址,需要包含认证信息。rtmp协议地址是在nginx中配置的服务器地址。

/usr/local/ffmpeg/bin/ffmpeg -i rtsp://username:password@rtsp视频流地址 -vcodec copy -acodec copy -f flv rtmp://nginx服务器IP/myapp/s1

四、前端通过flv.js播放视频流

flv.js也是一个github上的开源项目,项目地址:https://github.com/Bilibili/flv.js/

在前端项目中引入flv.js包,在页面代码中通过flvPlayer播放视频流。url是通过nginx提供的flv的视频流地址,http://nginx地址:端口/live?port=1935&app=myapp&stream=s1

<script src="flv.min.js"></script>
<video id="videoElement"></video>
<script>
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://example.com/flv/video.flv'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
</script>

至此,免费的流媒体服务已经搭建好了,有需要的同学可以尝试一下,本人亲自测试可用。

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表