如果你做了一個視頻測試的頁面，想嘚瑟給局域網的其他人，但是又沒有域名證書怎么辦？
這時候只能通過修改其他人的hosts文件了
比如你的測試服務器IP地址是192.168.2.18，那么其他人的hosts文件修改如下：
#localhost 127.0.0.1localhost 192.168.2.18當使用別人的瀏覽器訪問 [...時瀏覽器不支持flash什么意思，就會順利的執行這些API了。
但是移動端的瀏覽器并不認，就算你修改了hosts ，移動端的瀏覽器根本不理你，解析都不解析。所以想在手機上測試，只能老老實實申請個證書了。
2.設備枚舉
在開啟攝像頭之前，先要把可以使用的麥克風和攝像頭 ( 輸入設備 ) 列出來，如果沒有這兩樣設備也就無法繼續。
代碼如下:
html5" style="box-sizing: border-box; font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; color: inherit; border-radius: 0px; white-space: inherit; overflow-wrap: normal; background: none;"><label for="audioDevice"> 錄音設備: label><select id="audioDevice">
?select><br><label for="videoDevice"> 錄影設備: label><select id="videoDevice">
?select><script>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);
})script>效果如下圖，和瀏覽器自己獲取的一模一樣。
注意：上圖的實例中，瀏覽器地址欄最右邊的攝像頭標識是需要使用()函數時才會出現。
<script>
? ?var getUserMedia = navigator.webkitGetUserMedia; //Chrome瀏覽器的方法
? ?getUserMedia.call(navigator, {
? ? ?video:true, // 開啟音頻
? ? ?audio:true ?// 開啟視頻
? ?}, function(stream){ ? ? ? ?console.log(stream); // 成功獲取媒體流
? ?}, function(error){ ? ? ? ?//處理媒體流創建失敗錯誤
? ?});script>這時候可以通過瀏覽器給出的菜單下拉選擇設備。
3.設置參數，預覽
我們可以通過代碼來指定使用哪個攝像頭和麥克風設備。也可以通過代碼設置視頻的寬、高和幀率。
代碼如下：
<video id="video" autoplay>video> <script>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){ ? ?//處理媒體流創建失敗錯誤});script>輸出的視頻流通過blob對象鏈接綁定到video標簽輸出。
這個就是從上文設備枚舉()獲取到的。
兩種設備，如果有一個填寫不正確，就會報出一個的錯誤。而且一旦指定了設備后，瀏覽器自己的設備選擇就會變成灰色不可選。
視頻的寬高瀏覽器不支持flash什么意思，并不會因為填寫的數值比例不合法而失真。比如你設定了寬度30，高度100，那么他會從視頻中心截取 的畫面，而不是把原畫面擠壓到這個的尺寸。
效果如下：
如果您的預覽一片漆黑，或者只有一個小黑點，那么說明您的攝像頭正在被占用...
吐槽：這個()函數的參數，w3的官方文檔鏈接如下：
可是并沒有遵循它，而且差距還挺大...
視頻保存
1. 格式支持
瀏覽器是大力推廣webm的視頻格式的。可以用.("video/webm")來測試是否支持這種類型的編碼。如果返回true，那么我們錄制的視頻就可以被保存為這種指定的格式。如果不指定，那么將會使用瀏覽器自動指定的文件格式。文檔原話如下
If this is not , the UA will use a - .
但是這個默認值卻無法直接獲取，全靠猜...
2. 視頻錄制
我們使用來錄制視頻，參數是通過()獲取的媒體流。
代碼如下：
<script>var getUserMedia = navigator.webkitGetUserMedia ;var g_stream = null, g_recorder = null;function startPreview(){
?getUserMedia.call(navigator, {
? ?video:true,
? ?audio:true
?}, function(stream){
? ? ?g_stream = stream;
?}, function(error){
?
?});
}function stopRecording(){
?g_recorder.stop();
}function startRecording(){ ?var chunks = [];
?g_recorder = new MediaRecorder(g_stream,{mimeType:"video/webm"});
?g_recorder.ondataavailable = function(e) {
? ?chunks.push(e.data);
?}
?g_recorder.onstop = function(e) { ? ?var blob = new Blob(chunks, { 'type' : 'video/webm' }); ? ?var audioURL = URL.createObjectURL(blob); ? ?window.open(audioURL);
?}
?g_recorder.start();
}script>注意：本例并沒有填寫視頻文件頭，所以保存出來的視頻文件沒有時間軌，無法快進和跳躍。可以用格式工廠轉
“莫基了”上面有錄制音頻的例子傳送門
這篇文章的DEMO請戳這里
原文鏈接
原作者
力譜宿云