如何在 h.265 视频流中抓取到人脸并生成图片

航航

已于 2024-08-01 21:19:21 修改

阅读量477

点赞数 3

分类专栏：前端知识文章标签： face-api.js EasyPlayer

于 2024-07-31 18:00:56 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42278979/article/details/140829142

版权

如何在 h.265 视频流中抓取到人脸并生成图片

一、前言

现在的 web 需求也是越来越刁钻了。今天接到了一个奇怪的需求，要求在大屏播放实时直播的视频流，并且还要截取播放时段内一共出现了哪些人。

因此，首先第一步我们要先把视频流在 web 界面中播放出来，不然啥都白瞎。

当视频流播放出来了，我们再来思考抓取人脸的能力。

二、视频流播放

1、视频流介绍

如果还未接触过视频流的小伙伴肯定对视频流很陌生，那我们就来快速简单的了解一下视频流是什么东西。

视频流逝一种实时通讯技术，就是生成一段在线的链接，渲染在 web 界面上，实时传播别处视频或者直播的内容，你也可以理解为直播。

我们常见的视频流后缀有 m3u8,mp4,rstp,rtmp 等等。

而 rstp,rtmp 通常不适合在 web 上进行播放，因为浏览器限制、协议不兼容等。

因此我们可以用 m3u8,mp4 来进行开发。这个后缀可以让后端来处理，哪怕是 rstp,rtmp 的格式，也能通过转码来实现。

2、视频流格式

好了马上进入开发。。。等等先别急，我们需要先知道先视频流有哪些格式，我们使用的插件能否这些个时代的播放。

百度文心一言一下马上就知道视频流有 H.264 和 H.265 两种编码格式。

H.264 是目前最广泛使用的视频编码，以其高效的压缩性能、良好的网络适应性和广泛的兼容性而备受推崇。
H.265 是 H.264 的继任者，保持相同视频质量的前提下，能够实现更高的压缩比，从而进一步降低网络带宽的占用。

简单的说就是 H.265 更新，更牛。

目前市面上能查询得到的 web 播放插件几乎都只能支持 H.264。我这里实现过 vue-video-player 这款插件，有兴趣的小伙伴的小伙伴百度下使用教程，百度上说的可比我更详细，这不是今天的重点。

那如何能够能够既支持 H.264 又支持 H.265 的插件呢？在我查得快要放弃的时候，@easydarwin/easyplayer 这个插件竟神奇般的播放出来。

3、视频流播放

# 依赖安装
npm install @easydarwin/easyplayer

这个插件安装完可不算完，还需要一步最重要的 copy 功能，这一步决定了你视频流能不能正常播放。

copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf 到 静态文件 根目录
copy node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml 到 静态文件 根目录
copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js 到 静态文件 根目录

就是把 node_modules 对应路径下的这三个文件放到项目中的根目录下。

最后在 index.html 下引入这三个文件：

<script src="./EasyPlayer-lib.min.js"></script>
<script src="./crossdomain.xml"></script>
<script src="./EasyPlayer.wasm"></script>

<EasyPlayer
    style="width: 750px; height: 500px"
    :videoUrl="`http://cdn3.toronto360.tv:8081/toronto360/hd/playlist.m3u8`"
    aspect="16:9"
    live
    :fluent="true"
    :autoplay="true"
    video-id="videoElement"
    ref="easyPlayerRef"
    stretch
></EasyPlayer>

使用过于简单。这里提供几个可用的视频流用于小伙伴们测试。

http://kbs-dokdo.gscdn.com/dokdo_300/definst/dokdo_300.stream/playlist.m3u8
https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8
http://cdn3.toronto360.tv:8081/toronto360/hd/playlist.m3u8