RecordRTC的视频录制，回放，截图，下载

最新推荐文章于 2024-06-18 09:34:08 发布

2401_85015025

最新推荐文章于 2024-06-18 09:34:08 发布

阅读量386

点赞数 4

分类专栏： 2024年程序员学习文章标签：物联网嵌入式硬件面试

本文链接：https://blog.csdn.net/2401_85015025/article/details/138989389

版权

2024年程序员学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新

需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）

如果你需要这些资料，可以戳这里获取

视频下载
截图


### 3.实时视频播放


#### 3.1开启录制首先拿到video的视频流


通过 navigator.mediaDevices.getUserMedia()去拿到视频流，想了解拿到视频流的更详细讲解[点这里](https://bbs.csdn.net/topics/618679757)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/b02a78db812e466f984b9bed3c4dd6b6.png)


#### 3.2获取视频流


获取到视频流之后拿到video的id,然后通过 srcObject实现视频的录制和实时播放,然后立马开始播放视频流。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/b0ca7c793bab43069d75c4fc9dfcb057.png)


### 4.开启视频录制和关闭视频录制


1. 拿到视频流 通过RecordRTC()方法的返回值中的方法去开启视频录制。
2. 然后十秒钟后就结束视频录制。
3. 结束录制的时候关闭摄像头和录音设备。
4. 调用 openRecord()的方法开启视频的录制

   			//开启录制
            recorder.startRecording()
			const sleep = m => new Promise(r => setTimeout(r, m));
            await sleep(10000);
            //十秒后结束视频录制
            recorder.stopRecording(function (audioURL) {
                // window.open(audioURL)
                close()
            })


![在这里插入图片描述](https://img-blog.csdnimg.cn/58a8ff59dc0940cab359d519e6ed098b.png)


### 5.播放视频


1. 拿到 RecordRTC()方法的返回值recorder。
2. 通过这个返回值 调用toURL()方法，该方法返回一个可以播放的url
3. 把这个url赋值给第二个video id为 myVideo1，然后点击视频播放按钮，就可以播放刚刚录制的视频了。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/4deccddb63cf43d498b9f99fe4d3b0e8.png)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/dbc7f8c531fe4e968fb817e338e69555.png)


### 6.视频下载


1. 拿到 RecordRTC()方法的返回值recorder
2. 通过recorder.getBlob() 方法拿到返回 blob 布尔值。
3. 最后通过RecordRTC 提供的方法 invkeSaveAsDialog(布尔值,视频下载的格式)去下载视频


![在这里插入图片描述](https://img-blog.csdnimg.cn/33c11636e813434ab667c0fc41402569.png)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d29f1e63473447e9aed82262dbc9e1e1.png)


### 7.视频截图


1. 设置canvas 宽高和 video的数值一样
2. 以id为myVideo画一张图绘制canvas画一个图片。


![在这里插入图片描述](https://img-blog.csdnimg.cn/448001366db149ca8456699f70313aa3.png)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/daa87c21b41f456d836fc88da1ce0e7f.png)


上面就是RecordRTC视频录制的播放，录制，回放，截图等功能 了解更多功能 可以参考[官方文档](https://bbs.csdn.net/topics/618679757)


下面回展示所有相关代码 希望可以帮助你。