使用HTML5技術控制電腦或手機上的攝像頭

10 提交 / 0個新回復
最新回復
使用HTML5技術控制電腦或手機上的攝像頭

? ??HTML5已經火了幾個年頭,尤其是出現可互動的功能,比如Canvas通過JS代碼操作用戶設備PC或手機上的攝像頭,這將是未來各個互動應用的頻繁的操作技術,這里見到轉載一下,原文參見
? ?移動設備和桌面電腦上的客戶端API起初并不是同步的。最初總是移動設備上先擁有某些功能和相應的API,但慢慢的,這些API會出現在桌面電腦上。其中一個應用接口技術就是getUserMedia API,它能讓應用開發者訪問用戶的攝像頭或內置相機。下面就讓我展示一下如何通過瀏覽器來訪問你的攝像頭,并提取截屏圖形。
HTML代碼

?
下面的代碼里我寫了一部分注釋,請閱讀:

?
<!-- 理想情況下我們應該先判斷你的設備上是否 有攝像頭或相機,但簡單起見,我們在這里直接 寫出了HTML標記,而不是用JavaScript先判斷 然后動態生成這些標記 --> <

?
JavaScript代碼

?
因為我們是手工寫出的HTML,所以下面的js代碼會比你想象的要簡單了很多。

?
// Put event listeners into place window.addEventListener("DOMContentLoaded",?
function?{ // Grab elements, create settings, etc. var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), video = document.getElementById("video"), videoObj = { "video": true },?errBack?= function(error) { console.log("Video capture error: ", error.code); }; // Put video listeners into place if(navigator.getUserMedia) { // Standard navigator.getUserMedia(videoObj, function(stream) { video.src = stream; video.play; }, errBack); } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed navigator.webkitGetUserMedia(videoObj, function(stream){ video.src = window.webkitURL.createObjectURL(stream); video.play; }, errBack); } else if(navigator.mozGetUserMedia) { // Firefox-prefixed navigator.mozGetUserMedia(videoObj, function(stream){ video.src = window.URL.createObjectURL(stream); video.play; }, errBack); } }, false);一旦判斷出用戶瀏覽器支持getUserMedia ,下面就非常簡單了,只需要將那個video元素的src設置為用戶的攝像頭視頻直播連接。這就是用瀏覽器訪問攝像頭需要做的所有的事情!
拍照的功能只能說是稍微復雜一點點。我們在按鈕上加入一個監聽器,將視頻畫面畫到畫布上。
// 觸發拍照動作 document.getElementById("snap") .addEventListener("click", function { context.drawImage(video, 0, 0, 640, 480); });當然,你還可以在圖片上加一些濾鏡效果….我還是把這些技術放到以后的文章里再說吧。但至少你可以將這個畫布圖像轉換成一張圖片。

?
? ? ? ?以前我們需要使用第三方的插件才能從瀏覽器里訪問用戶的攝像頭,這不免有些復雜。現在只需要HTML5的畫布技術和javaScript,我們就能簡單快速的操作用戶的攝像頭。不僅僅還是訪問攝像頭,而且是因為HTML5的畫布技術及其強大,我們可以給圖片上加入各種迷人的濾鏡效果。現在,在瀏覽器里用自己的攝像頭給自己拍張照片吧!

看上去很酷的樣子!

學習了

這個挺好的!

不那么麻煩

很酷的技術!

看起來很酷的樣子,不知道用起來怎么樣!

不錯!但是很多瀏覽器不支持啊!

這些HTML標記

自己拍張照片

国产69久久精品成人看,国产性色AV高清在线观看,国产亚洲Av综合人人澡精品,国产在线拍揄自揄拍无码