请选择 进入手机版 | 继续访问电脑版

12360技术网 - 专业IT技术发表平台

 立即注册  找回密码
查看: 262|回复: 5

摄像头实时视频网页播放

[复制链接]

19

主题

34

帖子

382

积分

中级会员

Rank: 3Rank: 3

积分
382
发表于 2020-1-19 00:47:01 | 显示全部楼层 |阅读模式
场景
  1. 在知道摄像头ip地址和账户密码的情况下,对摄像头视频流进行实时画面网页展示。
复制代码
思路
  1. linux下开源工具ffmpeg可以录制音视频流,我们通过这个工具对摄像头视频流进行采集
复制代码
技术点

1.ffmpeg
  1. FFmpeg是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。
复制代码
2.m3u8
  1. m3u8 文件其实是 HTTP Live Streaming(缩写为 HLS) 协议的部分内容,而 HLS 是一个由苹果公司提出的基于 HTTP 的流媒体网络传输协议。m3u8 文件实质是一个播放列表(playlist),其可能是一个媒体播放列表(Media Playlist),或者是一个主列表(Master Playlist)。但无论是哪种播放列表,其内部文字使用的都是 utf-8 编码。对于点播来说,客户端只需按顺序下载上述片段资源,依次进行播放即可。而对于直播来说,客户端需要定时重新请求该 m3u8 文件,看下是否有新的片段数据需要进行下载并播放。
复制代码
录制

1.录制mp4文件

#ffmpeg -i rtsp://admin:admin123@172.28.193.15 -vcodec mpeg4 -ss 00:00:1 -t 00:00:2  1.mp4
admin: 摄像头账户
admin123:摄像头密码
172.28.193.15: 摄像头ip地址
-vcodec mpeg4 视频mpeg4编码
-ss 00:00:1 :从指定的时间(s)开始
-t 00:00:2 : 记录时长(时:分:秒)
2.录制m3u8文件

#ffmpeg -i “rtsp://admin:admin123@172.28.193.15” -c copy -f hls -hls_time 2.0 -hls_list_size 1 -hls_wrap 15 test.m3u8
网页展示
  1. componentDidMount() {    const video = document.getElementById('hlsVedio');    if (Hls.isSupported()) {      const hls = new Hls();      this.hls = hls;      hls.loadSource('https://.../live.m3u8');      hls.attachMedia(video);      hls.on(Hls.Events.MANIFEST_PARSED, function() {        video.play();      });    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {      video.src = 'https://.../live.m3u8';      video.addEventListener('loadedmetadata', function() {        video.play();      });    }  }
复制代码
其中https://…/live.m3u8 为后台录制的m3u8文件
参考文档

https://blog.csdn.net/weixin_33736832/article/details/91381859
                                                                                                                                       
                                                    
  • 点赞                        
  • 收藏                        
  • 分享                                                                                                                        
  •                                                         
                                      
    • 文章举报                           
                                                
                                                                        
                                            
                                                        斌锅锅的菜                                                                发布了2 篇原创文章 · 获赞 0 · 访问量 31                                                                                            私信                                                            关注
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x




上一篇:AG1KLP Q48 FPGA
下一篇:Qt编写的项目作品14-楼宇对讲管理平台
回复

使用道具 举报

0

主题

20

帖子

430

积分

中级会员

Rank: 3Rank: 3

积分
430
发表于 2020-1-25 17:53:01 | 显示全部楼层
感谢楼主的无私分享![www.12360.co]
回复

使用道具 举报

14

主题

23

帖子

241

积分

中级会员

Rank: 3Rank: 3

积分
241
发表于 2020-2-6 06:08:03 | 显示全部楼层
楼主发贴辛苦了,谢谢楼主分享![www.12360.co]
回复

使用道具 举报

0

主题

16

帖子

346

积分

中级会员

Rank: 3Rank: 3

积分
346
发表于 2020-2-14 14:51:05 | 显示全部楼层
楼主,我太崇拜你了![www.12360.co]
社区不能没有像楼主这样的人才啊!
回复

使用道具 举报

0

主题

11

帖子

241

积分

中级会员

Rank: 3Rank: 3

积分
241
发表于 4 天前 | 显示全部楼层
既然你诚信诚意的推荐了,那我就勉为其难的看看吧![www.12360.co]
回复

使用道具 举报

0

主题

16

帖子

346

积分

中级会员

Rank: 3Rank: 3

积分
346
发表于 昨天 07:31 | 显示全部楼层
这东西我收了!谢谢楼主![www.12360.co]
回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

12360技术网

GMT+8, 2020-2-29 20:15 , Processed in 0.324878 second(s), 33 queries .

本网站内容收集于互联网,Www.12360.Co不承担任何由于内容的合法性及健康性所引起的争议和法律责任。 欢迎大家对网站内容侵犯版权等不合法和不健康行为进行监督和举报。

© 2019-2020 Www.12360.Co

快速回复 返回顶部 返回列表