栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

RecordRTC:利用WebRTC在Web端录制视频

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

RecordRTC:利用WebRTC在Web端录制视频

利用RecordRTC打开手机或者电脑摄像头,进行录像,完成后对视频文件进行压缩。兼容Firefox 17+、Chrome 21+、Edge 12+、Chrome for Android等。

这个只在安卓机适用。如果你是在微信浏览器做录制视频的功能,建议不要使用这种方法。因为录制的视频并没有保存下来,最终传给服务器的文件只剩下390字节的头,视频内容不存在。需要修改底层的RecordRTC.js,我也没有尝试,希望有其他人尝试过,可以留言交流。

一、首先在index.html引入getHTMLMediaElement文件

二、下载依赖包

npm i recordrtc
npm i timers

三、在Vue框架可直接使用如下代码块

.play{  width: 50px;  height: 50px;  line-height: 52px;  text-align: center;  background-color: #fff;  border: 1px solid #ccc;  border-radius: 50%;  position: absolute;  bottom: 20px;  left: 50%;  margin-left: -25px;  }.start{  display: inline-block;  width: 35px;  height: 35px;  border-radius: 50%;  background-color: #ccc;  margin-top: 6px;
}.stop{  display: inline-block;  width: 15px;  height: 15px;  border-radius: 5px;  background-color: red;  margin-top: 16px;
}.save{  width: 50px;  height: 35px;  line-height: 35px;  text-align: center;  background-color: #fff;  border: 1px solid #ccc;  border-radius: 3px;  position: absolute;  bottom: 25px;  right: 20px;
}.back{  width: 50px;  height: 35px;  line-height: 35px;  text-align: center;  background-color: #fff;  border: 1px solid #ccc;  border-radius: 3px;  position: absolute;  bottom: 25px;  left: 20px;
}.settime{  width: 100%;  height: 40px;  line-height: 40px;  background-color: rgba(0, 0, 0, 0.5);  color: #fff;  text-align: center;
}.finish{  text-align: center;  margin-top: 100px;  padding: 20px;
}



作者:Lucia_Huang

链接:https://www.jianshu.com/p/6971dbdfbcc2

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/240601.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号