AnthyG / ThunderWave

A chat for ZeroNet
http://127.0.0.1:43110/1CWkZv7fQAKxTVjZVrLZ8VHcrN6YGGcdky/
15 stars 3 forks source link

[Priority] Audios #111

Open danimesq opened 5 years ago

AnthyG commented 5 years ago

Audio in general has been implemented with #99, but I will look into using Plyr as a player for the ThunderWave Beta.

So maybe change this to "Better Audio/Video player"?

danimesq commented 5 years ago

@AnthyG there is a dedicated button for audio, where user can press and record a message?

AnthyG commented 5 years ago

I found these: https://stackoverflow.com/questions/34820578/how-to-capture-audio-in-javascript https://stackoverflow.com/questions/30909901/how-to-record-audio-from-audio-element-using-javascript/30910347 https://stackoverflow.com/questions/16413063/html5-record-audio-to-file/22420137

And this seems to work (from here: https://jsfiddle.net/sasivarunan/bv55z5fe/):

navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
        rec = new MediaRecorder(stream);
        rec.ondataavailable = e => {
            audioChunks.push(e.data);
            if (rec.state == "inactive") {
                let blob = new Blob(audioChunks,{type:'audio/x-mpeg-3'});
                recordedAudio.src = URL.createObjectURL(blob);
                recordedAudio.controls=true;
                recordedAudio.autoplay=true;
                audioDownload.href = recordedAudio.src;
                audioDownload.download = 'mp3';
                audioDownload.innerHTML = 'download';
            }
        }
    })
    .catch(e=>console.log(e));

startRecord.onclick = e => {
    startRecord.disabled = true;
    stopRecord.disabled=false;
    audioChunks = [];
    rec.start();
}
stopRecord.onclick = e => {
    startRecord.disabled = false;
    stopRecord.disabled=true;
    rec.stop();
}

But as ZeroNet does not serve the zites with https (at least if I'm up to date), there is no way I will be able to get this working.

danimesq commented 5 years ago

Also, iFrame blocks features such as LocalStorage. Maybe ZeroFrame API can support media capture.

AnthyG commented 5 years ago

There already is a ZeroFrame-API-point for localstorage. But yeah, maybe it could also support media capture.