2. 程式人生 > >html5 獲取攝像頭和麥克風的案例

html5 獲取攝像頭和麥克風的案例

阿新 • • 發佈：2019-01-07

使用的介面api

通過navigator.mediaDevices.getUserMedia()方法進行獲取
該MediaDevices.getUserMedia()方法提示使用者允許使用產生MediaStream包含所請求型別的媒體的軌道的媒體輸入。該流可以包括例如視訊軌道（由硬體或虛擬視訊源（例如相機，視訊記錄裝置，螢幕共享服務等）產生），音軌（類似地，由物理或虛擬音訊源，如麥克風，A / D轉換器等），以及可能的其他軌道型別。
注意：使用此方法需要允許瀏覽器呼叫攝像頭和麥克風才可以

程式碼案例

當前程式碼直接在pc端或者筆記本上可直接檢視案例，如果缺少相關硬體，直接回給報錯誤。

<!doctype html>
 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title
 
>
</head>
<body>
<video src="" id="video"></video>
</body>
<script>
    // Prefer camera resolution nearest to 1280x720.
    var constraints = { audio: true, video: { width: 1280, height: 720 } };

    navigator.mediaDevices.getUserMedia(constraints)
        .then(function
 
(mediaStream) {
            var video = document.querySelector('video');
            video.srcObject = mediaStream;
            video.onloadedmetadata = function(e) {
                video.play();
            };
        })
        .catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end.
</script>
</html>

相容性

火狐 谷歌chorme 還有歐朋瀏覽器都支援
ie瀏覽器和蘋果的safari都不支援

注意事項

在移動端http協議不被支援，需要在https更安全的協議上面使用。

相關推薦

html5 獲取攝像頭和麥克風的案例

使用的介面api 通過navigator.mediaDevices.getUserMedia()方法進行獲取 該MediaDevices.getUserMedia()方法提示使用者允許使用產生MediaStream包含所請求型別的媒體的軌道的媒體輸入。該流可

HTML5全屏，頁面可見性，訪問攝像頭和麥克風，檢測電池，預載入網頁功能

1，全屏 // 找到適合瀏覽器的全屏方法 function launchFullScreen(element) { if(element.requestFullScreen) { element.requestFullScreen(); } else if(e

用HTML5獲取攝像頭影象，並且上傳圖片到伺服器（程式碼完整可用）

前面轉載的那篇文章，HTML 5線上攝像頭應用，直接使用例子來測試有問題（我直接部署到伺服器上，使用Chrome瀏覽器執行），所以我參考它的原始碼重新整理了一個頁面出來，這個在Chrome（版本 29.0.1547.76 m）測試過，應該沒有問題。 這個版本的程式碼是最簡

C# 封裝SDK 獲取攝像頭的水平角度和垂直角度

技術分享 獲取 operation 控制 dev ive href 代碼 pen 最近需要做一個C#版本的控制終端，控制攝像頭，獲取攝像頭的水平角度和垂直角度 獲取當前攝像頭的角度，需要調用一個名為NET_DVR_GetDVRConfig的bool類型的函數 在C++中，函

HTML5按鍵打開攝像頭和拍照

java click listen col red window iad cti src HTML5實現按鍵打開攝像頭和拍照 步驟： 1、創建一個打開攝像頭按鈕的標簽、video標簽、拍照的按鈕標簽、畫布 2、實現打開攝像頭的功能 3、實現拍照功能 具體實現代碼：

HTML5利用WebRTC的getUserMedia獲取攝像頭資訊模擬拍照及視訊（完整示例（轉））

轉至https://blog.csdn.net/journey191/article/details/40744015    （如有冒犯聯絡我刪掉謝謝） 最近公司做的app涉及攝像頭，由於我們使用HTML5開發app，自然瞭解到getUserMedia介面。 關鍵是使用的

Windows下用DirectShow查詢攝像頭（含解析度）和麥克風

        在視訊聊天、視訊會議、線上監控和視訊展臺等專案中，需要查找出本地電腦上連線的所有攝像頭，網上流傳比較多的方式是ffmpeg的方式，這種方式可以跨平臺，不同的平臺下呼叫不同的庫。這種方式在控制檯直接列印了攝像頭的資訊，無法（或者說我暫時沒找到）在記憶體中獲取，

Ubuntu下ffmpeg 捕獲螢幕和採集音效卡、攝像頭、麥克風聲音

ffmpeg在Linux下用X11grab進行螢幕錄影,在Windows下用DirectShow濾鏡 首先需要安裝一個軟體,screen capture recorder 編譯好的下載地址是: http://sourceforge.net/projects/screencapturer/file

使用HTML5+呼叫手機攝像頭和相簿

例項： 具體流程：點選觸發選擇拍照或相簿-->拍照或相簿選擇照片-->拿到圖片路徑進行壓縮-->讀取檔案並顯示在頁面上 首先是html程式碼，很簡單，就是給一個新增按鈕，點選觸發事件，這裡我就不把css檔案放出來，大家知道是一個新增按鈕就行。 &

《OpenCV設定和獲取攝像頭引數》

適用於VideoCapture開啟的攝像頭 VideoCapture capture(0); 設定攝像頭引數 不要隨意修改 capture.set(CV_CAP_PROP_FRAME_WIDT

樹莓派新版系統上使用mjpg-streamer獲取USB攝像頭和樹莓派專用攝像頭RaspiCamera影象

網上有很多關於mjpg-stream移植到樹莓派的文章，大部分還是使用的sourceforge.net上的mjpg-streamer-r63.tar.gz，該工程版本比較老，在新版系統中編譯需要把原始碼檔案中所有 #include<linux/videodev.h&

ffmpeg 捕獲螢幕和採集音效卡、攝像頭、麥克風聲音

ffmpeg在Linux下用X11grab進行螢幕錄影,在Windows下用DirectShow濾鏡 首先需要安裝一個軟體,screen capture recorder 編譯好的下載地址是: http://sourceforge.net/projects/scr

html5 獲取頁面的寬和高

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

html5獲取上傳圖片的大小和即時顯示

最近看到h5帶有這個功能 ，效果如程式碼所示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title

js獲取瀏覽器和設備相關width（屏幕的寬度）

view dev viewport document one size ini left cal 首先呢，我們將iPhone手機的相關數據表示如下 我們要理解很多東西，比如邏輯分辨率、物理分辨率、縮放因子、ppi等，這裏先不討論。 首先呢，我們先介紹下各個屏幕寬度： 網

Storm容錯機制Acker詳解和實戰案例

storm acker 失敗重發 可靠性Storm中有個特殊的Executor叫acker，他們負責跟蹤spout發出的每一個Tuple的Tuple樹。當acker發現一個Tuple樹已經處理完成了，它會告訴框架回調Spout的ack()，否則回調Spout的fail()。Acker的跟蹤算法是Storm的主

html中相對(relative)，絕對(absolute)位置以及float的學習和使用案例 （轉）

邊距 col top 20px pre 其他 fff 例如 pan 這幾天著手於CSS的研究，研究的原因主要是工作需要，最近發現如果做前端僅僅會javascript很難盡善盡美，當然懂樣式和html在一定程度上可以讓我們更近一步。 css較為簡單，由於個人擅長編寫代碼，所以

[No0000F1]js獲取喜馬拉雅和荔枝FM電臺專輯音頻

down http oca 分享 user lis ul li cnblogs func 荔枝FM小書簽.txt javascript: (function() { if ($(‘#down_url‘)) { $(‘#down_url‘).

根據HTML5 獲取當前位置的經緯度

yun .get rip 變量 src ted call location gets 是想讓地圖的定位用戶位置更準確一些。 查看了介紹： http://www.w3school.com.cn/html5/html_5_geolocation.asp 看介紹中拿數據挺簡單。

httpWebRequest獲取流和WebClient的文件抓取

即使 reads 請求 pub sof do-while agen lib uri httpWebRequest獲取流和WebClient的文件抓取 昨天寫一個抓取，遇到了一個坑，就是在獲取網絡流的時候，人為的使用了stream.Length來獲取流的長度，獲取的時候會拋出