摄像头实时视频网页播放

场景

在知道摄像头ip地址和账户密码的情况下，对摄像头视频流进行实时画面网页展示。

思路

linux下开源工具ffmpeg可以录制音视频流，我们通过这个工具对摄像头视频流进行采集

技术点

1.ffmpeg

FFmpeg是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。

2.m3u8

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

网页展示

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