在正文开始前必须吐槽下，耶稣都拦不住我，怼他！
按照码农对chrome浏览器的依赖。基本调试页面什么的都会无条件Chrome有木有，但是，作为一位非前端的新司机，确实被安排的妥妥的了，怀疑人生有木有啊！
此次在实现websocket语音交互时，会调用app手机端的麦克风和web端的麦克风。
在手机端成功将语音发送给web端后，web端能正常收听语音，然而web端给app发送语音就出现问题了，丫丫个呸，刚点击录音就报错，record内容为空，你让新司机很懵逼啊，还让不让开车了：
没有一点点防备，bug就这样出现，在我的脑海里……
咳，咱也不懂，也看不明白啊，也没有碰到过啊，只能找小度，爱心人士给出的答案也是千奇百怪：什么js代码未完成加载啦，应该将函数体放置在最后面执行，或者后端逻辑错误，返回前端数据为空取不到值的啦……各种方法各种试，代码逻辑看了N遍，确实不存在问题啊，你行你来啊亲！！！
测试后断定是在发送ajax之前就出错了，纳尼？再往上就全是直接调用pc麦克风生成wav文件了。
这代码可是原装货，你们怎么不上天？
无良代码，在线报错：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>玩具</title>
</head>
<body>
<p>请输入玩具序列号：<input type="text" id="toy_key">
<button onclick="open_toy()">开启</button>
</p>
<audio autoplay="autoplay" controls id="player"></audio>
<p>消息来自:<span id="from_user"></span></p>
<p>
<button onclick="start_reco()" style="background-color: yellow">录制语音指令</button>
<button onclick="stop_reco_audio()" style="background-color: blue">发送语音指令</button>
</p>
<script type="application/javascript" src="/static/jQuery3.1.1.js"></script>
<script type="application/javascript" src="/static/Recorder.js"></script>
<script type="application/javascript">
var ws = null;
{# var addr = "192.168.1.107";#}
var toy_id = null;
var addr="192.168.1.103";
function open_toy() {
var device_key = document.getElementById("toy_key").value;
$.post("http://" + addr + ":9527/device_login", {device_key: device_key}, function (data) {
toy_id = data.info;
console.log(data);
ws = new WebSocket("ws://" + addr + ":3721/toy/" + toy_id);
ws.onmessage = function (data) {
console.log(data.data);
var msg = JSON.parse(data.data);
if (msg.music) {
document.getElementById("player").src = "http://" + addr + ":9527/get_music/" + msg.music;
} else {
document.getElementById("player").src = "http://" + addr + ":9527/get_chat/" + msg.chat;
document.getElementById("from_user").innerText = msg.from_user;
}
}
}, "json")
}
var reco = null;
var audio_context = new AudioContext(); //获取浏览器所有媒体对象
navigator.getUserMedia = (navigator.getUserMedia || // 火狐
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia); //IE
//navigator是浏览器的所有对象
navigator.getUserMedia({audio: true}, create_stream, function (err) {
console.log(err)
});
function create_stream(user_media) {
//创建一个流的容器存储二进制语言
var stream_input = audio_context.createMediaStreamSource(user_media);
reco = new Recorder(stream_input);
}
//开始录音
function start_reco() {
reco.record(); //把语音的二进制文件保存在流中
}
//结束录音
function stop_reco_audio() {
reco.stop(); //停止存入
send_audio();
reco.clear(); //把流清空 二次利用
}
//输出
function send_audio() {
// 里面是一个回调函数，传一个wav_file一个文件流
reco.exportWAV(function (wav_file) {
var formdata = new FormData();
formdata.append("record", wav_file);
console.log(formdata);
$.ajax({
url: "http://" + addr + ":9527/toy_uploader",
type: 'post',
processData: false,
contentType: false,
data: formdata,
dataType: 'json',
success: function (data) {
console.log(data);
if (data.code == 0) {
var send_str = {
"to_user": document.getElementById("from_user").innerText,
"from_user": toy_id,
"filename": data.filename
};
var send_json = JSON.stringify(send_str);
ws.send(send_json); //发送给后端
}
}
});
})
}
</script>
</body>
</html>
类似的代码模块搞来三四个对比，一毛一样啊，小老弟，你是怎么肥事哈？
纠结了许久之后，考虑是不是换个方法来实现这功能，又不甘心啊，基本打算放弃治疗时，手贱一下，想起WIN10还自带个edge浏览器，好久没拿来玩了，盘他下试试，然后神奇的一幕出现了，它弹出框提示是否启用麦克风？
这还要问么，不是明摆着就是语音通信么？肯定启用啊，然后一个红点出现在页面选项卡上，这个是麦克风启动了？
要不在试试？点击录音，没报错，你个糟老头子坏滴很，发送，没报错，哎哟我去，去文件夹里看，居然有一个.wav文件了咯，后台也收到字典数据。mmp哦，这突如其来的数据好刺激哦，感觉人生突然到达了高潮啊，?对，你没有看错，就是这个小红点
edge不是还有个小老弟IE11么，一个也是盘，两个也是盘，?再走一个，陌生的IE风格，录音，报错，发送，报错，滴滴滴，翻车了，OMG……
大致可以确定肯定是chrome这货把麦克风搞没了，不然怎么没有麦克风图标。
找到问题原因就好办了，不怕没有bug,就怕找不到原因，?
继续问小度，其他设置都是一样默认就是调用麦克风就询问，也没见它问我啊，骗纸……
直到一个小锅锅的话：新版本Chrome调用麦克风对HTTP协议不友好，会被拒绝，https可正常访问。
加个S就能解决？我读书少，你欺负我啊，感觉会翻车，变成https后直接拒绝访问，想想也是，咱也没用https的安全证书，能访问就刺激了
还有位老司机发车：在Chrome快捷方式添加配置允许访问的网站，让它去调用麦克风，都到这个时候了，人生苦短，何妨一试！
新版Chrome中，http协议的网站因为安全原因，不能访问本地的摄像头，如果该网站不支持https协议，可以使用以下解决方案
右键点击Chrome桌面快捷方式，打开属性
在 快捷方式页-目标 中的最后输入
--unsafely-treat-insecure-origin-as-secure="http://192.168.1.103:9527/"
然后，重启浏览器，提示框总算出来了，你丫的再躲着，保证不锤死你，超凶的。
上图为前后端的数据交互截图，能发现发送者和接受者的ID都能正常显示了！
不写bug的程序员不是合格的小司机，碰到bug一时爽，一直碰到一直爽！么么哒?
564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
