在视频处理中,截图的功能很常见。不管是用于视频分析、视频审核还是进度条的缩略图显示,都离不开截图功能。最近有客户反馈,对视频文件指定时间点截图,没有获取到任何图片,也没有相关报错提示。图片不知道去哪了。
| 导语 随着短视频兴起,音视频技术已经越来越火热,或许你之前有了解过如何在前端处理音视频,但随着视频文件的逐渐增大、用户体验要求的不断提高,纯前端处理音视频的技术也推成出新。下面将结合实际案例,讲解如何使用 FFmpeg 和 WebAssembly 实现前端视频截帧。文章较长,也非常硬核,建议先收藏再慢慢看。 背景 腾讯课堂涨知识创作者后台,目前主要通过邀请合作老师来平台上发布视频。上传视频的同时,需要对视频进行截帧生成推荐封面,生成规则比较简单,根据视频总时长,平均截取 8 帧。用户可以从其中选择一张
做 web 自动化的时候,我们希望用例失败了能截图,这是之前用 selenium 写 ui 自动化用例的时候经常遇到的问题。 cypress 可以说是业界良心了,不仅帮我们失败的时候自动截图保存下来,还把每个用例都录制成了mp4的小视频,方便追踪问题的时候回放视频
关于调用海康sdk来进行录像存储,整体的框架架构处理流程沿袭了之前vlc内核、ffmpeg内核、mpv内核的做法,定时存储这块,开个定时器判断,到了时间则先关闭原来的录像存储,然后在开始一个新的录像存储,重新传入新的文件名,所以这块的代码直接拷贝过来就能使用,要做的就是替换两行代码即可,一行是开始录像存储的函数NET_DVR_SaveRealData,一行是停止录像存储的函数NET_DVR_StopSaveRealData,海康sdk的手册非常详细,而且命名也比较规范,基本上通过方法函数名字就可以知道大概的意思了,不用去猜测。
一、功能特点 支持播放视频流和本地MP4文件。 支持句柄和回调两种模式。 多线程显示图像,不卡主界面。 自动重连网络摄像头。 可设置边框大小即偏移量和边框颜色。 可设置是否绘制OSD标签即标签文本或图片和标签位置。 可设置两种OSD位置和风格。 可设置是否保存到文件以及文件名。 可直接拖曳文件到haikangwidget控件播放。 支持h264/h265视频流。 可暂停播放和继续播放。 支持存储单个视频文件和定时存储视频文件。 自定义顶部悬浮条,发送单击信号通知,可设置是否启用。 可设置画面拉伸填充或者等比
前段时间有给大家分享一个Electron跨端仿QQ聊天,今天带来最新研发的Electron短视频|直播应用。
Next.js 是基于 React.js 服务端渲染的SSR 开发框架。让你的网页瞬间拥有SEO功能。
你敢信,只凭借着一张屏幕截图即可转换生成 HTML/Tailwind CSS 代码。可以算得上是前端工程师的福音。它就是 screenshot-to-code。
DPlayer 是一个支持弹幕的 html5 视频播放器。支持 Bilibili 视频和 danmaku,实时视频(HTTP Live Streaming,M3U8格式)以及 FLV 格式。
用ffmpeg来实现自己的播放器,这是一直以来的一个目标,之前的难点卡在音视频同步以及如何播放声音这两点(尽管之前已经进行过不少的尝试和探索,但是问题还是挺多,比如音视频同步不完美,有些文件正常而有些文件不准,声音播放采用的sdl总感觉多了个依赖怪怪的,而且很多初学者也反映希望采用Qt自身的类来播放),近期正好把这两个难点一一攻破了,音视频同步采用的外部时钟同步,声音播放采用的Qt自带的QAudioOutput(并没有采用sdl,省去学习sdl开源库的成本),播放器的demo如期进行。有时候做项目,如果将各个难点击破以后,接下来都是顺理成章水到渠成的事情,速度会非常快,这也是我经常用的策略。
用mpv来做录像存储,保存视频文件,从来都没有如此的方便,直接设置属性stream-record对应的文件路径即可,我的乖乖,一行代码,如此精简美丽大方,搞得我都不敢相信自己的眼睛,mpv除了支持主流的win、linux、mac三大操作系统外,还支持手机安卓IOS等,尤其是居然支持各种嵌入式linux,记得vlc想要在嵌入式linux上交叉编译成功的话,难于上青天,各种插件的依赖实在是太多了,直到你放弃为止,在X86的linux系统还是比较方便一些的,而在这块,mpv简直是完爆vlc啊,直接命令行都可以在嵌入式linux上安装呢,内置的ffmpeg超强解码器,使得你可以直接命令行调用mpv来播放音视频,这在一些嵌入式linux上Qt无法播放音视频的场景,非常有用,本人在全志H3板子上使用的就是mpv来播放音视频,默认GPU解码使得CPU占用极地。
背景 由于开发之前做的VisualDrag拖拽模板优化的时候,拖拽进去的图片、视频文件等需要进行截图作为封面,目前采用的截图方法是htme2canvas,使用canvas进行的截图操作,所以就会遇到这样的问题,视频和图片图床简单的使用标签加入canvas画布里面无法正确的截图成功。最后采取的措施就是将图片转为base64画入canvas,将视频截取第一帧图片,然后画进canvas,最后进行截图,最后经过折腾,这个方法好像成功了,写这篇博客进行记录下。 JS截取视频第一帧 截取视频的第一帧作为视频的封面
1.运营内容。前面说到现在运营直播平台需要考虑垂直细分领域的问题,不然平台内容同质化严重,即使平台上线后也会很快湮没的。
有空实验后贴代码。参考文档里有解决预加载音视频,以及获取截图的技巧,文章内容提到跨域资源的解决方法。
音视频的播放、关闭、暂停、继续这几个基本功能,绝大部分人都是信手拈来的搞定,关于音量调节还是稍微饶了下弯弯,最开始打算采用各个系统的api来处理,坐下来发现不大好,系统的支持不完美,比如有些api限定了win7,而xp确没有,而且这玩意控制的是全局的音量,不好,大部分时候需要控制的是当前播放的媒体的音量,估计vlc和mpv这类播放器在处理声音的时候也有过如此的场景分析,后面还测试过用ffmpeg的filter滤镜代码控制音频数据的分贝值,比较繁琐,代码量也大,不方便初学者学习,最后灵机一动去找QAudioOutput的函数看下有没有volume的函数,果真有卧槽,原来自带了,对Qt的爱慕之情又猛增了几十分,这里要注意的是QAudioOutput的音量值参数是0-1的范围double类型,而不是像vlc等播放器是0-100的值,所以需要自行转换。
基于EasyPlayer的研究基础,TSINGSEE青犀视频进一步顺应互联网视频行业发展的需求,研发了H265网页播放器EasyWasmPlayer.js,在4.2.0版本之后的EasyNVR视频平台已经可以支持自主选择播放器了。
Puppeteer 是一个 Node library,提供了一套完整的通过 DevTools 协议操纵 Chrome 或 Chromium 的 API。Puppeteer 默认以 无头(headless) 的方式运行, 也可以使用 GUI 的方式运行 Chrome 和 Chromium。
用mpv来读取文件的信息,以及设置当前播放进度,音量、静音等,和当时vlc封装的功能一样,只不过vlc是通过调用函数接口去处理,而mpv是通过读取和设置属性来处理,vlc支持定时器或者线程中函数方法去读取状态,也支持事件回调去拿到对应的状态改变,mpv当然也支持,而且还更方便,主要的工作量或者花费的时间在如何知道有哪些属性、分别是什么功能含义,这个在官方都列出来了(http://mpv.io/manual/master/#options、http://mpv.io/manual/master/#list-of-input-commands、http://mpv.io/manual/master/#properties),不过都是英文就是,大部分程序员应该是没有什么难度的,大不了鼠标右键翻译成中文即可,哈哈,相信不少人都这么干过,很多浏览器默认就支持鼠标右键菜单翻译的,实在是很方便的,本人在查阅很多英文文档的时候,用的也是蛮多的,包括Qt官方的文档和BUG报告页面,但是建议在搜索问题的时候还是建议尽量用英文的描述去搜索,这样才能搜索的更精确。
前面写了几篇 p5.js 文章 都还没涉及到3D图形,但其实 p5.js 是提供了基础的3D图形的。
background-clip可以用来控制背景图片/颜色的填充范围。 我们知道,默认的background会填充盒模型的content+padding+border区域内。(可以将border颜色设为透明进行观察)
前言 上周六有个群友@我说Gitee的反馈模块新增了截图功能,我就去体验了下,发现他们用的就是我的插件😁,本文就跟大家分享下这个插件,欢迎各位感兴趣的开发者阅读本文。 插件地址与实现原理 本插件采用原生js实现,可以集成在任意一个web项目中,插件npm地址与GitHub地址请移步: js-screen-shot(npm)[1] js-screen-shot(GitHub)[2] 插件的实现原理请移步: 实现Web端自定义截屏[3] 实现Web端自定义截屏(JS版)[4] 在线体验本插件,可移步我的开源项目
svelte3-chat 基于svelte.js+svelteKit+Sass开发的仿微信界面聊天实战项目。
今年的FIFA世界杯甚是精彩,最近兴致高涨就利用HTML5开发了一个手机端仿微信界面聊天室,该h5聊天室采用750px全新伸缩flex布局,以及使用rem响应式配合fontsize.js,页面弹窗则是使用自己开发的wcPop.js插件;编辑器部分由原先的单一表情新增为动图表情,实现了消息、表情发送 | 大图、视频效果预览 | 仿微信红包、打赏等微交互功能。
我们都知道在直播系统开发完成后,就需要面临搭建直播平台的问题了,只有完成搭建部署,接入相关的三方接口,那么直播系统才能正常的运行。在进行视频直播间搭建时,我们常常会遇到域名更换的问题,那么域名更换应该怎么进行呢?
随着人们生活品质的提高,5G及手机硬件的快速发展,短视频/直播快速的成为了很多人的娱乐方式。
之前用ffmpeg解码出来了音频,只是做了存储部分,比如存储成aac文件,播放的话早期用的是sdl来播放音频,自从Qt5以后提供了QAudioOutput来播放输入的音频数据,就更加方便了,可以直接将解码好的音频数据写入就能播放了,这些就少了个学习sdl的成本,而且和Qt就更加融合,不需要额外的第三方库,解码好的视频,其实就是一张张图片数据,可以直接用QPainter绘制或者QOpenGlWidget通过GPU显示,解码好的音频用QAudioOutput播放,这对于很多初学者来说,是个很好的消息,完美。
基础的功能该有的都有了,而且有些功能还更好,大家想要什么功能可以提Issue,我看响应的人多,我就做。
上周看到一个有趣的项目是使用Python+ADB做一个Python 抖音机器人 Douyin-Bot,自动翻页+颜值识别,自动点赞加关注,效果如下图,可以说是非常秀了。
上次介绍了一个公司的站点可能由各个独立在不同服务器上的服务组成,所以我们需要想尽办法找到更多的域名。
最开始做的ffmpeg保存视频文件,就是直接保存的裸流数据,裸流数据一般是H264格式的数据,这种数据文件可以用部分播放器播放,由于不是标准的格式,很多播放器其实不支持的,需要安装对应的解码器才行。后面发现安装好K-Lite解码器后,连系统自带的播放器都可以正常播放H264视频流文件,而且如果同步保存了同名文件的aac音频文件放在同目录下的话,声音都能正常同步播放,可能这是播放器做的处理吧。
谷歌浏览器好用的插件,除了上方对应的插件外,秘塔写作猫也是强推,用于全文抓取,还可以协助写作的语法检查
用ffmpeg来做音视频同步,个人认为这个是ffmpeg基础处理中最难的一个,无数人就卡在这里,怎么也不准,本人也是尝试过网上各种demo,基本上都是渣渣,要么仅仅支持极其少量的视频文件比如收到的数据包是一帧视频一帧音频的,要么根本没法同步歪七八糟的,要么进度跳过去直接蹦蹦蹦崩溃的,其实最完美的音视频同步处理demo就是ffplay,我亲测过几十种各种各样的音视频本地文件,数十种视频流文件,都是非常完美,当然啦这是亲生的啦,不完美还玩个屁。
在javascript的帮助下,可以为几乎每个领域(如移动、桌面应用程序和游戏Web开发)创建Web应用程序,因为该编程语言用作服务器端编程语言以实现最大功能,所以它是一种很好的编程语言。
TSINGSEE青犀视频的流媒体播放器EasyPlayer视频播放器,可支持H.264与H.265视频编码格式,性能稳定、播放流畅,还能支持RTSP、RTMP、HLS、FLV、WebRTC等视频流播放,并且已实现网页端实时录像、在iOS上实现低延时直播等功能。目前TSINGSEE青犀视频的所有视频监控平台均使用的是EasyPlayer.js播放器,也是最受用户及开发者欢迎的一款H5流媒体播放器。
最近古柳的 「中国传统颜色可视化(一)」 视频在b站小火?了下,不知道大家有在首页看到过这个视频嘛? 不过毕竟只是小火而非大火,想来不知道的人更多,因而古柳简单介绍下情况,与大家分享这次的意外之喜。
最近由于项目需求,利用h5+css3+zepto+wcPop等技术开发了一个仿微信聊天项目(仿微信聊天界面),可以实现发送消息、表情,预览图片、视频,红包打赏、霸屏等操作,聊天界面采用了flex弹性布局,弹窗则采用自己开发的wcPop.js插件(内置多种弹窗效果android、ios),整体界面精美,运行流畅。
在我们做视频开发的过程中,会遇到不少需求,其中视频截图就是一个比较常见的需求,因此TSINGSEE青犀视频不管是在设计视频平台还是视频播放器的时候,我们都会在原有开发的基础上对视频截图进行一些功能拓展。
此功能是一个客户定制的,主要是需要在地图上动态显示GPS的运动轨迹,有个应用场景就是一个带有监控的车子,实时在运动中,后台可以接收到经纬度信息,需要绘制对应的轨迹,相当于这些摄像机点位是动态移动的,这样就可以观测到摄像机的实时位置信息,双击摄像机还可以弹出画面实时预览,很直观。
基于微信小程序开发的聊天室实战案例。很早之前就有开发过一个h5版聊天室,最近又开发了个小程序版聊天室,功能效果非常接近微信聊天,实现了消息、表情发送,小程序表情解析,图片、视频上传预览,打赏、红包等功能。
nuxtjs是一个基于vue.js构建的服务端渲染框架。让你的网页也拥有SEO能力。只要是会vue,上手及非常简单了。
WordPress响应式免费主题,一款基于Js+jquery2.1.4+H5/CSS3响应式+Wordpress后台开发,每天活人访问量500-800+IP,百度权重2,百度、Google收录链接突破1800+条,前后端完全独立制作,现主题作者Art_Blog开源给所有小伙伴免费使用!
之前玩了vlc解码和ffmpeg解码,前阵子有个客户需要换成mpv解码,于是研究了下mpv的使用方法,自从用了mpv以后发现爱不释手,这玩意天生适合极客和程序员啊,居然将各种处理封装成了命令和属性调用,比如播放进度,你只需要读取属性time-pos即可,如果要读取音量只需要读取属性volume即可,设置音量就直接设置属性volume对应的值即可,我的乖乖,这太棒了棒极了,这不就是咱们梦寐以求的处理方式吗?你只需要封装几个通用的处理接口(读取属性mpv_get_property、设置属性mpv_set_property、执行命令mpv_command_node、设置参数mpv_set_option),就涵盖了绝大多数的功能,你说简单易用不,要的就是这种效果呢!!!
electron-vchat客户端聊天实例是基于electron+vue+vuex+Node+vue-router等技术开发的仿制微信pc桌面聊天项目。实现了消息发送 /表情(光标处插入表情),图片 /视频预览,拖拽上传 /粘贴截图发送 /微信 dll 截图,右键菜单、朋友圈 /红包 /换肤等功能。
原理说明 辅助原理: 用adb获取手机截图并拉取到项目中 对图片进行二值化 根据棋子的RGB值获取当前位置 通过adb模拟屏幕点击 文末有推荐选择 开源列表 Prinsphield/Wechat_AutoJump 链接:Prinsphield/Wechat_AutoJump 说明:一个优秀的python项目;作者利用Opencv实现了图片的特征识别,并且在代码中实现了,根据调用命令区分安卓还是IOS,并进行相应的处理,根据项目代码分析,作者解析了跳一跳大部分的盒子图片,并利用到了游戏中的特定盒子加分的
在视频监控行业领域,海康当之无愧是老大,稳坐第一的宝座很多年了,近期需要将视频监控系统改成采用海康sdk的内核,于是特意去查阅了sdk的使用手册,sdk相关的文档和文件可以直接官网下载到,而且是经常更新的,目前提供了windows和linux上的,win上的sdk还是更新比较快而且完整的,但是在linux上的就不得不吐槽下了,很旧很旧的版本,不要看打包文件很新,其实里面的内容是很老的,不知道为啥官方不也同步更新linux上的sdk,也许现在linux上的需求还不是很多吧,但是随着国产化的大力推进,估计不久的将来linux上的也会慢慢的完善起来的,说不定官方早就有了此计划,还有一种个人的猜测是linux上的开发包估计官方自己内部用的新的,可能打算自己做linux上的各种客户端吧。
前言 先看一个视频,这个视频并不是去演示如何使用微信,而是演示基于wepy开发的微信小程序demo。 点击观看视频 : 【wepy开发的微信小程序demo 】 demo中包含的功能有: 仿微信界面 联
传统的UI自动化框架(UIAutomator、Espresso、appium等),或多或少在这些方法做的不够完美。
很多人在用ffmpeg做视频流解码的时候,都会遇到一个问题,如何暂停,如果打开的是本地视频文件,暂停你只需要停止解码即可,但是视频流你会发现根本没用,一旦你停止了解码,下次重新解码的时候,居然还是以前的图片,他是从你最后暂停开始的地方重新解码的,这就懵逼了,为啥呢?我个人的理解是视频流这玩意,一旦你打开了,他就源源不断涌过来,你不处理,他就越来越多,你必须要读取他,从缓冲区拿走这些数据才行,所以如果想要暂停视频流,正确的做法是照常解码,只是不处理和绘制图片就行,说白了其实就是伪暂停,看起来是暂停了,其实后台还在不断的解码中。
领取专属 10元无门槛券
手把手带您无忧上云