使用Chrome采集摄像头并生成视频下载
主要使用2个技术点：WebRtc 的 getUserMedia 和 MediaRecorder
注意点
- 开始录制调用 start 方法要传入一个采样间隔，这样录制的媒体会按照你设置的值进行分割成一个个单独的区块, 而不是以默认的方式录制一个非常大的整块内容.
- demo地址：https://young-cowboy.github.io/gallery/MediaRecorder.html
参考资料
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<video width="400" height="300" controls id="video" autoplay></video>
<div>
<button type="button" id="record">record</button>
<button type="button" id="pause">pause</button>
<button type="button" id="resume">resume</button>
<button type="button" id="stop">stop</button>
<button type="button" id="finish">finish</button>
<a href="#" target="_blank" id="download">download</a>
</div>
<div>
<button type="button" id="info">info</button>
<button type="button" id="isTypeSupported">isTypeSupported</button>
</div>
<script type="text/javascript">
(function () {
let mediaRecorder = null;
let mediaStream = null;
let chunks = [];
function getMediaStream(params) {
var constraints = {
audio: true,
video: true
};
return navigator
.mediaDevices
.getUserMedia(constraints);
}
function attachMedia() {
getMediaStream()
.then(stream => {
document.querySelector('#video').srcObject = stream;
mediaStream = stream;
})
.catch(err => alert(`${err.name}: ${err.message}`));
}
function record() {
mediaRecorder = new MediaRecorder(mediaStream, { mimeType:"video/webm" });
mediaRecorder.addEventListener('dataavailable', e => {
console.log('dataavailable %o', e);
chunks.push(e.data);
});
mediaRecorder.addEventListener('error', e => console.log('error %o', e));
mediaRecorder.addEventListener('pause', e => console.log('pause %o', e));
mediaRecorder.addEventListener('resume', e => console.log('resume %o', e));
mediaRecorder.addEventListener('start', e => console.log('start %o', e));
mediaRecorder.addEventListener('stop', e => console.log('stop %o', e));
// 调用时可以通过给timeslice参数设置一个毫秒值,如果设置这个毫秒值,那么录制的媒体会按照你设置的值进行分割成一个个单独的区块, 而不是以默认的方式录制一个非常大的整块内容.
mediaRecorder.start(10);
}
function stop() {
mediaRecorder.stop();
}
function pause() {
mediaRecorder.pause();
}
function resume() {
mediaRecorder.resume();
}
function stop() {
mediaRecorder.stop();
}
function download() {
var blob = new Blob(chunks, {type: "video/webm"});
chunks = [];
var downloadLink = document.querySelector('a#download');
var videoURL = window.URL.createObjectURL(blob);
var rand = Math.floor((Math.random() * 10000000));
var name = "video_"+rand+".webm" ;
downloadLink.href = videoURL;
downloadLink.setAttribute( "download", name);
downloadLink.setAttribute( "name", name);
}
function info() {
console.log(`mimeType ${mediaRecorder.mimeType}`);
console.log(`state ${mediaRecorder.state}`);
console.log(`stream ${mediaRecorder.stream}`);
console.log(`videoBitsPerSecond %o`, mediaRecorder.videoBitsPerSecond);
console.log(`audioBitsPerSecond ${mediaRecorder.audioBitsPerSecond}`);
}
function isTypeSupported() {
var types = [
"video/webm",
"audio/webm",
"video/webm\;codecs=vp8",
"video/webm\;codecs=daala",
"video/webm\;codecs=h264",
"audio/webm\;codecs=opus",
"video/mpeg"
];
for (var i in types) {
console.log(`Is ${types[i]} supported? ${MediaRecorder.isTypeSupported(types[i] ? "Maybe!" : "No")}`);
}
}
document.querySelector('#record').addEventListener('click', e => record());
document.querySelector('#pause').addEventListener('click', e => pause());
document.querySelector('#resume').addEventListener('click', e => resume());
document.querySelector('#stop').addEventListener('click', e => stop());
document.querySelector('#finish').addEventListener('click', e => download());
document.querySelector('#info').addEventListener('click', e => info());
document.querySelector('#isTypeSupported').addEventListener('click', e => isTypeSupported());
attachMedia();
})()
</script>
</body>
</html>
使用Chrome采集摄像头并生成视频下载的更多相关文章
- JavaCV 采集摄像头及桌面视频数据
javacv 封装了javacpp-presets库很多native API,简化了开发,对java程序员来说比较友好. 之前使用JavaCV库都是使用ffmpeg native API开发,这种方式 ...
- JavaCV 采集摄像头和麦克风数据推送到流媒体服务器
越来越觉得放弃JavaCV FFmpeg native API,直接使用JavaCV二次封装的API开发是很明智的选择,使用JavaCV二次封装的API开发避免了各种内存操作不当引起的crash. 上 ...
- Android中直播视频技术探究之---采集摄像头Camera视频源数据进行推流(采用金山云SDK)
一.前言 在之前已经详细介绍了Android中的一种视频数据源:Camera,不了解的同学可以点击进入:Android中Camera使用详解 ,在这篇文章中我们介绍了如何采集摄像头的每一帧数据,然后进 ...
- 如何用FFmpeg API采集摄像头视频和麦克风音频，并实现录制文件的功能
之前一直用Directshow技术采集摄像头数据,但是觉得涉及的细节比较多,要开发者比较了解Directshow的框架知识,学习起来有一点点难度.最近发现很多人问怎么用FFmpeg采集摄像头图像,事实 ...
- 音视频下载Chrome插件 官方主页
2019年3月20日前的旧版有不能下载的情况,请使用下面的新版 音视频下载是个点击图标后就能下载网页里正在播放的音视频文件的软件 下载:官方下载 百度网盘 Chr ...
- YouTube视频下载的12个软件(Win和Mac)
如今,观看视频已经成为人们生活中重要的一部分.很多时候,我们都需要用到视频,比如教育用途.会议报告.休闲娱乐以及广告宣传等.如果你觉得有时候资源不好找的话,不放去看下YouTube.YouTube是世 ...
- 基于opencv在摄像头ubuntu根据视频获取
基于opencv在摄像头ubuntu根据视频获取 1 工具 原料 平台 :UBUNTU12.04 安装库 Opencv-2.3 2 安装编译执行步骤 安装编译opencv-2.3 參考h ...
- 记一次加密的ts视频下载
想要下载一个视频,但是网站上不能直接下载.试过IDM,以及Streaming Video Recorder 都不行.因为视频被加密了. ts 是分片的视频文件,m3u8 是播放索引列表(还可配置其他参 ...
- 手把手教你用python打造网易公开课视频下载软件3-对抓取的数据进行处理
上篇讲到抓取的数据保存到rawhtml变量中,然后通过编码最终保存到html变量当中,那么html变量还会有什么问题吗?当然会有了,例如可能html变量中的保存的抓取的页面源代码可能有些标签没有关闭标 ...
随机推荐
- hihoCoder #1321 : 搜索五•数独 （Dancing Links ,精确覆盖）
hiho一下第102周的题目. 原题地址:http://hihocoder.com/problemset/problem/1321 题意:输入一个9*9数独矩阵,0表示没填的空位,输出这个数独的答案. ...
- 查看文档的后几行命令：tail
假如有一个文件test.txt,内容如下: [root@lee ~]# cat test.txt 这是第1行 这是第2行 这是第3行 这是第4行 这是第5行 这是第6行 这是第7行 这是第8行 这是第 ...
- windows中wamp环境composer使用中openssl问题解决
今天在windows下学习lavaral,使用composer update命令报如下错误: [Composer\Exception\NoSslException] The openssl exten ...
- Spring JDBC查询返回对象代码跟踪
在封装方法的时候突然发现通过 ResultSetMetaData的getColumnCount()获取到的列明会多一列(ROWSTAT),而且每次的值都是1,目前没有找到相关信息,在国外网站上看到有类 ...
- Redis的主从同步手动执行故障切换
1.准备三个redis配置文件,通过端口的区分,启动三个redis数据库实例,然后配置主从复制. # a6371.conf port 6371 daemonize yes pidfile /data/ ...
- (转）Javascript模块化编程（一）：模块的写法
随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...
- vim python缩进等一些配置
VIM python下的一些关于缩进的设置: 第一步: 打开终端,在终端上输入vim ~/.vimrc,回车. 第二步: 添加下面的文段: set filetype=python au BufN ...
- Kattis - names Palindrome Names 【字符串】
题目链接 https://open.kattis.com/problems/names 题意 给出一个字符串 有两种操作 0.在字符串的最末尾加一个字符 1.更改字符串中的一个字符 求最少的操作步数使 ...
- Executor中的类
Executor框架 其中ThreadPoolExecutor非常重要,通过这个类自定义线程池 public ThreadPoolExecutor(int corePoolSize, //线程池里面的 ...
- [原创]Scala学习：流程控制，异常处理
1.流程控制 1)do..while def doWhile(){ var line="" do{ line = readLine() println("readline ...