RecordRTC的视频录制，回放，截图，下载(1)-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_85015025/article/details/138989378

收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。

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

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

开启录制
视频播放
视频下载
截图


### 3.实时视频播放


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


通过 navigator.mediaDevices.getUserMedia()去拿到视频流，想了解拿到视频流的更详细讲解[点这里](https://bbs.youkuaiyun.com/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.youkuaiyun.com/topics/618679757)


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