实现VUE DPlayer录像功能:Canvas加MediaRecorder

  在做之前,以为DPlaye知道数据流,录像直接保存即可。结果是,根本没有录像功能。

  怎么办呢?搜索了一番,给出的建议是使用Canvas加MediaRecorder来实现。大意是使用canvas,定时把视频画面刷过来;然后MediaRecorder对canvas进行录像。目前是唯一知道可行方案。

  其实我也觉得这个办法比较愚蠢或者原始。目前并没有找到别的办法,所以只能如此。其实这些代码也都是参考别人的,我也是略微整理,确认确实可以实现录像功能。

  • 代码1:声明
export default {name: "flvPlayer",data() {return {dp: null,isRecording: false,refreshTimer: 0,canvas: null,context : null,mediaRecorder: null,recordedBlobs: [],}},
  • 代码2:recordAction
recordAction() {this.isRecording = !this.isRecording;if (this.isRecording) {this.startRecording();}else {this.stopRecording();this.downloadVideo();}
},
  • 代码3:startRecording
    //this.dp = new DPlayer(options);startRecording() {const FPS      = 25;const INTERVAL = 1000/FPS;this.canvas        = document.createElement('canvas');this.context       = this.canvas.getContext('2d');this.canvas.width  = this.dp.video.videoWidth;this.canvas.height = this.dp.video.videoHeight;this.stream = this.canvas.captureStream(FPS);this.refreshTimer = setInterval(() => {this.context.drawImage(this.dp.video, 0, 0, this.canvas.width, this.canvas.height);}, INTERVAL);this.mediaRecorder = new MediaRecorder(this.stream,{ mimeType: 'video/webm;codecs=h264'});this.recordedBlobs = [];this.mediaRecorder.ondataavailable = (event) => {if (event.data && event.data.size > 0) {this.recordedBlobs.push(event.data);}};this.mediaRecorder.onerror = (error) => {console.log("onerror() "+error);};this.mediaRecorder.onstop = () => {console.log("onstop()");};this.mediaRecorder.start(INTERVAL);},
  • 代码4:stopRecording()
    stopRecording() {if (!this.mediaRecorder) {return;}this.mediaRecorder.stop();this.mediaRecorder = null;clearInterval(this.refreshTimer);this.refreshTimer = 0;},
  • 代码5:downloadVideo
    downloadVideo() {const superBuffer = new Blob(this.recordedBlobs, { type: 'video/webm' });// 使用URL.createObjectURL() 创建一个URLconst url = URL.createObjectURL(superBuffer);downloadUrl(url, "mp4");this.recordedBlobs = [];},
  • 代码6:donwloadUrl

VUE自动下载代码,指定文件名-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/6831.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java基础教程(12)-Java中的IO流

IO是指Input/Output,即输入和输出。以内存为中心: Input指从外部读入数据到内存,例如,把文件从磁盘读取到内存,从网络读取数据到内存等。Output指把数据从内存输出到外部,例如,把数据从内存写入到文件,把数据从内存输出到网络等。流的输入和输出 Java程序通过流来完成输…

发表博客之:cutlass demo讲解,在 sm75 机器上用 cuda core计算 fp32 矩阵乘法!对cutlass 感兴趣的看客别走开!!

文章目录 [发表博客之:cutlass demo讲解,在 sm75 机器上用 cuda core计算 fp32 矩阵乘法!对cutlass 感兴趣的看客别走开!!](https://cyj666.blog.csdn.net/article/details/138469553)深入理解 cutlass 在 sm75 cuda c…

基于Spring Boot的线上交流互动系统设计与实现

基于Spring Boot的线上交流互动系统设计与实现 开发语言:Java框架:springbootJDK版本:JDK1.8数据库工具:Navicat11开发软件:eclipse/myeclipse/idea 系统部分展示 系统功能界面图,在系统首页可以查看首页…

「 网络安全常用术语解读 」通用安全通告框架CSAF详解

1. 简介 通用安全通告框架(Common Security Advisory Framework,CSAF)通过标准化结构化机器可读安全咨询的创建和分发,支持漏洞管理的自动化。CSAF是OASIS公开的官方标准。开发CSAF的技术委员会包括许多公共和私营部门的技术领导…

如何使用预训练的通用音频表示进行心脏杂音检测

心脏杂音检测是心血管疾病诊断中的一个重要方面,通过听诊器进行检查是常见方法,但对临床医生的经验依赖很大。为了减少心脏声音解释中对熟练临床医生的需求,探索自动化心脏听诊的深度学习方法很有必要。然而,尽管深度学习模型通常…

Redis Cluster集群方案什么情况下会导致整个集群不可用?

Redis 没有使用哈希一致性算法,而是使用哈希槽。 Redis 中的哈希槽一共有16384个,计算给定 密钥的哈希槽,我们只需要对密钥的 CRC16 去取 16384。假设集群中有A、B、C三个集群节点, 不存在复制模式下,每个集群的节点包…

、、、、、

、、 、 transient 关键字总结 1)transient修饰的变量不能被序列化;2)transient只作用于实现 Serializable 接口;3)transient只能用来修饰普通成员变量字段;4)不管有没有 transient 修饰&…

网络工程师必学知识:SSH登录抓包分析报文交互过程

网络工程师必学知识:SSH登录抓包分析报文交互过程 1.概述:2.SSH传输层协议:3.SSH用户认证协议:4.SSH连接协议:5.抓包看看:6.总结:1.概述: SSH(Secure Shell ,安全外壳协议),就是在不安全的协议外层再加一层安全外壳。比如说telnet+SSH=stelnet。 SSH由三个组件构成:…

ASP.NET网上书店

摘要 本设计尝试用ASP.NET在网络上架构一个电子书城,以使每一位顾客不用出门在家里就能够通过上网来轻松购书。本文从理论和实践两个角度出发,对一个具有数据挖掘功能电子书城进行设计与实现分析。论文首先较为详尽地介绍了面向对象分析与设计的有关概念…

C++实验五 : 类的继承 -----CUST

【题目】 1.定义person类,包括数据私有成员:姓名,性别;共用成员函数:带参数构造函数,display函数输出本类对象的所有数据成员值。 2.定义student类,保护继承person类;增加保护数据成…

docker desktop实战部署oracle篇

1、前言 oracle数据库官方已提供现成的镜像,可以直接拿来部署了。 由于项目中需要使用oracle数据库的分表功能,之前安装的是standard版本,无奈只能重新安装。网上查了一番,使用的方法都比较传统老旧:下载安装包手动安…

golang获取变量动态类型

类型断言:data.(Type) 类型断言是最常用的获取变量动态类型的方法之一。允许在运行时将接口值转换为其具体类型。 data 是一个接口类型的变量。 Type 是一个具体的类型。 这个表达式的含义是,如果 data 的底层值是 Type 类型,那么 value 将接…

深度学习之GAN网络

目录 关于GAN网络 关于生成模型和判别模型 GAN网路的特性和搭建步骤(以手写字体识别数据集为例) 搭建步骤 特性 GAN的目标函数(损失函数) 目标函数原理 torch.nn.BCELoss(实际应用的损失函数) 代码…

百度下拉框负面信息如何删除?

百度头条360等搜索引擎,作为人们获取信息的主要途径之一。然而,一些知名的企业或个人可能会面临在搜索的下拉框中出现负面信息的问题,这可能对其声誉和形象造成不良影响。小马识途营销顾问根据自身从业经验,针对这类情况提出以下建…

轻盈高效开源的WEB在线客服平台:Go-Fly

Go-Fly:即刻沟通,非凡服务,轻松连接每一个对话,让客服日常更简单高效!- 精选真开源,释放新价值。 概览 Go-Fly 是一款基于 Go 语言 构建的开源即时通讯与客服管理系统,专为寻求高效、可定制在线…

网安学习笔记day-15,交换机工作原理

交换机工作原理 交换机是二层设备,基于MAC表工作。 MAC地址是有48位二进制组成,也就是6字节,通常分为6段,用十六进制表示。 交换机通信方式: 单播:点对点发送数据 广播:向所有设备发送数据…

【c++算法篇】双指针(上)

🔥个人主页:Quitecoder 🔥专栏:算法笔记仓 朋友们大家好啊,本篇文章我们来到算法的双指针部分 目录 1.移动零2.复写零3.快乐数4.盛水最多的容器 1.移动零 题目链接:283.移动零 题目描述: 算法…

【Linux】进程控制 之 进程创建 进程终止 进程等待 进程替换

👦个人主页:Weraphael ✍🏻作者简介:目前正在学习c和算法 ✈️专栏:Linux 🐋 希望大家多多支持,咱一起进步!😁 如果文章有啥瑕疵,希望大佬指点一二 如果文章对…

A股上市公司财务松弛数据集(2000-2022年)

01、数据介绍 财务松弛是指企业在运营过程中,由于各种原因导致其财务状况出现一定程度的松弛或宽裕状态。这种状态通常表现为企业持有较多的现金和流动性资产,同时负债相对较少,或者企业有较多的未使用授信额度等。 本数据包括:…

【LeetCode】链表oj专题

前言 经过前面的学习,咋们已经学完了链表相关知识,这时候不妨来几道链表算法题来巩固一下吧! 如果有不懂的可翻阅之前文章哦! 个人主页:小八哥向前冲~-CSDN博客 数据结构专栏:数据结构【c语言版】_小八哥…