摘要:能夠前后攝像頭切換,能夠截取當前視頻流圖像兼容各大主流瀏覽器,主要使用的獲取視頻流獲取設備攝像信息之前在本機上測試出現問題,問題在于沒有使用作為測試鏈接,如果使用的話,則項目不能打開攝像頭,這可能與的明文加密有關系如果使用,代碼會報但是這個
能夠前后攝像頭切換,能夠截取當前視頻流圖像
兼容各大主流瀏覽器,
主要使用的api:
</>復制代碼
// 獲取視頻流
navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
// 獲取設備攝像信息
navigator.mediaDevices.enumerateDevices().then(gotDevices).then(getStream).catch(handleError);
之前在本機上測試Chrome出現問題,問題在于沒有使用https作為測試鏈接,如果使用http的話,則項目不能打開攝像頭,這可能與chrome的明文加密有關系
如果使用http,代碼會報
NotSupportedError Only secure origins are allowed (see: https://goo.gl/Y0ZkNV)
但是這個錯開始并沒有報,開始我直接運行獲取視頻流代碼,項目的代碼仿佛停止運行一般,相應位置的console.log也沒有輸出,這個錯誤也沒有報
后來經過調試,獲取視頻流的代碼放在點擊事件中,錯誤才出來。。
</>復制代碼
// 多選框更改事件
videoSelect.onchange = getStream;
// 獲取設備音頻輸出設備與攝像設備,這里我只用到了攝像設備
function gotDevices(deviceInfos) {
console.log("deviceInfos")
console.log("deviceInfos:", deviceInfos);
for (let i = 0; i !== deviceInfos.length; i++) {
let deviceInfo = deviceInfos[i];
var option = document.createElement("option");
// console.log(deviceInfo)
if (deviceInfo.kind === "videoinput") { // audiooutput , videoinput
option.value = deviceInfo.deviceId;
option.text = deviceInfo.label || "camera " + (videoSelect.length + 1);
videoSelect.appendChild(option);
}
}
}
兼容瀏覽器:
</>復制代碼
//訪問用戶媒體設備的兼容方法
function getUserMedia(constrains,success,error){
if(navigator.mediaDevices.getUserMedia){
//最新標準API
navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
} else if (navigator.webkitGetUserMedia){
//webkit內核瀏覽器
navigator.webkitGetUserMedia(constrains).then(success).catch(error);
} else if (navigator.mozGetUserMedia){
//Firefox瀏覽器
navagator.mozGetUserMedia(constrains).then(success).catch(error);
} else if (navigator.getUserMedia){
//舊版API
navigator.getUserMedia(constrains).then(success).catch(error);
}
}
獲取視頻流成功回調:
</>復制代碼
function getStream(){
if (window.stream) {
window.stream.getTracks().forEach(function(track) {
track.stop();
})
}
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){
//調用用戶媒體設備,訪問攝像頭
const constraints = {
audio: true,
video: {
width: { ideal: 1280 },
height: { ideal: 720 },
frameRate: {
ideal: 10,
max: 15
},
deviceId: {exact: videoSelect.value}
}
};
console.log("獲取視頻流");
getUserMedia(constraints,success,error);
} else {
alert("你的瀏覽器不支持訪問用戶媒體設備");
}
}
截取視頻流作為圖片:
</>復制代碼
//注冊拍照按鈕的單擊事件
document.getElementById("capture").addEventListener("click",function(){
//繪制畫面
console.log("點擊事件");
context.drawImage(video,0,0,480,320);
});
源碼地址
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/98482.html
摘要:手機屏幕朝上,水平靜止放置,軸重力加速度為,為。當手機水平放置,撥動手機,使其慢慢旋轉,重力加速度的數據并沒有變化。四元數的基本數學方程為其中表示旋轉角度,表示旋轉軸。四元數表示一個完整的旋轉。 前言 隨著智能硬件的普及,手機,平板,PC甚至路邊的電子廣告牌,現代瀏覽器已經無處不在。在瀏覽器里編織出我們自己的一片天地已經輕車熟路,但是這還不夠,H5賦予了瀏覽器太多的新特性,等待我們去使...
摘要:在微信端打開手機攝像頭拍照,將拍照圖片保存到服務器上需要使用到微信的接口,主要使用到了拍照或從手機相冊中選圖接口上傳圖片接口參考資料一引入微信二通過接口注入權限驗證配置三微信端拍照接口默認可以指定是原圖還是壓縮圖,默認二者都有可以指 在微信端打開手機攝像頭拍照,將拍照圖片保存到服務器上需要使用到微信的JSSDK接口,主要使用到了拍照或從手機相冊中選圖接口(chooseImage),上傳...
閱讀 1726·2021-11-22 15:33
閱讀 2104·2021-10-08 10:04
閱讀 3556·2021-08-27 13:12
閱讀 3429·2019-08-30 13:06
閱讀 1478·2019-08-29 16:43
閱讀 1400·2019-08-29 16:40
閱讀 795·2019-08-29 16:15
閱讀 2754·2019-08-29 14:13