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中 ...
随机推荐
- Windows编写driver
1. 编译 Pspeek.cpp #include <ntddk.h> #define DANIEL_LIST_PROCESS 0x8001 PDRIVER_OBJECT daniel_D ...
- txt文本程序 打开python文件 另存为原来的文件名，不能覆盖原来的文件解决
txt文本程序 打开python文件 另存为原来的文件名,不能覆盖原来的文件 如:1.py文件用txt文本程序打开后,另存为 1.py,保存完毕后,不覆盖1.py文件,会生成 1.py.txt文件 原 ...
- 53-python基础-python3-列表-列表解析
列表解析 将for循环和创建新元素的代码合并成一行,并自动附加新元素. 实例:使用列表解析创建平方数列表. 首先指定一个描述性的列表名,如squares : 然后,指定一个左方括号,并定义一个表达式, ...
- 新手学习 React 迷惑的点
网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的,所以我打 ...
- 38.Subsets（子集和）
Level: Medium 题目描述: Given a set of distinct integers, nums, return all possible subsets (the power ...
- SQL数据库—<4>SQL编程--简单学习
数据类型:列的类型 变量定义:declare 变量名 类型名 变量名:以@开头 赋值和取值: 赋值:set/select 变量=值 取值:变量名例:declare @a varcha ...
- activiti 流程部署的各种方式
流程资源可以是各种类型的文件,在启动流程或流程实例运行过程中会被读取.下面介绍常用的流程资源. 一.流程资源 流程定义文件:扩展名为bpmn20.xml和bpmn; 流程定义的图片:用BPMN2.0规 ...
- Java线程的优先级设置遵循什么原则？
Java线程的优先级设置遵从下述原则: (1) 线程创建时,子线程继承父线程的优先级 (2) 线程创建后,可在程序中通过调用setPriority( )方法改变线程的优先级 (3) 线程的优先级是1~ ...
- ECUST_Algorithm_2019_3
简要题意及解析 1001 给出一个\(n\times m\)连连看的局面,下面有\(q\)次询问:两个位置的块能否消去,即两个位置的连线是否能少于两次转折,回答\(YES/NO\).与一般的连连看不同 ...
- pycharm配色
setting-appearanse-theme-IntelliJ setting-Editer-color scheme-Default setting-Editer-color scheme-py ...