Update index.html

This commit is contained in:
TimSpan 2024-08-20 15:27:06 +08:00
parent 1af684224c
commit b72d90cf3e
1 changed files with 81 additions and 78 deletions

View File

@ -68,7 +68,7 @@
<script type="text/javascript"> <script type="text/javascript">
let stream, audioContext, source, processor; let stream, audioContext, source, processor;
var PLAYURL
window.onload = function () { window.onload = function () {
self.player = new Player($("#playerBox")); self.player = new Player($("#playerBox"));
function getParams(key) { function getParams(key) {
@ -100,7 +100,7 @@
data: { ...requestBody } data: { ...requestBody }
}).then(res => { }).then(res => {
// console.log(res); // console.log(res);
var PLAYURL = res.data.data.videoUrl PLAYURL = res.data.data.videoUrl
self.player.play(PLAYURL, true, ""); self.player.play(PLAYURL, true, "");
}).catch(function (error) { }).catch(function (error) {
@ -114,6 +114,9 @@
var socket var socket
var wsUrl = '' var wsUrl = ''
document.getElementById("talk-real-server").onclick = function () { document.getElementById("talk-real-server").onclick = function () {
wsUrl = 'ws://222.245.132.168:19555/talk/pcma/stream/COWN-ZK9-Z2-C3E/QsTzeGZPrpiCxmlok44NMsdE'
self.player.talkUrl = wsUrl;
self.player.play(PLAYURL, true, "");
console.log(1111); console.log(1111);
axios({ axios({
method: 'post', method: 'post',
@ -122,100 +125,100 @@
}).then(res => { }).then(res => {
console.log('talk/channel', res); console.log('talk/channel', res);
// wsUrl = res.data.data.videoUrl // wsUrl = res.data.data.videoUrl
wsUrl = 'ws://222.245.132.168:19555/talk/pcma/stream/COWN-ZK9-Z2-C3E/QsTzeGZPrpiCxmlok44NMsdE'
// 创建 WebSocket 连接 // 创建 WebSocket 连接
socket = new WebSocket(wsUrl); // socket = new WebSocket(wsUrl);
// 监听 WebSocket 连接的打开事件 // // 监听 WebSocket 连接的打开事件
socket.onopen = function (event) { // socket.onopen = function (event) {
console.log('WebSocket 连接已打开'); // console.log('WebSocket 连接已打开');
console.log('socket_______________', socket); // console.log('socket_______________', socket);
// 获取麦克风的音频流 // // 获取麦克风的音频流
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { // if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
console.log("支持 getUserMedia"); // console.log("支持 getUserMedia");
} else { // } else {
console.error("当前浏览器不支持 getUserMedia"); // console.error("当前浏览器不支持 getUserMedia");
} // }
// 转换格式 // // 转换格式
function encodeALaw(sample) { // function encodeALaw(sample) {
const ALAW_MAX = 0xFFF; // 12-bit max value // const ALAW_MAX = 0xFFF; // 12-bit max value
const ALAW_BIAS = 0x84; // 132 // const ALAW_BIAS = 0x84; // 132
let sign = (sample & 0x8000) >> 8; // 提取符号位 // let sign = (sample & 0x8000) >> 8; // 提取符号位
if (sign !== 0) sample = -sample; // 如果是负数,取反 // if (sign !== 0) sample = -sample; // 如果是负数,取反
if (sample > ALAW_MAX) sample = ALAW_MAX; // 限制最大值 // if (sample > ALAW_MAX) sample = ALAW_MAX; // 限制最大值
// A-Law 编码公式 // // A-Law 编码公式
let magnitude; // let magnitude;
if (sample >= 256) { // if (sample >= 256) {
magnitude = (sample >> 8) & 0x7F; // magnitude = (sample >> 8) & 0x7F;
magnitude += 8; // magnitude += 8;
} else { // } else {
magnitude = (sample >> 4) & 0x0F; // magnitude = (sample >> 4) & 0x0F;
} // }
let aLawByte = sign | magnitude; // let aLawByte = sign | magnitude;
return aLawByte ^ 0xD5; // 反转特定位以匹配 A-Law 规范 // return aLawByte ^ 0xD5; // 反转特定位以匹配 A-Law 规范
} // }
// 示例代码:将 PCM 数据转换为 A-Law 数据 // // 示例代码:将 PCM 数据转换为 A-Law 数据
navigator.mediaDevices.getUserMedia({ audio: true }) // navigator.mediaDevices.getUserMedia({ audio: true })
.then(audioStream => { // .then(audioStream => {
stream = audioStream // stream = audioStream
audioContext = new AudioContext({ sampleRate: 8000 }); // audioContext = new AudioContext({ sampleRate: 8000 });
source = audioContext.createMediaStreamSource(stream); // source = audioContext.createMediaStreamSource(stream);
processor = audioContext.createScriptProcessor(4096, 1, 1); // processor = audioContext.createScriptProcessor(4096, 1, 1);
processor.onaudioprocess = function (event) { // processor.onaudioprocess = function (event) {
const audioData = event.inputBuffer.getChannelData(0); // const audioData = event.inputBuffer.getChannelData(0);
const int16Array = new Int16Array(audioData.length); // const int16Array = new Int16Array(audioData.length);
// 转换为 16 位 PCM 数据 // // 转换为 16 位 PCM 数据
for (let i = 0; i < audioData.length; i++) { // for (let i = 0; i < audioData.length; i++) {
int16Array[i] = Math.max(-1, Math.min(1, audioData[i])) * 0x7FFF; // int16Array[i] = Math.max(-1, Math.min(1, audioData[i])) * 0x7FFF;
} // }
// 将 16 位 PCM 转换为 A-Law 编码 // // 将 16 位 PCM 转换为 A-Law 编码
const aLawData = new Uint8Array(int16Array.length); // const aLawData = new Uint8Array(int16Array.length);
for (let i = 0; i < int16Array.length; i++) { // for (let i = 0; i < int16Array.length; i++) {
aLawData[i] = encodeALaw(int16Array[i]); // aLawData[i] = encodeALaw(int16Array[i]);
} // }
// 分块发送 A-Law 数据,块大小可以为 320, 480, 640 或 960 字节 // // 分块发送 A-Law 数据,块大小可以为 320, 480, 640 或 960 字节
const blockSize = 320; // const blockSize = 320;
for (let j = 0; j < aLawData.length; j += blockSize) { // for (let j = 0; j < aLawData.length; j += blockSize) {
const chunk = aLawData.slice(j, j + blockSize); // const chunk = aLawData.slice(j, j + blockSize);
socket.send(chunk.buffer); // socket.send(chunk.buffer);
console.log('发送音频数据块:', chunk); // console.log('发送音频数据块:', chunk);
} // }
}; // };
source.connect(processor); // source.connect(processor);
processor.connect(audioContext.destination); // processor.connect(audioContext.destination);
}) // })
.catch(error => { // .catch(error => {
console.error('获取音频流失败:', error); // console.error('获取音频流失败:', error);
}); // });
}; // };
// 监听 WebSocket 收到消息事件 // // 监听 WebSocket 收到消息事件
socket.onmessage = function (event) { // socket.onmessage = function (event) {
console.log('收到消息:', event.data); // console.log('收到消息:', event.data);
}; // };
// 监听 WebSocket 连接关闭事件 // // 监听 WebSocket 连接关闭事件
socket.onclose = function (event) { // socket.onclose = function (event) {
console.log('WebSocket 连接已关闭'); // console.log('WebSocket 连接已关闭');
}; // };
// 监听 WebSocket 连接出错事件 // // 监听 WebSocket 连接出错事件
socket.onerror = function (event) { // socket.onerror = function (event) {
console.error('WebSocket 错误:', event); // console.error('WebSocket 错误:', event);
}; // };
}).catch(function (error) { }).catch(function (error) {
console.log(error) console.log(error)