你懂的，现在拍视频和传上去真的超轻松！但你在家整了个小页面想给大家炫技，却被没有域名证书这个拦路虎挡住了去路。这时，有人可能会使出小聪明，修改别人电脑上的hosts文件来绕过这个难题。
修改Hosts文件的小技巧
首先，我们来聊聊怎么修改hosts文件。假设你的测试服务器IP地址是192.168.2.18，那么其他机器要这么做：
#localhost 127.0.0.1 localhost 192.168.2.18
“`
192.168.2.18yourdomain.test
直接用Chrome上你的yourdomain.test网站，就可以轻松利用你们家的API功能！这招简洁易懂还特别好用哦～
你要记住，这招不是万能的。尤其如果你想在手机上看，会发现localhost在这儿是乱码。无论你怎么改hosts文件，手机都不理你，连解析都懒得干。那怎么办？就得换个方法了呗。
navigator.mediaDevices.enumerateDevices().then(function (data) { data.forEach(function (item) { if(item.kind=="audioinput"){ //麦克风 document.getElementById("audioDevice").innerHTML += "" + item.label + " " }else if(item.kind=="videoinput"){ //摄像头 document.getElementById("videoDevice").innerHTML += "" + item.label + " " } }) },function (error) { console.log(error); })
移动端测试的挑战
手机上搞网站测试真的麻烦死了，关键是手机怎么理解’本地主机’，想修改hosts文件也搞不定。那时候，要么乖乖去申请个证书，要么你就别指望手机能找到你的网站。
虽然考证有点儿费劲，但千万别忘了，它是你手机看视频必备的神器！烦就烦点，毕竟是保质保量。
开启摄像头前的准备工作
var getUserMedia = navigator.webkitGetUserMedia; //Chrome浏览器的方法
getUserMedia.call(navigator, {
video:true, // 开启音频
audio:true // 开启视频
}, function(stream){ console.log(stream); // 成功获取媒体流
}, function(error){ //处理媒体流创建失败错误
});
首先，记得开摄像头！不过别忙着开始，咱们还得搞定点事儿。首要任务就是确定设备上有没好用的麦克风和摄像头，这个少了可是完不成任务滴哟。你可以试着在代码里找找看能不能用呗。
看，当你的浏览器右边输入框变成相机图标，那就是在用getUserMedia！接着，在浏览器工具栏找设备或者直接编程指定要用的摄像头跟麦克风哈。
设备枚举与选择
搞定设备设置，最重要就是先查证有没有用对设备！想看看设备列表不？那就试试EnumerateDevices()这个函数！选好了要用的设备以后，别忘了用上deviceId定位哟。不过可得注意了，如果deviceId弄错了可是会出问题滴，可能会遇到DevicesNotFoundError这个异常哦～
var getUserMedia = navigator.webkitGetUserMedia ;
getUserMedia.call(navigator, {
"audio":{
"mandatory":{
"sourceId":"" // 指定设备的 deviceId
}
},
"video":{
"optional":[
{"minWidth":400},
{"maxWidth":400}, // 数字类型，固定宽度
{"minHeight":220}，
{"maxHeight":220}, // 数字类型，固定高度
{"frameRate":"12"} // 帧率
],"mandatory":{
"sourceId":"" // 指定设备的 deviceId
}
}
}, function(stream){
//绑定本地媒体流到video标签用于输出
document.getElementById("video").src = URL.createObjectURL(stream);
}, function(error){
//处理媒体流创建失败错误
});
除此之外，设备设置好了之后，浏览器里面那个设备选择的地方就自动变灰不让你瞎动了。要换设备？那就只能通过编程来搞定
视频参数的设置
看好视频得调下网上那视频的大小和速度，这个挺重要的，直接影响到视频最后效果如何。比如，你设个宽度30，高度100，那视频就会从正中间弄个30×100的画面，不会让原来的图变小或变形。
这个过程可能会让你迷惑，试了半天总找不到最适合的。别担心耐心点儿慢慢找呗，肯定能找到最合适的那款！
getUserMedia()函数的复杂性
用摄像头录像这事儿真是头疼！特备是那些参数设置，有些时候搞得我都崩溃了。比如Chrome浏览器好像最喜欢用webm视频格式~这时候，你可以试试输入”video/webm”这个命令，说不定就能成功识别出这种格式来。如果真的成功了，那录制好的视频就能按照这个特殊的格式保存。
不用操心，浏览器会自动帮咱挑格式。虽然有时候有点懵逼，但是看看说明书，问题就能迎刃而解！
视频录制与保存
搞定所有设定之后就可以开始录像了！要用MediaRecorder录制视频，得借助getUserMedia()获取媒体流~还有要注意绑定好ondataavailable事件，才能够拿到视频片段的Dat并存储在内存中。
启动start后,每过段时间都会自动触发ondataavailable事件。当你觉得录音够用时,就可以将所有音频合成为一个blob对象,最后再在浏览器上一键下载保存为视频文件。虽然有点小复杂,但只要你有耐心,肯定没问题!
总结：
看这儿！我们今天说的是怎么在家用WiFi环境下玩转视频测试网站，还讲了遇到各种问题怎么办。比如说怎么改hosts文件，手机测会不会费劲，远程控制手机摄像头要注意啥，选哪个设备最合适，视频参数怎么调整，getUserMedia()怎么用，还有视频拍完后怎么保存等等。
希望这篇分享对你有帮助，学会用这些招数提亮你的视频测试页效果！再来问问大伙儿，有啥困扰？咋应对的嘞？咱们评论区聊聊互相学习！别忘了给我点赞让更多小伙伴受益！
If this paramater is not specified, the UA will use a platform-specific default format.
评论0