iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 25
0

今天來從Webcam.js來說說Flash這些外掛。隨著網頁與行動裝置的進化,瀏覽器要存取相機、陀螺儀等資源越來越容易,不過要處理不支援的情況還有點麻煩。Webcam.js是一個在HTML5裡取得相機無果時,會自動轉換去嘗試使用Flash獲取資源,並且提供了很多高級的API,今天就帶大家來看看吧!

首先會需要一個顯示相機畫面的元素:

<script src="webcam.js"></script>
<div id="my_camera" style="width:320px; height:240px;"></div>
<div id="my_result"></div>
<a href="javascript:void(take_snapshot())">Take Snapshot</a>

當然還是要先引入Webcam.js給的腳本webcam.js,另外還有一份webcam.sfw要置於同一目錄底下。webcam.sfw是一份Flash相關檔案,在判斷需要的時候會去請求這份檔案。另外準備一個拍照完顯示的地方,以及一個快門。

<script language="JavaScript">
    Webcam.attach( '#my_camera' );
    
    function take_snapshot() {
        Webcam.snap( function(data_uri) {
            document.getElementById('my_result').innerHTML = '<img src="'+data_uri+'"/>';
        } );
    }
</script>

用法很簡單,直接使用Webcam.attach(#element_id),這會嘗試請求相機資源,並自動判斷顯示大小,顯示於指定元素之中(題外話,把它建立好的元素挖開來也是件蠻有趣的事情)。這有其他用法,就去參考官方文檔吧!

拍照截圖的話,直接使用Webcam.snap(),這用法更是多樣,今天也不多說了(不習慣的鍵盤真痛苦Orz)。


可以看到瀏覽器中的JS可以直接存取相機資源,甚至GPU、陀螺儀也都可以,未來搞不好藍芽也不在話下,不過在以前這些資源可都是需要而外的外掛,像是Flash來處理的。在未來Flash應該會慢慢退出瀏覽器,除了iPhone不支援以外,Chrome沒記錯明年新版本也不會支援。


上一篇
雙欄式佈局
下一篇
用JS玩類神經網路 - Tensorflow Playground和幾個遊戲介紹
系列文
從零開始遲來的Web開發筆記30

尚未有邦友留言

立即登入留言