RecordRTC的视频录制,回放,截图,下载(1),2024年物联网嵌入式开发网络编程总结篇

48 阅读5分钟

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

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

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

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

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

### 3.实时视频播放


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


通过 navigator.mediaDevices.getUserMedia()去拿到视频流,想了解拿到视频流的更详细讲解[点这里](https://gitee.com/vip204888)  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6897d48b0fdc446c874f28616dfeb843~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771319182&x-signature=qcqtsL5%2FsD%2BBNoWtywvQNKxSgjk%3D)


#### 3.2获取视频流


获取到视频流之后拿到video的id,然后通过 srcObject实现视频的录制和实时播放,然后立马开始播放视频流。  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a584bc3fd13441728eca9f66449f696f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771319182&x-signature=%2FyZim9Fxy4tB%2FC9q%2F7NOWfQUo%2BY%3D)


### 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://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e2b8a349ce5a4a938fca30f045ae1040~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771319182&x-signature=3WYfl4S5w3orQZBODUZ%2BqQJ2ki8%3D)


### 5.播放视频


1. 拿到 RecordRTC()方法的返回值recorder。
2. 通过这个返回值 调用toURL()方法,该方法返回一个可以播放的url
3. 把这个url赋值给第二个video id为 myVideo1,然后点击视频播放按钮,就可以播放刚刚录制的视频了。  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/45d3de9d777c4823b06f2554d1fd24d3~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771319182&x-signature=fOKKxrgsDxJhkdlfwPjxf5oEfVo%3D)  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e11096d48677477f8a43191957100bd3~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771319182&x-signature=3wlScICicUsQATvt9EKVMr1vSJ8%3D)


### 6.视频下载


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


![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/62a0806e111d40bf843b21abcd227e55~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771319182&x-signature=eUgU8vhU8Hs3w3fgNn81itabZ08%3D)  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/85655b279caf4e31a5017b63dba8f878~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771319182&x-signature=zkPgg2kIbfUF1%2BAQMl71Ai6AgcA%3D)


### 7.视频截图


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


![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a47be51d477c4fdb966f6e765ab0524a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771319182&x-signature=FR9YC5ILv0CMXmpF237SUchjQnY%3D)  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e5b65a4b6fb949d5b224e175e7cdc0e5~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771319182&x-signature=Kg%2FuIM6noWEUL26yEOlYrWeyeXA%3D)


上面就是RecordRTC视频录制的播放,录制,回放,截图等功能 了解更多功能 可以参考[官方文档](https://gitee.com/vip204888)


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



<!DOCTYPE html>
Document 开启录制 视频播放 视频下载 截图

img img

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

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

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