Я хочу создать приложение для потоковой передачи звука, используя HTML и Java EE.
Мой подход таков:
- запись микрофона
- разбивать его каждую секунду
- отправлять разбитый большой двоичный объект другим клиентам
Проблема в том, как я могу прочитать этот большой двоичный объект в элемент видео?
Я использовал 7 способы, которые вводятся в audio receive.html ## метод запуска # ws.onmessage функция обратного вызова , но у всех них есть проблема, и msg.data - это наш двоичный объект для чтения
Я просто записываю отправленный большой двоичный объект в файловую систему и пытался прочитать это проигрывателем musi c и проигрывателем musi c, выдавшим исключение сообщением Ошибка чтения метаданных
отправитель звука. html
<head>
<title>Server</title>
<meta charset="utf-8" />
<script type="text/javascript">
// general variables
var ws;
// start method load on startups
function start() {
// preparing ws
ws = new WebSocket('ws://localhost:8080/test/main');
// prepare media
navigator.getUserMedia = navigator.getUserMedia
|| navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// reading media
navigator.getUserMedia({video:false,audio:true},read,error);
}
function read(stream) {
// read from current source
/*var audio = document.querySelector('audio');
audio.srcObject = stream;// to use stream
audio.onloadedmetadata = function(e) {
audio.play();
};*/
// read from another source
const recorder = new MediaRecorder(stream,{mimeType: "audio/ogg"});
recorder.ondataavailable = e => {
ws.send(e.data);
};
recorder.start(1000);
}
function error(e) {
console.log(e);
}
</script>
</head>
<body onload="start()">
<h1>server</h1>
</body>
</html>
приемник звука. html
<head>
<title>client</title>
<meta charset="utf-8" />
<script type="text/javascript">
// general variables
var ws;
//start method
function start() {
// preparing ws
ws = new WebSocket('ws://localhost:8080/test/main');
// handle events
ws.addEventListener("open", function() {
console.log("open")
});
ws.onmessage = function(msg){
var blob = msg.data;
// ALL COMMENTED WAYS HAS A PROBLEM
// first way
/*var audio = document.querySelector("audio");
let reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function() {
var sourceElement = document.createElement("source");
sourceElement.src = reader.result;
audio.appendChild(sourceElement);
};*/
// second way
/*var audio = document.querySelector("audio");
var sourceElement = document.createElement("source");
sourceElement.src = window.URL.createObjectURL(blob);
audio.appendChild(sourceElement);*/
// third way
/*blob.text().then(txt=>{
var audio = document.querySelector("audio");
var sourceElement = document.createElement("source");
sourceElement.src = txt.replace("OggS","data:audio/ogg;base64,");
audio.appendChild(sourceElement);
});*/
// forth way
/*blob.text().then(txt=>{
var audio = document.querySelector("audio");
var sourceElement = document.createElement("source");
sourceElement.src = txt;
audio.appendChild(sourceElement);
});*/
//fiveth way
/*blob.arrayBuffer().then(arrayBuffer=>{
var bytes = new Uint8Array(arrayBuffer);
var url = "data:audio/ogg;base64;"+btoa(bytes);
// defining variables
var audio = document.querySelector("audio");
var sourceElement = document.createElement("source");
sourceElement.src = url;
audio.appendChild(sourceElement);
});*/
// sixth way
/*blob.arrayBuffer().then(arrayBuffer=>{
var bytes = new Blob(new Uint8Array(arrayBuffer), {type: 'audio/ogg'});
var url = URL.createObjectURL(bytes);
// defining variables
var audio = document.querySelector("audio");
var sourceElement = document.createElement("source");
sourceElement.src = url;
audio.appendChild(sourceElement);
});*/
// seventh way
/*blob.arrayBuffer().then(arrayBuffer=>{
var bytes = new Blob(new Uint8Array(arrayBuffer), {type: 'audio/ogg'});
// defining variables
var audio = document.querySelector("audio");
let reader = new FileReader();
reader.readAsDataURL(bytes);
reader.onload = function() {
var sourceElement = document.createElement("source");
sourceElement.src = reader.result;
audio.appendChild(sourceElement);
};
});*/
}
ws.addEventListener("close", function() {
console.log("closed");
});
}
</script>
</head>
<body onload="start()">
<h1>client</h1>
<audio autoplay="autoplay">
</audio>
</body>
</html>```