Web RTC录视频
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
let recorder
function start() {
let videoTarget = document.getElementById('audio');
// navigator.mediaDevices.getUserMedia({audio: true, video: {width: 400, height: 600}})
//getDisplayMedia 录屏
navigator.mediaDevices.getUserMedia({audio: true, video: {width: 400, height: 600}})
.then((stream) => {
recorder = new MediaRecorder(stream);
console.log(recorder,'recorder');
console.log(stream,'stream'); videoTarget.srcObject = stream;
videoTarget = (...arg) => {
console.log(arg);
}
recorder.ondataavailable = (event) => { let url = URL.createObjectURL(event.data);
let link = document.createElement("a");
console.log(url,event,'event')
window.location.href = url
link.target = "_blank";
link.href = url;
link.click(); }
recorder.start();
});
} function stop() {
console.log('结束录像'); recorder.stop();
}
</script>
</head> <body>
<video id="audio" width="400" height="600" controls autoplay></video>
<input onclick="start()" type="button" value="开始" />
<input onclick="stop()" type="button" value="结束" />
</body> </html>
录完会返回一个blob对象，可通过 formdata上传给后台
Web RTC录视频的更多相关文章
- 如何实现Web页面录屏？
摘要: 很有意思的操作... 原文:web页面录屏实现 译者:frontdog Fundebug经授权转载,版权归原作者所有. 写在前面的话 在看到评论后,突然意识到自己没有提前说明,本文可以说是一篇 ...
- 用js实现web端录屏
用js实现web端录屏 原创2021-11-14 09:30·无意义的路过 随着互联网技术飞速发展,网页录屏技术已趋于成熟.例如可将录屏技术运用到在线考试中,实现远程监考.屏幕共享以及录屏等:而在我们 ...
- Kali Linux Web 渗透测试视频教—第二十课-利用kali linux光盘或者usb启动盘破解windows密码
Kali Linux Web 渗透测试视频教—第二十课-利用kali linux光盘或者usb启动盘破解windows密码 文/玄魂 目录 Kali Linux Web 渗透测试视频教—第二十课-利用 ...
- 我的第一个项目：用kinect录视频库
kinect深度视频去噪 kinectmod32.dll http://pan.baidu.com/s/1DsGqX 下载后改名kinect.dll 替换掉Redist\OpenNI2\Drivers ...
- Android 音视频深入 五 完美的录视频(附源码下载)
本篇项目地址,名字是录视频,求star https://github.com/979451341/Audio-and-video-learning-materials 这一次的代码录视频在各个播放器都 ...
- Android 音视频深入 四 录视频MP4（附源码下载）
本篇项目地址,名字是<录音视频(有的播放器不能放,而且没有时长显示)>,求star https://github.com/979451341/Audio-and-video-learnin ...
- Android录屏命令、Android录Gif、Android录视频
NoHttp开源地址:https://github.com/yanzhenjie/NoHttp NoHttp具体使用文档已公布,你想知道的全都有,请点我移步! 版权声明:转载请注明本文转自严振杰的博客 ...
- 无需Flash录视频——HTML5中级进阶
前言 HTML5的权限越来越大了,浏览器可以直接调用摄像头.麦克风了,好激动啊.我们要用纯洁的HTML代码造出自己的天地. 视频采集 本篇介绍的栗子 都是在chrome 47 版本以上的,低版本的可能 ...
- 转一下大牛的嵌入web页播放视频方法（转）
来自:http://www.cnblogs.com/bandry/archive/2006/10/11/526229.html 在Web页中嵌入Media Player的方法比较简单,只要用HTML中 ...
随机推荐
- springmvc知识点整理
1.Springmvc架构 2.Springmvc组件三大组件:处理器映射器,处理器适配器,视图解析器处理器映射器:注解式处理器映射器,对类中标记了@ResquestMapping的方法进行映射,根据 ...
- git 多个远程仓库
有时候一个git项目需要使用多个远程库,如:测试环境+生产环境,国内加国外等 项目根目录下修改 .git/config 文件 vim .git/config 新增远程一个远程仓库 并为其命名 :如 ...
- Percona XtraDB Cluster集群5.7 开启SSL认证
mysqldump -uroot -p --ssl-cert=/data/mysql/client-cert.pem --ssl-key=/data/mysql/client-key.pem -h 1 ...
- jquery 的几种写法和常见问题
为了理解页面初始化事件的编写和执行方式,特此记录下页面加载事件的语句方式: //最简单的加载事件语句 $(function(){ alert("这个提示框最先弹出")//这个用的最 ...
- 微服务-技术专区-监控专区(Skywalking与Pinpoint) - 监控对比分析
由于公司目前有200多微服务,微服务之间的调用关系错综复杂,调用关系人工维护基本不可能实现,需要调研一套全链路追踪方案,初步调研之后选取了skywalking和pinpoint进行对比; 选取skyw ...
- jackson的readTree有坑
{"}] readTree认为上面的字符是json,坑啊 alibaba的fastjson 无论JSONObject.parseObject还是JSONObject.parseObject ...
- 【知识强化】第六章 应用层 6.3 文件传输协议FTP
这节课我们来学习一下文件传输协议FTP. 我们知道一个文件的传输过程呢一定需要协议的规定,那在文件传送协议这一块呢有很多个协议.比较主要的两个一个是文件传送协议FTP,一个是简单文件传送协议TFTP. ...
- 【知识强化】第五章 传输层 5.2 UDP协议
这节课我们来学习一下UDP协议. 那在上节课呢我们学了这样一个打油诗. 啊,就是传输层有两个好兄弟,大哥TCP和二弟UDP.大哥很靠谱,二弟不靠谱.那只要说到UDP协议我们就要知道它的一个重要的特点, ...
- python问答
1)什么是Python?使用Python有什么好处? Python是一种编程语言,包含对象,模块,线程,异常和自动内存管理.Python的好处在于它简单易用,可移植,可扩展,内置数据结构,并且它是一个 ...
- 三、JPA增删改查常用方法
前言:创建EntityManager对象,需要先创建创建EntityManagerFactory对象 方式一:直接通过persistenceUnitName创建 String persistenceU ...