JS 调用麦克风检测实时音量

代码较多看第二份调用代码里面有注释

关键步骤
1、将成功调用麦克风后的 媒体轨道保存 （第二份代码）
2、 关闭的时候便利轨道数组 逐个关闭 （第三份代码）

封装部分直接调用

封装代码、

/**  Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.**  Use of this source code is governed by a BSD-style license*  that can be found in the LICENSE file in the root of the source*  tree.*/
export default class SoundMeter {instant: number;script: any;clip: number;slow: number;context: any;mic: any;constructor(context: any) {this.context = context;this.instant = 0.0;this.slow = 0.0;this.clip = 0.0;this.script = context.createScriptProcessor(2048, 1, 1);var that = this;this.script.onaudioprocess = function (event: { inputBuffer: { getChannelData: (arg0: number) => any; }; }) {var input = event.inputBuffer.getChannelData(0);var i;var sum = 0.0;var clipcount = 0;for (i = 0; i < input.length; ++i) {sum += input[i] * input[i];if (Math.abs(input[i]) > 0.99) {clipcount += 1;}}that.instant = Math.sqrt(sum / input.length);that.slow = 0.95 * that.slow + 0.05 * that.instant;that.clip = clipcount / input.length;};}connectToSource = (stream: any, callback: (arg0: null) => void) => {console.log('SoundMeter connecting');try {this.mic = this.context.createMediaStreamSource(stream);this.mic.connect(this.script);// necessary to make sample run, but should not be.this.script.connect(this.context.destination);if (typeof callback !== 'undefined') {callback(null);}} catch (e) {console.error(e);if (typeof callback !== 'undefined') {callback(e);}}}stop = () => {this.mic.disconnect();this.script.disconnect();}
}

调用

  useEffect(() => {const mic = () => {let constraints = {audio: true,video: false,};//调用开启麦克风navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);};const handleSuccess = (stream: any) => {window.MSStream = stream;//成功调用麦克风后 媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道// 将此轨道保存  后面关闭的时候回用到setSource(window.MSStream);soundMeter.connectToSource(stream, function (e: any) {if (e) {console.log(e);return;}//组件卸载需要清除定时器 使用useRef()intervalRef.current = setInterval(function () {//    设置展示数据 就是取得 音量setVoice(Number(soundMeter.instant.toFixed(2)) * 100);}, 200);});};const handleError = (error: any) => {console.log('navigator.getUserMedia error: ', error);};if (micResult.support === 'success') {mic();} else {//判断音频流是存在soundMeter.mic && soundMeter.stop();clearInterval(intervalRef.current);}return () => {clearInterval(intervalRef.current);};//根据是成果否调用到麦克风硬件 触发是否监听 麦克风音量}, [micResult, soundMeter]);

关闭监听

调用完后直接切换组件，监听音量会一直存在浏览器上方会展示话筒
所以需要关闭浏览器

 const init = useCallback(() => {if(! window.MSStream) return // 首次进入卸载 会导致下面报错 所以需要return// 获取到上面的 媒体轨道信息数组 遍历关闭source && source.getTracks().forEach(function (track: { stop: () => void }) {track.stop();});}, [source]);

JS 调用麦克风检测实时音量相关推荐

前端调用麦克风获取实时音频流和录音并上传至后台
前端调用麦克风获取实时音频流和录音并上传至后台 index.html <!DOCTYPE html> < a href=" ">Default.html&l ...
JS调用摄像头、实时视频流上传（一次不成功的试验）
JS调用摄像头.实时视频流上传(一次不成功的试验) 思路前端调用摄像头,获取视频流,从视频流中取一帧转图片,用websocket上传图片. 研究了一下发现了WebRTC这种技术,看到有博客说一些直播 ...
CV：基于keras利用cv2自带两步检测法对《跑男第六季第五期》之如花片段(或调用摄像头)进行实时性别脸部表情检测
CV:基于keras利用cv2自带两步检测法对<跑男第六季第五期>之如花片段(或调用摄像头)进行实时性别&脸部表情检测目录输出结果设计思路核心代码输出结果设计思路核心 ...
js调用pc摄像头实现拍照、录视频等，新版Chrome无访问http页面无法打开麦克风、摄像头
js调用pc摄像头实现拍照.录视频等,新版Chrome无访问http页面无法打开麦克风.摄像头新版Chrome配置 vue环境下的前端 function部分 ##由于没有https环境,只有http ...
基于php汇率接口调用实例,js调用API实时汇率计算器代码
[实例简介]js调用API实时汇率计算器代码,支持 AED,ARS,AUD,BGN,BRL,BSD,CAD,CHF,CLP,CNY,COP,CZK,DKK,DOP,EGP,EUR,FJD,GBP,GT ...
Java 接受reactjs数据_[Java教程]react.js 父子组件数据绑定实时通讯
[Java教程]react.js 父子组件数据绑定实时通讯 0 2017-09-23 17:00:14 import React,{Component} from 'react'import Reac ...
js／css 检测移动设备方向的变化判断横竖屏幕
js/css 检测移动设备方向的变化判断横竖屏幕方法一:用触发手机的横屏和竖屏之间的切换的事件 window.addEventListener("orientationchange&qu ...
Android、iOS平台RTMP/RTSP播放器实现实时音量调节
介绍移动端RTMP.RTSP播放器实时音量调节之前,我们之前也写过,为什么windows播放端加这样的接口,windows端播放器在多窗口大屏显示的场景下尤其需要,尽管我们老早就有了实时静音接口,相对 ...
Windows平台RTMP/RTSP播放器如何实现实时音量调节
为什么要做实时音量调节 RTMP或RTSP直播播放音量调节,主要用于多实例(多窗口)播放场景下,比如同时播放4路RTMP或RTSP流,如果音频全部打开,几路audio同时打开,可能会影响用户体验,我们 ...

JS 调用麦克风检测实时音量

代码较多看第二份调用代码里面有注释

封装代码、

调用

关闭监听

JS 调用麦克风检测实时音量相关推荐

最新文章

热门文章

JS 调用 麦克风 检测实时音量

代码较多 看第二份调用代码 里面有注释

封装代码 、

调用

关闭监听

JS 调用 麦克风 检测实时音量相关推荐

最新文章

热门文章

JS 调用麦克风检测实时音量

代码较多看第二份调用代码里面有注释

封装代码、

JS 调用麦克风检测实时音量相关推荐