概要
iPhoneのSafariに対応したレコーダーを作成する方法を紹介します。
動作環境
- iOS11.4
前提条件
- マイク、カメラにアクセスするためにはhttpsのサイトであることが必須条件
- iPhoneでのブラウザはSafariのみ対応
ポイント
- getUserMediaを呼び出す前にAudioContextを作成する。
実装
上記のポイントを踏まえて実装したものは以下のようになります
startRecord
function startRecording(evt_stream) {
// 取得されている音声ストリームの録音を開始
localMediaStream = evt_stream;
if (!navigator || !navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
alert('Missing support for navigator.mediaDevices.getUserMedia') // temp: helps when testing for strange issues on ios/safari
return
}
audioContext = new (window.AudioContext || window.webkitAudioContext)();
// サンプルレートを保持しておく
audioSampleRate = audioContext.sampleRate;
let scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);
localScriptProcessor = scriptProcessor;
if (audioContext.createMediaStreamDestination) {
destinationNode = audioContext.createMediaStreamDestination()
}
else {
destinationNode = audioContext.destination
}
// safariで Web Audio APIを動かすため、先にaudioContextを生成してから、UserMediaを生成する
return navigator.mediaDevices.getUserMedia({audio: true})
.then((stream) => {
this._startRecordingWithStream(stream, destinationNode, scriptProcessor)
})
.catch((error) => {
alert('Error with getUserMedia: ' + error.message) // temp: helps when testing for strange issues on ios/safari
console.log(error)
})
}
_startRecordingWithStream
function _startRecordingWithStream(stream, destinationNode, scriptProcessor) {
// ループ処理のセット
let mediastreamsource = audioContext.createMediaStreamSource(stream);
mediastreamsource.connect(scriptProcessor);
scriptProcessor.onaudioprocess = onAudioProcess;
console.log('レコードスタート: scriptProcessor.connect(audioContext.destination)');
scriptProcessor.connect(destinationNode);
}
また、実装に伴ったソースコード並びにサンプルも用意しました。