13 changed files with 610 additions and 49 deletions
@ -0,0 +1,377 @@ |
|||||
|
import React from 'react' |
||||
|
import PropTypes from 'prop-types' // ES6 |
||||
|
|
||||
|
export const RecordState = Object.freeze({ |
||||
|
START: 'start', |
||||
|
PAUSE: 'pause', |
||||
|
STOP: 'stop', |
||||
|
NONE: 'none' |
||||
|
}) |
||||
|
|
||||
|
export default class AudioReactRecorder extends React.Component { |
||||
|
//0 - constructor |
||||
|
constructor(props) { |
||||
|
super(props) |
||||
|
|
||||
|
this.canvasRef = { current: null } |
||||
|
} |
||||
|
|
||||
|
//TODO: add the props definitions |
||||
|
static propTypes = { |
||||
|
state: PropTypes.string, |
||||
|
type: PropTypes.string.isRequired, |
||||
|
backgroundColor: PropTypes.string, |
||||
|
foregroundColor: PropTypes.string, |
||||
|
canvasWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), |
||||
|
canvasHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), |
||||
|
|
||||
|
//method calls |
||||
|
onStop: PropTypes.func |
||||
|
} |
||||
|
static defaultProps = { |
||||
|
state: RecordState.NONE, |
||||
|
type: 'audio/mpeg', |
||||
|
backgroundColor: 'rgb(200, 200, 200)', |
||||
|
foregroundColor: 'rgb(0, 0, 0)', |
||||
|
canvasWidth: 500, |
||||
|
canvasHeight: 300 |
||||
|
} |
||||
|
|
||||
|
//2 - mount |
||||
|
componentDidMount() { |
||||
|
this.init() |
||||
|
} |
||||
|
|
||||
|
componentDidUpdate(prevProps, prevState) { |
||||
|
const { state } = this.props |
||||
|
|
||||
|
this.checkState(prevProps.state, state) |
||||
|
} |
||||
|
|
||||
|
checkState(previousState) { |
||||
|
switch (previousState) { |
||||
|
case RecordState.START: |
||||
|
this.doIfState(RecordState.PAUSE, this.pause) |
||||
|
this.doIfState(RecordState.STOP, this.stop) |
||||
|
break |
||||
|
case RecordState.PAUSE: |
||||
|
this.doIfState(RecordState.START, this.resume) |
||||
|
this.doIfState(RecordState.STOP, this.stop) |
||||
|
break |
||||
|
case RecordState.STOP: |
||||
|
this.doIfState(RecordState.START, this.start) |
||||
|
break |
||||
|
default: |
||||
|
this.doIfState(RecordState.START, this.start) |
||||
|
break |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
doIfState(state, cb) { |
||||
|
if (this.props.state == state) { |
||||
|
cb && cb() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
//TODO: destroy request animation frame |
||||
|
componentWillUnmount() { } |
||||
|
|
||||
|
//TODO: change to state some conditionals |
||||
|
init = async () => { |
||||
|
this.leftchannel = [] |
||||
|
this.rightchannel = [] |
||||
|
this.recorder = null |
||||
|
this.recording = false |
||||
|
this.recordingLength = 0 |
||||
|
this.volume = null |
||||
|
this.audioInput = null |
||||
|
this.sampleRate = null |
||||
|
this.AudioContext = window.AudioContext || window.webkitAudioContext |
||||
|
this.context = null |
||||
|
this.analyser = null |
||||
|
this.canvas = this.canvasRef.current |
||||
|
this.canvasCtx = this.canvas.getContext('2d') |
||||
|
this.stream = null |
||||
|
this.tested = false |
||||
|
|
||||
|
navigator.getUserMedia = |
||||
|
navigator.getUserMedia || |
||||
|
navigator.webkitGetUserMedia || |
||||
|
navigator.mozGetUserMedia |
||||
|
} |
||||
|
|
||||
|
//get mic stream |
||||
|
getStream = (constraints) => { |
||||
|
if (!constraints) { |
||||
|
constraints = { audio: true, video: false } |
||||
|
} |
||||
|
|
||||
|
return navigator.mediaDevices.getUserMedia(constraints) |
||||
|
} |
||||
|
|
||||
|
setUpRecording = () => { |
||||
|
this.context = new this.AudioContext() |
||||
|
this.sampleRate = this.context.sampleRate |
||||
|
|
||||
|
// creates a gain node |
||||
|
this.volume = this.context.createGain() |
||||
|
|
||||
|
// creates an audio node from teh microphone incoming stream |
||||
|
this.audioInput = this.context.createMediaStreamSource(this.stream) |
||||
|
|
||||
|
// Create analyser |
||||
|
this.analyser = this.context.createAnalyser() |
||||
|
|
||||
|
// connect audio input to the analyser |
||||
|
this.audioInput.connect(this.analyser) |
||||
|
|
||||
|
// connect analyser to the volume control |
||||
|
// analyser.connect(volume); |
||||
|
|
||||
|
let bufferSize = 2048 |
||||
|
this.recorder = this.context.createScriptProcessor(bufferSize, 2, 2) |
||||
|
|
||||
|
// we connect the volume control to the processor |
||||
|
// volume.connect(recorder); |
||||
|
|
||||
|
this.analyser.connect(this.recorder) |
||||
|
|
||||
|
// finally connect the processor to the output |
||||
|
this.recorder.connect(this.context.destination) |
||||
|
|
||||
|
const self = this |
||||
|
this.recorder.onaudioprocess = function (e) { |
||||
|
// Check |
||||
|
if (!self.recording) return |
||||
|
// Do something with the data, i.e Convert this to WAV |
||||
|
let left = e.inputBuffer.getChannelData(0) |
||||
|
let right = e.inputBuffer.getChannelData(1) |
||||
|
if (!self.tested) { |
||||
|
self.tested = true |
||||
|
// if this reduces to 0 we are not getting any sound |
||||
|
if (!left.reduce((a, b) => a + b)) { |
||||
|
console.log('Error: There seems to be an issue with your Mic') |
||||
|
// clean up; |
||||
|
self.stop() |
||||
|
self.stream.getTracks().forEach(function (track) { |
||||
|
track.stop() |
||||
|
}) |
||||
|
self.context.close() |
||||
|
} |
||||
|
} |
||||
|
// we clone the samples |
||||
|
self.leftchannel.push(new Float32Array(left)) |
||||
|
self.rightchannel.push(new Float32Array(right)) |
||||
|
self.recordingLength += bufferSize |
||||
|
} |
||||
|
this.visualize() |
||||
|
} |
||||
|
|
||||
|
mergeBuffers = (channelBuffer, recordingLength) => { |
||||
|
let result = new Float32Array(recordingLength) |
||||
|
let offset = 0 |
||||
|
let lng = channelBuffer.length |
||||
|
for (let i = 0; i < lng; i++) { |
||||
|
let buffer = channelBuffer[i] |
||||
|
result.set(buffer, offset) |
||||
|
offset += buffer.length |
||||
|
} |
||||
|
return result |
||||
|
} |
||||
|
|
||||
|
interleave = (leftChannel, rightChannel) => { |
||||
|
let length = leftChannel.length + rightChannel.length |
||||
|
let result = new Float32Array(length) |
||||
|
|
||||
|
let inputIndex = 0 |
||||
|
|
||||
|
for (let index = 0; index < length;) { |
||||
|
result[index++] = leftChannel[inputIndex] |
||||
|
result[index++] = rightChannel[inputIndex] |
||||
|
inputIndex++ |
||||
|
} |
||||
|
return result |
||||
|
} |
||||
|
|
||||
|
writeUTFBytes = (view, offset, string) => { |
||||
|
let lng = string.length |
||||
|
for (let i = 0; i < lng; i++) { |
||||
|
view.setUint8(offset + i, string.charCodeAt(i)) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
visualize = () => { |
||||
|
const { backgroundColor, foregroundColor } = this.props |
||||
|
|
||||
|
this.WIDTH = this.canvas.width |
||||
|
this.HEIGHT = this.canvas.height |
||||
|
this.CENTERX = this.canvas.width / 2 |
||||
|
this.CENTERY = this.canvas.height / 2 |
||||
|
|
||||
|
if (!this.analyser) return |
||||
|
|
||||
|
this.analyser.fftSize = 2048 |
||||
|
const bufferLength = this.analyser.fftSize |
||||
|
const dataArray = new Uint8Array(bufferLength) |
||||
|
|
||||
|
this.canvasCtx.clearRect(0, 0, this.WIDTH, this.HEIGHT) |
||||
|
|
||||
|
//reference this using self |
||||
|
let self = this |
||||
|
const draw = function () { |
||||
|
self.drawVisual = requestAnimationFrame(draw) |
||||
|
|
||||
|
self.analyser.getByteTimeDomainData(dataArray) |
||||
|
|
||||
|
self.canvasCtx.fillStyle = backgroundColor |
||||
|
self.canvasCtx.fillRect(0, 0, self.WIDTH, self.HEIGHT) |
||||
|
|
||||
|
self.canvasCtx.lineWidth = 2 |
||||
|
self.canvasCtx.strokeStyle = foregroundColor |
||||
|
|
||||
|
self.canvasCtx.beginPath() |
||||
|
|
||||
|
var sliceWidth = (self.WIDTH * 1.0) / bufferLength |
||||
|
var x = 0 |
||||
|
|
||||
|
for (var i = 0; i < bufferLength; i++) { |
||||
|
var v = dataArray[i] / 128.0 |
||||
|
var y = (v * self.HEIGHT) / 2 |
||||
|
|
||||
|
if (i === 0) { |
||||
|
self.canvasCtx.moveTo(x, y) |
||||
|
} else { |
||||
|
self.canvasCtx.lineTo(x, y) |
||||
|
} |
||||
|
|
||||
|
x += sliceWidth |
||||
|
} |
||||
|
|
||||
|
self.canvasCtx.lineTo(self.canvas.width, self.canvas.height / 2) |
||||
|
self.canvasCtx.stroke() |
||||
|
} |
||||
|
|
||||
|
draw() |
||||
|
} |
||||
|
|
||||
|
setupMic = async () => { |
||||
|
//TODO: only get stream after clicking start |
||||
|
try { |
||||
|
window.stream = this.stream = await this.getStream() |
||||
|
//TODO: on got stream |
||||
|
} catch (err) { |
||||
|
//TODO: error getting stream |
||||
|
console.log('Error: Issue getting mic', err) |
||||
|
} |
||||
|
|
||||
|
this.setUpRecording() |
||||
|
} |
||||
|
|
||||
|
start = async () => { |
||||
|
await this.setupMic() |
||||
|
|
||||
|
this.recording = true |
||||
|
// reset the buffers for the new recording |
||||
|
this.leftchannel.length = this.rightchannel.length = 0 |
||||
|
this.recordingLength = 0 |
||||
|
} |
||||
|
|
||||
|
stop = () => { |
||||
|
const { onStop, type } = this.props |
||||
|
|
||||
|
this.recording = false |
||||
|
this.closeMic() |
||||
|
|
||||
|
// we flat the left and right channels down |
||||
|
this.leftBuffer = this.mergeBuffers(this.leftchannel, this.recordingLength) |
||||
|
this.rightBuffer = this.mergeBuffers( |
||||
|
this.rightchannel, |
||||
|
this.recordingLength |
||||
|
) |
||||
|
// we interleave both channels together |
||||
|
let interleaved = this.interleave(this.leftBuffer, this.rightBuffer) |
||||
|
|
||||
|
///////////// WAV Encode ///////////////// |
||||
|
// from http://typedarray.org/from-microphone-to-wav-with-getusermedia-and-web-audio/ |
||||
|
// |
||||
|
|
||||
|
// we create our wav file |
||||
|
let buffer = new ArrayBuffer(44 + interleaved.length * 2) |
||||
|
let view = new DataView(buffer) |
||||
|
|
||||
|
// RIFF chunk descriptor |
||||
|
this.writeUTFBytes(view, 0, 'RIFF') |
||||
|
view.setUint32(4, 44 + interleaved.length * 2, true) |
||||
|
this.writeUTFBytes(view, 8, 'WAVE') |
||||
|
// FMT sub-chunk |
||||
|
this.writeUTFBytes(view, 12, 'fmt ') |
||||
|
view.setUint32(16, 16, true) |
||||
|
view.setUint16(20, 1, true) |
||||
|
// stereo (2 channels) |
||||
|
view.setUint16(22, 2, true) |
||||
|
view.setUint32(24, this.sampleRate, true) |
||||
|
view.setUint32(28, this.sampleRate * 4, true) |
||||
|
view.setUint16(32, 4, true) |
||||
|
view.setUint16(34, 16, true) |
||||
|
// data sub-chunk |
||||
|
this.writeUTFBytes(view, 36, 'data') |
||||
|
view.setUint32(40, interleaved.length * 2, true) |
||||
|
|
||||
|
// write the PCM samples |
||||
|
let lng = interleaved.length |
||||
|
let index = 44 |
||||
|
let volume = 1 |
||||
|
for (let i = 0; i < lng; i++) { |
||||
|
view.setInt16(index, interleaved[i] * (0x7fff * volume), true) |
||||
|
index += 2 |
||||
|
} |
||||
|
|
||||
|
// our final binary blob |
||||
|
const blob = new Blob([view], { type: type }) |
||||
|
const audioUrl = URL.createObjectURL(blob) |
||||
|
|
||||
|
onStop && |
||||
|
onStop({ |
||||
|
blob: blob, |
||||
|
url: audioUrl, |
||||
|
type |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
pause = () => { |
||||
|
this.recording = false |
||||
|
this.closeMic() |
||||
|
} |
||||
|
|
||||
|
resume = () => { |
||||
|
this.setupMic() |
||||
|
this.recording = true |
||||
|
} |
||||
|
|
||||
|
closeMic = () => { |
||||
|
this.stream.getAudioTracks().forEach((track) => { |
||||
|
track.stop() |
||||
|
}) |
||||
|
this.audioInput.disconnect(0) |
||||
|
this.analyser.disconnect(0) |
||||
|
this.recorder.disconnect(0) |
||||
|
} |
||||
|
|
||||
|
//1 - render |
||||
|
render() { |
||||
|
const { canvasWidth, canvasHeight } = this.props |
||||
|
|
||||
|
return ( |
||||
|
<div className='audio-react-recorder'> |
||||
|
<canvas |
||||
|
ref={(instance) => { |
||||
|
this.canvasRef.current = instance |
||||
|
}} |
||||
|
width={0} |
||||
|
height={0} |
||||
|
className='audio-react-recorder__canvas' |
||||
|
></canvas> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,61 @@ |
|||||
|
'use strict'; |
||||
|
import superagent from "superagent" |
||||
|
import moment from "moment"; |
||||
|
import { YingshiRequest } from './' |
||||
|
|
||||
|
export const uploadVoice2Yingshi = async ({ voiceFile, accessToken, voiceName, }) => { |
||||
|
const fData = new FormData(); |
||||
|
fData.append('voiceFile', voiceFile); |
||||
|
fData.append("accessToken", accessToken) |
||||
|
fData.append("voiceName", voiceName || moment().format("YYYYMMDDHHmmssSSS")) |
||||
|
fData.append("force", true) |
||||
|
console.log(fData); |
||||
|
|
||||
|
// TODO 代理转发为什么不行捏
|
||||
|
// const upRslt = await YingshiRequest.post('api/lapp/voice/upload', fData)
|
||||
|
|
||||
|
const upRslt = await |
||||
|
new Promise((resolve, reject) => { |
||||
|
superagent |
||||
|
//.post('/_yingshi/api/lapp/voice/upload')
|
||||
|
.post('https://open.ys7.com/api/lapp/voice/upload') |
||||
|
.send(fData) |
||||
|
.end(function (err, res) { |
||||
|
if (err) { |
||||
|
reject(err) |
||||
|
} else { |
||||
|
resolve(res.body) |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
if (upRslt.code == 200) { |
||||
|
return upRslt.data |
||||
|
} else { |
||||
|
throw upRslt |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export const sendVoice2YingshiCamera = async ({ accessToken, deviceSerial, channelNo = 1, fileUrl }) => { |
||||
|
const sendRslt = await |
||||
|
new Promise((resolve, reject) => { |
||||
|
superagent |
||||
|
.post('https://open.ys7.com/api/lapp/voice/send') |
||||
|
.send({ |
||||
|
accessToken, deviceSerial, channelNo, fileUrl |
||||
|
}) |
||||
|
.set('Content-Type', 'application/x-www-form-urlencoded') |
||||
|
.end(function (err, res) { |
||||
|
if (err) { |
||||
|
reject(err) |
||||
|
} else { |
||||
|
resolve(res.body) |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
console.log(sendRslt); |
||||
|
if (sendRslt.code === 200) { |
||||
|
return sendRslt.data |
||||
|
} else { |
||||
|
throw sendRslt |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue