前端JS拉取视频流,实现播放、截图并保存图片以及视频录制生成视频文件

智数追云人
• 阅读 10442

最近有相关项目需求,需要前端在拉取本地视频流实现播放,并且提供截图保存图片,视频片段录制并生成视频文件的功能需求。

我的大概思路是,先userMedia拉取本地视频流之后,用video标签实现播放,在用canvas实现视频截图保存功能,用mediaRecorder实现视频流的录制保存文件

解决起来并不困难前端JS拉取视频流,实现播放、截图并保存图片以及视频录制生成视频文件
生成的视频文件格式为mp4格式,也是可以播发的。
代码地址:https://github.com/tonyload/S...

点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
4年前
android开发笔记之多媒体—播放音频(音乐)
Android应用增加动画,视频,音乐等多媒体功能,因此为手机提供音频录制,播放,视频录制,播放的功能十分重要。Android提供了常见音频,视频的编码,解码机制,Android支持的音频格式有MP3,WAV和3GP等,支持的视频格式有MP4和3GP等。Android提供了这些多媒体的支持类,可以非常方便地在手机应用中播放音频,
Wesley13 Wesley13
4年前
RTSP协议外网视频直播监控无法播放WS
TSINGSEE青犀视频产品中,EasyNVR、EasyGBS等都是支持播放WSFLV格式的视频流的,曾经我们也处理过EasyGBS无法播放wsflv视频流的问题,大家可以回顾一下解决过程。在EasyNVREasyNVS系统架构中,同样也出现了EasyNVS在通道配置页面中播放视频流时,WSFLV无法播放的情况。!221.png(http
Wesley13 Wesley13
4年前
javaCV
  最近有视频处理的需求,自己调研javaCV。  官网没有详细的API,各种轮子翻遍了也没找到几个有用的,以下是自己整理一些视频处理功能:截取视频指定帧生成gif,将图片旋转指定度,截取视频指定帧保存为指定格式的图片(图片保存在视频同文件夹下),_调整视频清晰度(只能降低),_视频转音频__。  先上代码。packagecom.ric
春风化雨 春风化雨
2年前
Snagit for mac(屏幕截图录屏编辑工具)
Snagitformac中文版是非常有名的屏幕截图软件,图象可保存为BMP、PCX、TIF、GIF、PNG或JPEG格式,也可以存为视频动画。如果您想要突出显示图像的某些地方,或者您需要录制视频演示文稿,那么请使用snagit屏幕截图工具,使用其内置强大的
Stella981 Stella981
4年前
Javascript判断Video视频播放、暂停、结束完成及获取长度事件监听处理
在日常应用场景中,可能会遇到这么一个情况,需要判断用户是否完整的观看完了一部视频,在这个场景中,和视频相关的事件大体涉及到几个部分,获取视频长度,视频开始播放,暂停播放和播放结束,下面来看下如何通过JavaScript来监听获取视频的这几种状态。html页面视频标签大体如下:<video id\"video" controls\"controls
Stella981 Stella981
4年前
2020年下载bilibili 1080p视频的方法
需求:下载1080p视频。工具:安卓.b站app.安卓离线想下载的视频即可。默认保存路径/storage/emulated/0/Android/data/tv.danmaku.bili不过下载后的视频是视频音频分离的。 audio.m4s video.m4s 改对应后缀即可播放。但是我需要单个视频文件!所以需要ffmpeg来合成一下了
Stella981 Stella981
4年前
Cypress web自动化29
前言做web自动化的时候,我们希望用例失败了能截图,这是之前用selenium写ui自动化用例的时候经常遇到的问题。cypress可以说是业界良心了,不仅帮我们失败的时候自动截图保存下来,还把每个用例都录制成了mp4的小视频,方便追踪问题的时候回复视频screenshots失败截图
可莉 可莉
4年前
2020年下载bilibili 1080p视频的方法
需求:下载1080p视频。工具:安卓.b站app.安卓离线想下载的视频即可。默认保存路径/storage/emulated/0/Android/data/tv.danmaku.bili不过下载后的视频是视频音频分离的。 audio.m4s video.m4s 改对应后缀即可播放。但是我需要单个视频文件!所以需要ffmpeg来合成一下了
Wesley13 Wesley13
4年前
JAVA + LR实现apache流媒体的性能测试
最近的一个项目,视频点播系统,使用apache实现的流媒体服务器。其实准确的说叫做伪流(HTTPPseudoStreaming),基本原理和概念自行了解吧。让我简单的描述就是仍然是HTTP下载,播放器播放本地缓存。只不过它也实现了一些和正规流媒体服务类似的功能。视频点播类系统的性能测试,说简单了主要就是模拟大量用户去看视频。服务端监控整体性能,客户端
公孙晃 公孙晃
2年前
「最新」Snagit for mac v2024.0.1中文破解版 支持M1
是一款非常实用的屏幕截图和视频录制工具,适用于Mac用户。它具有强大的编辑功能,可以帮助您轻松地创建高质量的截图和视频,并且还支持录制屏幕上的操作。使用Snagit,您可以轻松地截取整个屏幕、窗口、选定的区域或滚动页面,并将其保存为图像或视频文件。此外,该
铁扇公主 铁扇公主
2年前
快速捕捉屏幕上的任何内容就选 Snagit 最新中文
Snagit是一款屏幕截图和视频录制软件,它可以帮助用户快速捕捉屏幕上的任何内容,并将其编辑、标注和共享。以下是Snagit的特点:多种截图模式:支持全屏截图、窗口截图、区域截图、延时截图等多种截图模式,满足不同用户的需求。视频录制:除了截图,Snagit