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中 ...
随机推荐
- python web自动化测试框架搭建(功能&接口)——环境搭建
自动化测试框架一般需要实现以下通用功能 执行前准备 结束后清理 执行步骤输出 执行结果输出 错误.失败截图 测试报告 发送邮件 日志 需要的软件和python第三方库有: 通用: JDK Eclips ...
- 【C#学习笔记】 IDisposable 接口
在.net 编程环境中,系统的资源分为托管资源和非托管资源. 对于托管的资源的回收工作,是不需要人工干预回收的,而且你也无法干预他们的回收,所能够做的只是了解.net CLR如何做这些操作.也就是说对 ...
- Html5 学习笔记 【PC固定布局】 实战2 导航栏搜索区域
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- django简单实现注册登录模块
源码下载:https://files.cnblogs.com/files/hardykay/login.zip 新建项目(我使用pycharm开发,也可以使用如下命令建立项目 ) cmd命令行,前提需 ...
- Ansible@一个高效的配置管理工具--Ansible configure management--翻译（三）
未经书面许可.请勿转载 一张图简单概括 Simple Playbooks Ansible is useful as a command-line tool for making small chang ...
- Java开发中的23种设计模式详解（1）创建型
设计模式(Design Patterns) --可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...
- go语言从例子开始之Example20.错误处理
Go 语言使用一个独立的·明确的返回值来传递错误信息的.这与使用异常的 Java 和 Ruby 以及在 C 语言中经常见到的超重的单返回值/错误值相比,Go 语言的处理方式能清楚的知道哪个函数返回了错 ...
- Codeforces 1188B 式子转化
思路:看到(a + b)想到乘上(a - b)变成平方差展开(并没有想到2333), 两边同时乘上a - b, 最后式子转化成了a ^ 4 - ka = b ^ 4 - kb,剩下的就水到渠成了. 0 ...
- Codeforces 360C DP 计算贡献
题意:给你一个长度为n的字符串,定义两个字符串的相关度为两个串对应的子串中第一个串字典序大于第二个串的个数.现在给你相关度,和第二个串,问满足条件的第一个串有多少个? 思路:设dp[i][j]为填了前 ...
- 有趣的taskset命令，使进程再指定CPU上运行
前言 taskset命令,用于进程的CPU调优,可以把某进程,指定再某CPU内工作. 如还不明白,可以参考此文 http://www.361way.com/linux-context-switch/5 ...