获取本地的音频

  <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的更多相关文章

  1. navigator.mediaDevices.getUserMedia

    navigator.mediaDevices.getUserMedia: 作用:为用户提供直接连接摄像头.麦克风的硬件设备的接口 语法: navigator.mediaDevices.getUserM ...

  2. javascript使用H5新版媒体接口navigator.mediaDevices.getUserMedia，做扫描二维码，并识别内容

    本文代码测试要求,最新的chrome浏览器(手机APP),并且要允许chrome拍照录像权限,必须要HTTPS协议,http不支持. 原理:调用摄像头,将摄像头返回的媒体流渲染到视频标签中,再通过ca ...

  3. 谷歌使用navigator.mediaDevices.getUserMedia 调用摄像头拍照功能，不兼容IE

    <template>     <div>       <!--canvas截取流-->       <canvas ref="canvas" ...

  4. phonegap 捕获图片,音频,视屏 api capture

    一. capture Api 简单介绍 capture 对象用于获取视屏,音频和图像,它是一个全局对象,通过 navigator.device.capture 来访问 方法: capture.capt ...

  5. MediaDevices.getUserMedia()

    MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可,媒体输入会产生一个MediaStream,里面包含了请求的媒体类型的轨道.此流可以包含一个视频轨道(来自硬件或 ...

  6. JavaScripts调用摄像头【MediaDevices.getUserMedia()】

    h5调用摄像头(允许自定义界面)[MediaDevices.getUserMedia()] <!DOCTYPE html> <html lang="en"> ...

  7. PR视屏剪切

    一款常用的视频编辑软件,由Adobe公司推出.现在常用的有CS4.CS5.CS6.CC.CC 2014及CC 2015版本.是一款编辑画面质量比较好的软件,有较好的兼容性,且可以与Adobe公司推出的 ...

  8. FFmpeg + php 视屏转换

    什么是FFmpeg? FFmpeg是一个开源免费跨平台的视频和音频流方案,属于自由软件,采用LGPL或GPL许可证(依据你选择的组件).它提供了录制.转换以及流化音视频的完整解决方案.它包含了非常先进 ...

  9. Android中使用SurfaceView+MediaPlayer+自定义的MediaController实现自定义的视屏播放器

    效果图如下: (PS本来是要给大家穿gif动态图的,无奈太大了,没法上传) 功能实现:暂停,播放,快进,快退,全屏,退出全屏,等基本功能 实现的思路: 在主布局中放置一个SurfaceView,在Su ...

随机推荐

  1. EF6 DbModelBuilder

    protected override void OnModelCreating(DbModelBuilder modelBuilder) { modelBuilder.Entity<Produc ...

  2. react 生命周期函数

    (1)初始化阶段:getDefaultProps:获取实例的默认属性static propTypes 设置属性的类型componentWillMount:组件即将首次被装载.渲染到页面上render: ...

  3. sublime text 3-right click context menu

    dd a system wide windows explorer button " Edit with Sublime" similar to how Notepad++ doe ...

  4. Web前端，HTML5开发，前端资源，前端网址，前端博客，前端框架整理 - 转改

    Web前端/H5开发,前端资源,前端网址,前端博客,前端框架整理 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v ...

  5. openssl - X509证书操作函数

    原文链接: http://blog.csdn.net/zqt520/article/details/26965797 现有的证书大都采用X.509规范,主要同以下信息组成:版本号.证书序列号.有效期. ...

  6. Appium 输入 & 符号，实际输入&-

    2018-10-11 12:27:12:178 - [debug] [MJSONWP] Calling AppiumDriver.setValue() with args: [["& ...

  7. [k8s]kube-dns/dashboard排错历险记(含sa加载用法/集群搭建)

    kube-dns原理 参考: 组件架构看这个就够了 http://cizixs.com/2017/04/11/kubernetes-intro-kube-dns 设置细节看这个就够了 http://b ...

  8. vertx插件使用vertx-maven-plugin

    http://search.maven.org http://search.maven.org/#artifactdetails%7Cio.fabric8%7Cvertx-maven-plugin%7 ...

  9. Android studio 学习资料汇总

    .Android studio 文件结构: https://www.aswifter.com/2015/07/07/android-studio-project-struct/ .Android st ...

  10. 【Android】Android开源项目精选（一）

    ListView ListView下拉刷新:https://github.com/johannilsson/android-pulltorefresh AndroidPullToRefresh:htt ...