录制用户的音频，视屏 navigator.mediaDevices.getUserMedia
获取本地的音频
<input type="file" accept="audio/*" capture="microphone" id="recorder">
<audio id="player" controls></audio>
<script>
var recorder = document.getElementById('recorder');
var player = document.getElementById('player')
recorder.addEventListener('change', function (e) {
var file = e.target.files[0];
// Do something with the audio file.
player.src = URL.createObjectURL(file);
});
</script>
获取麦克风声音
声音极小
<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>
<style>
a,
button {
border: 0;
background-color: #448aff21;
text-decoration: none;
padding: 10px;
border-radius: 2px;
color: #448aff !important;
}
</style>
</head>
<body style="margin-top: 20px;">
<a id="download">Download</a>
<button id="start">Start</button>
<button id="stop">Stop</button>
<script>
let l = console.log
navigator.permissions.query({
name: 'microphone'
}).then(function (result) {
if (result.state == 'granted') { // 用户之前已授予对麦克风的访问权
l('ok')
} else if (result.state == 'prompt') { // 用户尚未授予访问权，调用 getUserMedia 时将会收到提示
l('ready')
} else if (result.state == 'denied') { // 系统或用户已显式屏蔽对麦克风的访问权，您将无法获得对其的访问权
l('...')
}
result.onchange = function () {
l('change..')
};
});
const downloadLink = document.getElementById('download');
const stopButton = document.getElementById('stop');
const startButton = document.getElementById('start');
navigator.mediaDevices.getUserMedia({
audio: true,
video: false
})
.then(stream => {
stopButton.addEventListener('click', e => {
mediaRecorder.stop();
})
startButton.addEventListener('click', e => {
mediaRecorder.start();
})
const recordedChunks = [];
const mediaRecorder = new MediaRecorder(stream);
mediaRecorder.addEventListener('dataavailable', function (e) {
if (e.data.size > 0) {
recordedChunks.push(e.data);
}
});
mediaRecorder.addEventListener('stop', function () {
l('暂停')
downloadLink.href = URL.createObjectURL(new Blob(recordedChunks));
downloadLink.download = 'acetest.wav';
});
mediaRecorder.addEventListener('start', e => {
l('开始')
})
});
</script>
</body>
镶嵌在 audio元素里面
<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>
<style>
a,
button {
border: 0;
background-color: #448aff21;
text-decoration: none;
padding: 10px;
border-radius: 2px;
color: #448aff !important;
}
</style>
</head>
<body style="margin-top: 20px;">
<button id="start">Start</button>
<button id="stop">Stop</button>
<div>
<audio id="audio" controls></audio>
</div>
<script>
let l = console.log
const stopButton = document.getElementById('stop');
const startButton = document.getElementById('start');
navigator.mediaDevices.getUserMedia({
audio: true,
// video: true
})
.then(stream => {
stopButton.addEventListener('click', e => {
mediaRecorder.stop();
})
startButton.addEventListener('click', e => {
mediaRecorder.start();
})
const recordedChunks = [];
const mediaRecorder = new MediaRecorder(stream);
mediaRecorder.addEventListener('dataavailable', function (e) {
if (e.data.size > 0) {
recordedChunks.push(e.data);
}
});
mediaRecorder.addEventListener('stop', function () {
l('暂停')
var audio = document.getElementById('audio');
audio.src = URL.createObjectURL(new Blob(recordedChunks));
audio.play();
});
mediaRecorder.addEventListener('start', e => {
l('开始')
})
});
</script>
</body>
录制视频 github地址
<!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>
<style>
a,
button {
border: 0;
background-color: #448aff21;
text-decoration: none;
padding: 10px;
border-radius: 2px;
color: #448aff !important;
}
</style>
</head>
<body style="margin-top: 20px;">
<button id="start">Start</button> <button id="stop">Stop</button>
<div>
<p>live. <span class="timer"></span></p>
<video
width="600"
id="live"
style="box-sizing: border-box; border: 4px solid #f48"
></video>
</div>
<script>
let l = console.log;
let n = 0;
let mediaRecorder;
let timer;
const stopButton = document.getElementById("stop");
const startButton = document.getElementById("start");
navigator.mediaDevices
.getUserMedia({
audio: true,
video: true,
})
.then(stream => {
let liveVideo = document.getElementById("live");
// liveVideo.src = URL.createObjectURL(stream); // 你会看到一些警告
liveVideo.srcObject = stream;
liveVideo.play();
stopButton.addEventListener("click", stopLive);
startButton.addEventListener("click", e => {
startLive(stream);
});
});
// 显示录制的秒数
function logger() {
const timerEl = document.querySelector(".timer");
timer = setInterval(() => {
n += 1;
timerEl.textContent = `${n}s`;
}, 1000);
}
// 暂停后下载视频
function downLoadVideo(chunks) {
let downloadLink = document.createElement("a");
downloadLink.href = URL.createObjectURL(
new Blob(chunks, {
type: "application/video",
})
);
// downloadLink.download = 'live.webm';
downloadLink.download = "live.ogg";
// downloadLink.download = 'live.mp4';
downloadLink.click();
}
// 结束录制
function stopLive() {
clearInterval(timer);
n = 0;
if (mediaRecorder) {
mediaRecorder.stop();
} else {
alert("还没有开始。");
}
}
function startLive(stream) {
logger();
let recordedChunks = [];
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
mediaRecorder.addEventListener("dataavailable", function(e) {
if (e.data.size > 0) recordedChunks.push(e.data);
});
mediaRecorder.addEventListener("stop", function() {
l("暂停 自动下载");
downLoadVideo(recordedChunks);
});
mediaRecorder.addEventListener("start", e => {
l("开始 录制");
});
}
</script>
</body>
</html>
录制用户的音频，视屏 navigator.mediaDevices.getUserMedia的更多相关文章
- navigator.mediaDevices.getUserMedia
navigator.mediaDevices.getUserMedia: 作用:为用户提供直接连接摄像头.麦克风的硬件设备的接口 语法: navigator.mediaDevices.getUserM ...
- javascript使用H5新版媒体接口navigator.mediaDevices.getUserMedia，做扫描二维码，并识别内容
本文代码测试要求,最新的chrome浏览器(手机APP),并且要允许chrome拍照录像权限,必须要HTTPS协议,http不支持. 原理:调用摄像头,将摄像头返回的媒体流渲染到视频标签中,再通过ca ...
- 谷歌使用navigator.mediaDevices.getUserMedia 调用摄像头拍照功能，不兼容IE
<template> <div> <!--canvas截取流--> <canvas ref="canvas" ...
- phonegap 捕获图片,音频,视屏 api capture
一. capture Api 简单介绍 capture 对象用于获取视屏,音频和图像,它是一个全局对象,通过 navigator.device.capture 来访问 方法: capture.capt ...
- MediaDevices.getUserMedia()
MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可,媒体输入会产生一个MediaStream,里面包含了请求的媒体类型的轨道.此流可以包含一个视频轨道(来自硬件或 ...
- JavaScripts调用摄像头【MediaDevices.getUserMedia()】
h5调用摄像头(允许自定义界面)[MediaDevices.getUserMedia()] <!DOCTYPE html> <html lang="en"> ...
- PR视屏剪切
一款常用的视频编辑软件,由Adobe公司推出.现在常用的有CS4.CS5.CS6.CC.CC 2014及CC 2015版本.是一款编辑画面质量比较好的软件,有较好的兼容性,且可以与Adobe公司推出的 ...
- FFmpeg + php 视屏转换
什么是FFmpeg? FFmpeg是一个开源免费跨平台的视频和音频流方案,属于自由软件,采用LGPL或GPL许可证(依据你选择的组件).它提供了录制.转换以及流化音视频的完整解决方案.它包含了非常先进 ...
- Android中使用SurfaceView+MediaPlayer+自定义的MediaController实现自定义的视屏播放器
效果图如下: (PS本来是要给大家穿gif动态图的,无奈太大了,没法上传) 功能实现:暂停,播放,快进,快退,全屏,退出全屏,等基本功能 实现的思路: 在主布局中放置一个SurfaceView,在Su ...
随机推荐
- SRS流媒体服务器安装配置
SRS全称Simple RTMP Server,定位是运营级的互联网直播服务器集群,是一个非常简单就可以推送rtmp视频流的服务器. github主页:https://github.com/ossrs ...
- Tomcat热部署SpringMVC项目出错
一.问题 项目照常跑,没有什么大的影响,但是在控制台却出现了错误,具体信息如下图所示 二.解决方法 原因分析:很多人已经说的很明白了,这大概是因为项目文件很多,在tomcat重启的时候,之前的tomc ...
- eclipse Mars查看JDK源代码
eclipse Mars查看JDK源代码 问题描写叙述,eclipse(mars)下看不到JDK类的声明即源代码部分的内容. 如图右击string类型: 点击打开声明.结果出现了下图所看到的的错误,无 ...
- PL/SQL学习笔记之数据类型中的标量、LOB
一:标量 标量 即 基本数据类型,主要有4种:数值.字符.布尔类型.日期时间. 1:数值类型 数据类型 描述 PLS_INTEGER 通过2,147,483,647到-2147483648范围内有符号 ...
- How can R and Hadoop be used together?
Referer: http://www.quora.com/How-can-R-and-Hadoop-be-used-together/answer/Jay-Kreps?srid=OVd9&s ...
- C++复数运算 重载
近期整理下很久前写的程序,这里就把它放在博文中了,有些比较简单,但是很有学习价值. 下面就是自己很久前实现的复数重载代码,这里没有考虑特殊情况,像除法中,分母不为零情况. #include <i ...
- 【iCore4 双核心板_ARM】例程二：读取ARM按键状态
实验原理: 按键的一端与STM32 PB9相连,另外一端接地,且PB9外接一个1K电阻大小的上拉电阻, 初始化时把PB9设置成输入模式,当按键弹起时,PB9由于上拉电阻的作用呈高电平(3.3V): 当 ...
- 【iCore4 双核心板_FPGA】例程十：FSMC总线通信实验——复用地址模式
实验原理: STM32F767上自带FMC控制器,本实验将通过FMC总线的地址复用模式实现STM32与FPGA 之间通信,FPGA内部建立RAM块,FPGA桥接STM32和RAM块,本实验通过FSMC ...
- win7(64bit)+python3.5+pyinstaller3.2安装和测试
最近因为做项目需要,需要在win7中安装pyinstaller用于将.py文件生成脱离python平台的可执行程序*.exe文件. 安装步骤 第一步:安装python3.5 [下载python3.5的 ...
- AtomicInteger 源码阅读
Package java.util.concurrent.atomic 这是一个小工具包,它的实际作用是提供了很多个无阻塞的线程安全的变量操作工具. 无阻塞的线程安全:其含义就是不使用 synchro ...