获取本地的音频

  1. <input type="file" accept="audio/*" capture="microphone" id="recorder">
  2. <audio id="player" controls></audio>
  3. <script>
  4. var recorder = document.getElementById('recorder');
  5. var player = document.getElementById('player')
  6. recorder.addEventListener('change', function (e) {
  7. var file = e.target.files[0];
  8. // Do something with the audio file.
  9. player.src = URL.createObjectURL(file);
  10. });
  11. </script>

获取麦克风声音

声音极小

  1. <head>
  2. <meta charset="UTF-8">
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  5. <title>Document</title>
  6. <style>
  7. a,
  8. button {
  9. border: 0;
  10. background-color: #448aff21;
  11. text-decoration: none;
  12. padding: 10px;
  13. border-radius: 2px;
  14. color: #448aff !important;
  15. }
  16. </style>
  17. </head>
  18. <body style="margin-top: 20px;">
  19. <a id="download">Download</a>
  20. <button id="start">Start</button>
  21. <button id="stop">Stop</button>
  22. <script>
  23. let l = console.log
  24. navigator.permissions.query({
  25. name: 'microphone'
  26. }).then(function (result) {
  27. if (result.state == 'granted') { // 用户之前已授予对麦克风的访问权
  28. l('ok')
  29. } else if (result.state == 'prompt') { // 用户尚未授予访问权,调用 getUserMedia 时将会收到提示
  30. l('ready')
  31. } else if (result.state == 'denied') { // 系统或用户已显式屏蔽对麦克风的访问权,您将无法获得对其的访问权
  32. l('...')
  33. }
  34. result.onchange = function () {
  35. l('change..')
  36. };
  37. });
  38. const downloadLink = document.getElementById('download');
  39. const stopButton = document.getElementById('stop');
  40. const startButton = document.getElementById('start');
  41. navigator.mediaDevices.getUserMedia({
  42. audio: true,
  43. video: false
  44. })
  45. .then(stream => {
  46. stopButton.addEventListener('click', e => {
  47. mediaRecorder.stop();
  48. })
  49. startButton.addEventListener('click', e => {
  50. mediaRecorder.start();
  51. })
  52. const recordedChunks = [];
  53. const mediaRecorder = new MediaRecorder(stream);
  54. mediaRecorder.addEventListener('dataavailable', function (e) {
  55. if (e.data.size > 0) {
  56. recordedChunks.push(e.data);
  57. }
  58. });
  59. mediaRecorder.addEventListener('stop', function () {
  60. l('暂停')
  61. downloadLink.href = URL.createObjectURL(new Blob(recordedChunks));
  62. downloadLink.download = 'acetest.wav';
  63. });
  64. mediaRecorder.addEventListener('start', e => {
  65. l('开始')
  66. })
  67. });
  68. </script>
  69. </body>

镶嵌在 audio元素里面

  1. <head>
  2. <meta charset="UTF-8">
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  5. <title>Document</title>
  6. <style>
  7. a,
  8. button {
  9. border: 0;
  10. background-color: #448aff21;
  11. text-decoration: none;
  12. padding: 10px;
  13. border-radius: 2px;
  14. color: #448aff !important;
  15. }
  16. </style>
  17. </head>
  18. <body style="margin-top: 20px;">
  19. <button id="start">Start</button>
  20. <button id="stop">Stop</button>
  21. <div>
  22. <audio id="audio" controls></audio>
  23. </div>
  24. <script>
  25. let l = console.log
  26. const stopButton = document.getElementById('stop');
  27. const startButton = document.getElementById('start');
  28. navigator.mediaDevices.getUserMedia({
  29. audio: true,
  30. // video: true
  31. })
  32. .then(stream => {
  33. stopButton.addEventListener('click', e => {
  34. mediaRecorder.stop();
  35. })
  36. startButton.addEventListener('click', e => {
  37. mediaRecorder.start();
  38. })
  39. const recordedChunks = [];
  40. const mediaRecorder = new MediaRecorder(stream);
  41. mediaRecorder.addEventListener('dataavailable', function (e) {
  42. if (e.data.size > 0) {
  43. recordedChunks.push(e.data);
  44. }
  45. });
  46. mediaRecorder.addEventListener('stop', function () {
  47. l('暂停')
  48. var audio = document.getElementById('audio');
  49. audio.src = URL.createObjectURL(new Blob(recordedChunks));
  50. audio.play();
  51. });
  52. mediaRecorder.addEventListener('start', e => {
  53. l('开始')
  54. })
  55. });
  56. </script>
  57. </body>

录制视频 github地址

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7. <title>Document</title>
  8. <style>
  9. a,
  10. button {
  11. border: 0;
  12. background-color: #448aff21;
  13. text-decoration: none;
  14. padding: 10px;
  15. border-radius: 2px;
  16. color: #448aff !important;
  17. }
  18. </style>
  19. </head>
  20. <body style="margin-top: 20px;">
  21. <button id="start">Start</button> <button id="stop">Stop</button>
  22. <div>
  23. <p>live. <span class="timer"></span></p>
  24. <video
  25. width="600"
  26. id="live"
  27. style="box-sizing: border-box; border: 4px solid #f48"
  28. ></video>
  29. </div>
  30. <script>
  31. let l = console.log;
  32. let n = 0;
  33. let mediaRecorder;
  34. let timer;
  35. const stopButton = document.getElementById("stop");
  36. const startButton = document.getElementById("start");
  37. navigator.mediaDevices
  38. .getUserMedia({
  39. audio: true,
  40. video: true,
  41. })
  42. .then(stream => {
  43. let liveVideo = document.getElementById("live");
  44. // liveVideo.src = URL.createObjectURL(stream); // 你会看到一些警告
  45. liveVideo.srcObject = stream;
  46. liveVideo.play();
  47. stopButton.addEventListener("click", stopLive);
  48. startButton.addEventListener("click", e => {
  49. startLive(stream);
  50. });
  51. });
  52. // 显示录制的秒数
  53. function logger() {
  54. const timerEl = document.querySelector(".timer");
  55. timer = setInterval(() => {
  56. n += 1;
  57. timerEl.textContent = `${n}s`;
  58. }, 1000);
  59. }
  60. // 暂停后下载视频
  61. function downLoadVideo(chunks) {
  62. let downloadLink = document.createElement("a");
  63. downloadLink.href = URL.createObjectURL(
  64. new Blob(chunks, {
  65. type: "application/video",
  66. })
  67. );
  68. // downloadLink.download = 'live.webm';
  69. downloadLink.download = "live.ogg";
  70. // downloadLink.download = 'live.mp4';
  71. downloadLink.click();
  72. }
  73. // 结束录制
  74. function stopLive() {
  75. clearInterval(timer);
  76. n = 0;
  77. if (mediaRecorder) {
  78. mediaRecorder.stop();
  79. } else {
  80. alert("还没有开始。");
  81. }
  82. }
  83. function startLive(stream) {
  84. logger();
  85. let recordedChunks = [];
  86. mediaRecorder = new MediaRecorder(stream);
  87. mediaRecorder.start();
  88. mediaRecorder.addEventListener("dataavailable", function(e) {
  89. if (e.data.size > 0) recordedChunks.push(e.data);
  90. });
  91. mediaRecorder.addEventListener("stop", function() {
  92. l("暂停 自动下载");
  93. downLoadVideo(recordedChunks);
  94. });
  95. mediaRecorder.addEventListener("start", e => {
  96. l("开始 录制");
  97. });
  98. }
  99. </script>
  100. </body>
  101. </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. 端口转发工具rinetd的安装与配置

    端口映射和转发在实际应用中非常常见,比如一个局域网只有一台服务器可以被互联网访问到,那么如果想通过互联网访问局域网中其他的服务,最常用的方式就是在这一台机器上开放端口,然后转发至局域网中其他主机的端口 ...

  2. 解决Nginx的13: Permission denied) while connecting to upstream

    一.问题 做Nginx负载的时候,经常遇到这样的情况: // :: [crit] #: * connect() to failed (: Permission denied) while connec ...

  3. window7开启Administrator账户

    需求描述: 在工作遇见,安装部分软件,对目录不具有写权限.为了彻底解决问题.启用Administrator账户! 问题解决: 激活Administrator账户,并设置密码 重启系统,用Adminis ...

  4. Effective Java 第三版——51. 仔细设计方法签名

    Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...

  5. 通过MTK迁移Mysql到EDB实战指南

    1.1 迁移准备 下图是Migration toolkit(MTK)可使用的迁移功能 1 查看一下迁移源数据库testdb信息.共三张表 watermark/2/text/aHR0cDovL2Jsb2 ...

  6. php5.6-lumen与php5.6-phalcon性能对比

    场景一: 两个框架简单输出helloworld phalcon:{QPS:7349,平均响应时间:124.11ms},lumen{QPS:1327,平均响应时间:721.54ms} QPS: phal ...

  7. git命令之git clone用法

    在使用git来进行版本控制时,为了得一个项目的拷贝(copy),我们需要知道这个项目仓库的地址(Git URL). Git能在许多协议下使用,所以Git URL可能以ssh://, http(s):/ ...

  8. Qt 密码框不可选中、复制、粘贴、无右键菜单等

    在做用户登录.修改密码的时候,往往会用到密码框,其中一些功能要求与普通的输入框不同. 例如:不能选中.复制.粘贴.无右键菜单等功能,当然设置密码不可见是必须的! 一般的密码框:(默认 可以选中,复制, ...

  9. Go Revel - Logging(日志)

    revel提供了4种日志记录器: 1.`TRACE` - 调试信息 2.`INFO` - 信息 3.`WARN` - 一些无害的异常信息 4.`ERROR` - 必须要关注的错误 日志记录器可以在`a ...

  10. Spring Security 指定登陆入口

    spring security除通过form-login的熟悉指定登陆还可以通过entry-point-ref 指定登陆入口.具体配置如下: <?xml version="1.0&qu ...