使用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变量中的保存的抓取的页面源代码可能有些标签没有关闭标 ...
随机推荐
- 模拟多级复选框效果--jquery
今天又次体会到jquery的强大了,做了个多级复选框的效果,代码总共就20+行就over了. 我又想用js来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升. 主要分享下jq ...
- nignx部署django
操作系统:Linux wiki 2.6.32-131.0.15.el6.x86_64 nginx版本: nginx-1.5.7 uwsgi版本:uwsgi-2.0.8 大致流程参考:http://ww ...
- LCD驱动程序(二)
上节我们主要是对fb_info结构体的配置,对fb_info结构体的配置主要分为一下步骤: static int lcd_init(void){ /* 1. 分配一个fb_info */ s3c_lc ...
- iOS应用的执行原理
本文转自:http://www.cnblogs.com/oc-bowen/p/6061261.html http://www.cnblogs.com/oc-bowen/p/6061178.html 一 ...
- 17.Django表单验证
Django提供了3中方式来验证表单 官网文档:https://docs.djangoproject.com/en/1.9/ref/validators 1.表单字段验证器 a.引入:from dja ...
- ubuntun下安装Fiddler
对于分析网页或者写爬虫的时候经常需要用到抓包工具进行网页数据的抓包.在Windows下可以安装Fiddler来抓包.在ubuntun下不能直接安装Fiddler.需要先安装mono 1 首先安装mon ...
- dygraphs for R
dygraphs一个功能非常强大的处理时间序列的画图包!画出的图在html中打开,鼠标点处,即可得到数据信息.详情见 http://rstudio.github.io/dygraphs/index.h ...
- python基础14 ---函数模块5(模块和包)
模块与包 一.模块 1.模块是怎么诞生的. 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护.为了编写可维护的代码,我们把很多函数分组,分别放到 不同的文 ...
- 请简单介绍一下Spring
Spring 是一个开源框架,是为了解决企业应用程序开发复杂性而创建的.框架的主要优势之一就是其分层架构,分层架构允许您选择使用哪一个组件,同时为 J2EE 应用程序开发提供集成的框架. Spring ...
- iOS中成员变量和属性区别
历史由来: 接触iOS的人都知道,@property声明的属性默认会生成一个_类型的成员变量,同时也会生成setter/getter方法. 但这只是在iOS5之后,苹果推出的一个新机制.看老代码时,经 ...