音視頻流媒體開發(fā)-目錄
iOS知識點-目錄
Android-目錄
Flutter-目錄
數(shù)據(jù)結(jié)構(gòu)與算法-目錄
uni-pp-目錄
4. 音視頻采集和播放
有三個案例：
（1）打開攝像頭并將畫面顯示到頁面；
（2）打開麥克風(fēng)并在頁面播放捕獲的聲音?
（3）同時打開攝像頭和麥克風(fēng)峡懈，并在頁面顯示畫面和播放捕獲的聲音
4.1 打開攝像頭
實戰(zhàn)：打開攝像頭并將畫面顯示到頁面
效果展示
代碼流程
- 初始化button、video控件
- 綁定“打開攝像頭”響應(yīng)事件onOpenCamera
- 如果要打開攝像頭則點擊 “打開攝像頭”按鈕，以觸發(fā)onOpenCamera事件的調(diào)用
- 當(dāng)觸發(fā)onOpenCamera調(diào)用時
a. 設(shè)置約束條件，即是getUserMedia函數(shù)的入?yún)?br> b. getUserMedia有兩種情況钓觉，一種是正常打開攝像頭臭胜，使用handleSuccess處理；一種是打開攝像頭失敗倍啥，使用handleError處理
c. 當(dāng)正常打開攝像頭時，則將getUserMedia返回的stream對象賦值給video控件的srcObject即可將視頻顯示出來
示例代碼
4.1 video.html
<!DOCTYPE html>
<!‐‐
* 文件名：video.html
* 功能：獲取視頻并將其顯示到頁面
‐‐>
<html >
<body >
<video id="local‐video" autoplay playsinline></video>
<button id="showVideo" >打開攝像頭</button>
<p>通過getUserMedia()獲取視頻</p>
</body>
<script >
const constraints = {
audio: false,
video: true
};
// 處理打開攝像頭成功
function handleSuccess(stream) {
const video = document.querySelector("#local‐video");
video.srcObject = stream;
}
// 異常處理
function handleError(error) {
console.error("getUserMedia error: " + error);
}
function onOpenCamera(e) {
navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
}
document.querySelector("#showVideo").addEventListener("click", onOpenCamera);
</script>
</html>
4.2 打開麥克風(fēng)
實戰(zhàn)：打開麥克風(fēng)并在頁面播放捕獲的聲音
效果展示
代碼流程
- 初始化button澎埠、audio控件
- 綁定“打開麥克風(fēng)”響應(yīng)事件onOpenMicrophone
- 如果要打開麥克風(fēng)則點擊 “打開麥克風(fēng)”按鈕虽缕，以觸發(fā)onOpenMicrophone事件的調(diào)用
- 當(dāng)觸發(fā)onOpenCamera調(diào)用時
a. 設(shè)置約束條件，即是getUserMedia函數(shù)的入?yún)?br> b. getUserMedia有兩種情況蒲稳，一種是正常打開麥克風(fēng)氮趋，使用handleSuccess處理；一種是打開麥克風(fēng)失敗江耀，使用handleError處理
c. 當(dāng)正常打開麥克風(fēng)時剩胁，則將getUserMedia返回的stream對象賦值給audio控件的srcObject即可將聲音播放出來
示例代碼
4.2 audio.html
</html>
<!DOCTYPE html>
<!‐‐
* 文件名：audio.html
* 功能：打開麥克風(fēng)并在頁面播放捕獲的聲音
‐‐>
<html >
<body>
<audio id="local‐audio" autoplay controls>播放麥克風(fēng)捕獲的聲音</audio>
<button id="playAudio">打開麥克風(fēng)</button>
<p>通過getUserMedia()獲取音頻</p>
</body>
<script>
// 約束條件
const constraints = {
audio: true,
video: false
};
// 處理打開麥克風(fēng)成功
function handleSuccess(stream) {
const audio = document.querySelector("#local‐audio");
audio.srcObject = stream;
}
// 異常處理
function handleError(error) {
console.error("getUserMedia error: " + error);
}
function onOpenMicrophone(e) {
navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
}
document.querySelector("#playAudio").addEventListener("click", onOpenMicrophone);
</script>
</html>
webrtc獲取音視頻設(shè)備
4.3 打開攝像頭和麥克風(fēng)
同時打開攝像頭和麥克風(fēng)，范例可以參考4.1祥国，只是在約束條件中把
const constraints = {
audio: false, // 不打開麥克風(fēng)
video: true
};
改為
const constraints = {
audio: true, // 打開麥克風(fēng)
video: true
};
具體代碼
4.3 video_audio.html
<!DOCTYPE html>
<!‐‐
* 文件名：video.html
* 功能：獲取音視頻并將其顯示到頁面和播放聲音
‐‐>
<html>
<body>
<video id="local‐video" autoplay playsinline></video>
<button id="showVideo">打開音視頻</button>
<div id="errorMsg"></div>
<p>通過 <code>getUserMedia()</code> 獲取音視頻.</p>
<script>
// 設(shè)置約束條件, 同時打開音頻流和視頻流
const constraints = (window.constraints = {
audio: true,
video: true
});
// 處理打開攝像頭+麥克風(fēng)成功
function handleSuccess(stream) {
const video = document.querySelector("#local‐video");
video.srcObject = stream;
}
// 處理打開攝像頭+麥克風(fēng)失敗
function handleError(error) {
console.error("getUserMedia error: " + error);
}
async function onOpenAV(e) {
navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
}
document
.querySelector("#showVideo")
.addEventListener("click", onOpenAV);
</script>
</body>
</html>
4.4 拓展講解
getUserMedia API參考：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
!=和!==區(qū)別
!= 在表達(dá)式兩邊的數(shù)據(jù)類型不一致時,會隱式轉(zhuǎn)換為相同數(shù)據(jù)類型,然后對值進(jìn)行比較. 比如 1 和 "1" , 1 != "1" 為false
!== 不會進(jìn)行類型轉(zhuǎn)換,在比較時除了對值進(jìn)行比較以外,還比較兩邊的數(shù)據(jù)類型, 它是恒等運算符===的非形式.昵观， 1 != "1" 為truevideo控件屬性
<video>: The Video Embed element https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
HTML DOM Video 對象 https://www.runoob.com/jsref/dom-obj-video.html
