html调用摄像头-基于开源组件构建流媒体服务,实现网页监控视频的实时播放

2023-08-26 0 5,660 百度已收录

最近工作上有需求。 需要在浏览器中实现监控摄像头视频的点播播放。 我以前从未接触过这项技术。 我在网上研究了一段时间。 相关的实现方案有很多,构建也比较简单。 同时,不需要订购和付费功能的解决方案是基于FFmpeg和nginx的flv实现方法。 我总结了相关的实现步骤,有需要的朋友可以借鉴。

1.安装ffmpeg

首先,您需要安装 ffmpeg。 ffmpeg是一款开源的音视频处理软件,功能强大且稳定。 它不仅可以实现视频编解码和格式转换,还可以推拉视频流。 它还支持rtsp、rtmp、hls等合约。

ffmpeg的下载地址如下:

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

ffmpeg下载页面

在编译ffmpeg之前,需要安装第三方库yasm。 下载地址如下:

将安装包上传到服务器,按照以下步骤安装yasm。

tar zxvf yasm-1.3.0.tar.gz

cd yasm-1.3.0

。/配置

制作

进行安装

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

百胜安装海湾合作委员会

安装gcc编译器后,就可以编译安装ffmpeg了。

tar zxvf ffmpeg-4.4.tar.gz

cd ffmpeg-4.4

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

制作

进行安装

ffmpeg安装完成后,需要更改配置文件并引入相关泛型。

vi /etc/ld.so.conf

输入以下内容

包括 ld.so.conf.d/*.conf

/usr/local/ffmpeg/lib/

执行以下命令使设置生效:

LD配置

检查ffmpeg版本,看看是否是期望的版本。

/usr/local/ffmpeg/bin/ffmpeg-版本

检查 ffmpeg 版本

二、安装nginx

注意,这里使用的nginx需要在原有nginx的基础上缩减编译nginx-http-flv-module模块。 nginx-http-flv-module 是 github 上的一个开源项目。

github项目地址:

分别下载Nginx()和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

制作

进行安装

安装完成后,修改nginx配置文件/usr/local/nginx-media/conf/nginx.conf来配置流媒体服务器。 配置请参考首页示例说明。

3. 开始直播

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

可以使用以下命令启动推送流。 -i参数执行原始rtsp视频流地址html调用摄像头,需要包含认证信息。 rtmp协议地址就是nginx中配置的服务器地址。

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

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

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

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




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

至此html调用摄像头,免费的流媒体服务已经搭建完成,有需要的朋友可以尝试一下,自己测试一下。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 html html调用摄像头-基于开源组件构建流媒体服务,实现网页监控视频的实时播放 https://www.wkzy.net/game/153033.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务