凯旋捕鱼游戏下载

書名： WebRTC音視頻實(shí)時(shí)互動(dòng)技術(shù)：原理、實(shí)戰(zhàn)與源碼分析
作者名：李超編著
本章字?jǐn)?shù)： 505字
更新時(shí)間： 2021-08-06 14:49:36

5.5　本地視頻預(yù)覽

當(dāng)使用getUserMedia（）接口獲得本地音視頻流MediaStream后，可以使用H5的<video>標(biāo)簽將其展示出來。要實(shí)現(xiàn)這個(gè)功能很簡單，只要將MediaStream賦值給<video>標(biāo)簽的srcObject屬性即可。

我們來看一個(gè)具體的例子，重點(diǎn)看一看<video>標(biāo)簽是如何與MediaStream建立聯(lián)系的。示例參見代碼5.8。

代碼5.8　本地視頻預(yù)覽

1 //H5 代碼
2 <html >
3 …
4 <body >
5 …
6 // 定義了一個(gè)<video > 標(biāo)簽
7 <video autoplay playsinline ></video >
8 <script src="./demo.js" ></script >
9 …
10 </body >
11 </html >
12
13 //demo.js
14 …
15 // 從H5 獲得<video > 標(biāo)簽
16 const lv = document.querySelector('video ');
17
18 // getUserMedia 的采集限制
19 const contrains = {
20   video: true ,
21   audio: true
22 };
23
24 // 調(diào)用getUserMedia 成功后， 回調(diào)該函數(shù)
25 function gotLocalStream(mediaStream){
26    lv.srcObject = mediaStream;
27 }
28 …
29 navigator.mediaDevices.getUserMedia(contrains)
30     .then(gotLocalStream)
31     .catch(handleLocalMediaStreamError);
32 …

上面的代碼由兩部分組成，即H5代碼和js代碼。其中，H5代碼用于定義<video>標(biāo)簽；js代碼用于控制音視頻數(shù)據(jù)的采集，并將采集的視頻數(shù)據(jù)與<video>標(biāo)簽建立聯(lián)系。

首先來看H5的代碼。該代碼非常簡單，唯一需要說明的是<video>標(biāo)簽的兩個(gè)屬性，即autoplay和playsinline。其中autoplay表示<video>標(biāo)簽收到音視頻數(shù)據(jù)后立即開始播放；playsinline的作用是讓播放器在頁面內(nèi)播放，而不是調(diào)用外部的系統(tǒng)播放器播放音視頻。

接下來看一下demo.js。demo.js中的大部分代碼已經(jīng)在5.3節(jié)中介紹過了。需要重點(diǎn)說明的是，MediaStream與<video>標(biāo)簽的綁定是在回調(diào)函數(shù)gotLocalStream（）中完成的。只要將MediaStream賦值給<video>標(biāo)簽（即代碼第26行），即完成了綁定工作。這樣，從音視頻設(shè)備上采集的數(shù)據(jù)就可以通過<video>標(biāo)簽播放出來了。至此就完成了本地視頻預(yù)覽工作。

官术网_书友最值得收藏!

WebRTC音視頻實(shí)時(shí)互動(dòng)技術(shù)：原理、實(shí)戰(zhàn)與源碼分析

5.5 本地視頻預(yù)覽

5.5　本地視頻預(yù)覽