本來要整理 html 的資料，卻覺得這類型的資料太多也太容易取得，決定改變一下方向，只整理 html 相關比較進階實用的小技巧。
無意間看到一個令人懷念的東西，getUserMedia()，可以在網頁上使用 Webcam ，好幾年前遇到一個專案，需要利用相機功能實做一個類似 AR 的畫面，而那個專案用的是 cordova ，於是查了查資料，就用 getUserMedia 來取得相機畫面當背景，在前面放個箭頭指向目的地的方向，當實作完成後卻發現 Android 4.x 不支援，還好加上 webkit plugin 後就可以了，然而最麻煩的是 IOS 不支援...... 最後只好用 camera preview plugin 來重寫，而後續的又是另一個故事了。
那麼首先先來一個範例
<button style="height:4ch;" id="b071801_idfront">前鏡頭</button>
<button style="height:4ch;" id="b071801_idback">後鏡頭</button>
<button style="height:4ch;" id="b071801_idstop">stop</button>
<button style="height:4ch" id="b071801_idgetpic">抓圖</button>
<br>
<div id="b071801_ida">
亮度<input id="b071801_idb" type="range" min="0" max="200" value="100"><br>
對比<input id="b071801_idc" type="range" min="0" max="200" value="100"><br>
飽和<input id="b071801_ids" type="range" min="0" max="400" value="100"><br>
</div>
<video controls="" id="b071801_video" playsinline="" autoplay="" muted="" loop="">Video stream not available.</video>
<br>
<img id="b071801_idimg" src="">
<script>
$(()=>
{
let b071801_video=$("#b071801_video")[0];
function stopcam()
{
try
{
b071801_video.srcObject.getTracks()[0].stop();
}
catch(err){}
}
function docam(mode)
{
let fmode;
stopcam();
if (!mode)
{
fmode="user";//前鏡頭
}
else
{
fmode="environment";//後鏡頭
// fmode={ exact: "environment" };//後鏡頭
}
navigator.mediaDevices.getUserMedia
(
{
audio: false,
video:
{
width: { min: 320, ideal: 320, max: 1920 },
height: { min: 240, ideal: 240, max: 1080 },
facingMode: fmode
}
}
).then(function(stream) {
b071801_video.srcObject = stream;
b071801_video.play();
}).catch(function(err) {
console.log("An error occurred: " + err);
});
}
$("#b071801_idfront").on("click",function()
{
docam(0);
})
$("#b071801_idback").on("click",function()
{
docam(1);
})
$("#b071801_idstop").on("click",function()
{
stopcam();
})
$("#b071801_idgetpic").on("click",function()
{
let ca=$("<canvas></canvas>")[0];
let ct = ca.getContext('2d');
let w=b071801_video.videoWidth;
let h=b071801_video.videoHeight;
ca.width = w;
ca.height = h;
ct.drawImage(b071801_video, 0, 0, w, h);
let data = ca.toDataURL('image/jpeg');
$("#b071801_idimg").attr("src",data);
})
$("#b071801_ida input").on("input",function()
{
let f="brightness("+$("#b071801_idb").val()+"%) "
+"contrast("+$("#b071801_idc").val()+"%) "
+"saturate("+$("#b071801_ids").val()+"%) ";
$("#b071801_video").css("filter",f);
$("#b071801_idimg").css("filter",f);
})
})
</script>
亮度
對比
飽和
對比
飽和
程式盡量簡化了，可以設定使用前鏡頭還是後鏡頭，也可以抓圖，而且支援 CSS 的 filter ，利用 CSS 來調整亮度對比飽和。
在 iphone 上，使用 chrome 或 firefox 都沒有問題，而 safari 似忽不支援，
在 MAC 上的 safari 完全正常，Android 上也是完全正常
可以用相機預覽，可以抓圖，基本上就是拍照功能了，也可以即時處理影像，例如辨識條碼或證件號碼之類的，光靠網頁就可以做到很多特別的功能
參考資料：https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
沒有留言:
張貼留言