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中 ...
随机推荐
- Php邮件发送源码
好久冒写点东西了.....最近生活压抑的很....为生活而劳累,整理下邮件发送的实例了,网上也有很多,我这个也是提取整理好的,测试Ok,首页邮件类smtp_email_class.php如下:< ...
- MYSQL 使用存储过程批量更新表数据
功能:实现将表result_good_city_dzl中的字段lat更新为表 result_good_city_lh中的lat,条件是两个表中的id一样 即: update result_good_c ...
- easyUI学习笔记二
1． 拖拉大小 <!DOCTYPE html> <html> <head> <title>easyui学习</title> <scr ...
- 如何多个router 进行合并？
有时间可能有多个人开发,如果在共用router, 势必会造成合并冲突,可以分开多个router.js ,然后进行合并 // router0.jsconst studyRouter = [ { path ...
- 【转】Ubuntu下外放有声音 耳机没声音
真是使用linux每天都有新的发现啊,今天早上起来用电脑,想听几首歌,插上耳机后发现没声音,我还以为是耳机坏了,就把耳机插在了手机上,发现耳机有声音,很纳闷,我象是不是电脑接口有问题了,但是在进系统的 ...
- .net core swagger汉化
基本swagger使用不再详解,具体百度其它帖子 1.将汉化的swagger js文件复制到项目根目录中 js代码如下 'use strict'; /** * Translator for docum ...
- Python之实现迭代器协议
什么是迭代器: --迭代器(迭代就是循环) 可以被next()函数调用并不断返回下一个值的对象称为迭代器:Iterator 可迭代对象有: 一类是集合数据类型,如list,tuple,dict,set ...
- MariaDB学习笔记（二）
七 索引索引:索引是创建在表上的,是对数据库表中的一列或多列的值进行排序的一种结构.索引可以提高查询的速度.索引有两种存储类型: B型树索引 哈希索引I nnoDB和MyISAM支持B型树索引,MEM ...
- 某个应用的CPU使用率居然达到100%，我该怎么做？(三)
某个应用的CPU使用率居然达到100%,我该怎么做?(三) 1. 引 你们好,可爱的小伙伴们^_^! 咱们最常用什么指标来描述系统的CPU性能呢?我想你的答案,可能不是平均负载,也不是CPU上下文切换 ...
- Linux里lftp总结
lftp的功能比较强大,相比原来用ftp,方便了很多. 1.登陆: lftp ftp://yourname@site pwd:***** 或 open ftp://yourname@site 基本操作 ...