WebRTC 如何推送本地視頻流

、需求

使用 webrtc 協議做直播，常見的音視頻源是攝像頭和麥克風，高級一點的就是桌面分享。雖然使用桌面分享可以實現推送本地流（原理就是對屏幕錄制），但依賴本地播放器，并且觀眾可以看到主播的任何操作。

有一種偽直播需求，需要將本地視頻無感知推送給用戶，讓用戶感覺就像直播一樣。

使用webrtc協議，大多數情況是在瀏覽器中做主播端。眾所周知，出于安全和隱私的原因，Web 應用程序不能直接訪問用戶設備上的文件。那么如何將本地視頻源進行加載到瀏覽器并推送出去呢？

二、核心API

HTMLCanvasElement.captureStream()

該方法返回一個CanvasCaptureMediaStream實時視頻捕獲的畫布。

使用例子：

//獲取所需要截取媒體流的canvas element
var canvasElt=document.querySelector('canvas'); // 或者 video 標簽

//截取到媒體流
var stream=canvasElt.captureStream(25); // 25 FPS

//使用媒體流
// E.g.使用RTCPeerConnection來傳輸給其它的電腦
// 下面的pc是其他地方創建的一個RTCPeerConnection
pc.addStream(stream);

通過以上例子，是不是恍然大霧。

此時我們的方案可以是：

上傳一段視頻到服務器或者云存儲
使用 video 標簽加載視頻
使用 captureStream 捕獲視頻流
使用 addStream 將視頻流發布

此時解決了推送視頻流，但是要推送本地視頻怎么做呢？

相關學習資料推薦，點擊下方鏈接免費報名，先碼住不迷路~】

音視頻免費學習地址：FFmpeg/WebRTC/RTMP/NDK/Android音視頻流媒體高級開發

【免費分享】音視頻學習資料包、大廠面試題、技術視頻和學習路線圖，資料包括（C/C++，Linux，FFmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以點擊788280672加群免費領取~

三、最終解決方案

出于安全和隱私的原因，Web 應用程序不能直接訪問用戶設備上的文件。如果需要讀取一個或多個本地文件，可以通過使用 input file 和 FileReader 來實現。雖然 FileReader 可以讀文件，但是需要經過base-64編碼，如果讀大文件肯定會影響效率。所以我們只能考慮 input file，可以使用 URL.createObjectURL 對視頻進行預覽。

那么我的最終方案就是使用 captureStream + input file預覽 模式來解決這個問題。

簡要代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
    <video width="500" controls>
        <source src="my_video.mp4" id="video_here">
    </video>
    <input type="file" name="file[]" class="file_video" accept="video/*">
    <script>
        $(document).on("change", ".file_video", function (evt) {
            var $source=$('#video_here');
            $source[0].src=URL.createObjectURL(this.files[0]);
            $source.parent()[0].load();
        })
    </script>
</body>

</html>

四、總結

通過以上步驟，我們可以總結如下步驟：

使用 input 標簽進行文件選擇
使用 video標簽配合 input標簽進行視頻預覽
使用 captureStream 捕獲視頻流
使用 addStream 將視頻流發布

原文 https://zhuanlan.zhihu.com/p/291399800

圖片添加區域鏈接的基本寫法

首先我們看看效果：

實現這樣的功能需要學習以下幾點內容。

1.認識<img/><map><area/></map>基本結構

首先復制一個html框架，命名為“圖片區域鏈接.html”,示例代碼如下：

<!DOCTYPE HTML> 
  <html>  
  <head>   
  <title>圖片區域鏈接</title>  
  <meta charset="utf-8">  
  </head>   
  <body>  

  </body>   
  </html>

向<body></body>中添加<img><map><area/></map>基本結構，示例代碼如下：

 <body>  
 <img/>
   <map>
   <area/>
   </map>
 </body>

指定要添加區域鏈接的圖片的路徑，如下：

 <img src="img/image1.jpg"/>
   <map>
   <area/>
   </map>

讓<img>標簽通過<map>的名字來驅使<map>為自己工作。

需要兩步，第一，給<map>起名字，name=“map”，為了兼容所有的瀏覽器，還要加上id=“map”（有的瀏覽器只認id）。

第二，讓<img>叫出<map>的名字或id，usemap="#map"。大家要注意，叫名字時要加#。這個在之前的教程中也經常出現。

示例代碼如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area/>
   </map>

下面來劃分區域。

2.為圖片劃分區域的方法

<area>是用來劃分區域的標簽，area也是“”區域“”的意思。

默認的shape（形狀）屬性有“矩形（rect）”、“圓形（circ）”、“多邊形（poly）”三個值。

分別添加三個形狀，示例代碼如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area shape="rect"/>
   <area shape="circ"/>
   <area shape="poly"/>
   </map>

下面我們就要為區域規定參數，也就是在圖像上的位置和范圍大小。

為<area>添加coords屬性可以指定區域的位置和范圍。

如果shape="rect" 則coords由四個參數組成。例如coords="0,0,50,50"。從左到右，兩兩一組，組成兩個平面坐標，即（0,0）和（50，50），單位是“像素”，矩形區域如下：

如果shape=“circ”，coords=“50,50,10”。（50,50）定義了圓心，10是半徑。如圖：

如果shape=“poly”，coords的參數不少于3對！注意是“對”！從左到右，兩個數就是一組坐標，三組坐標可以確定一個三角形，多組坐標可以確定多邊形。例如

這組參數畫出了下圖中殲20的邊框線（600像素*400像素，如果圖像的長寬像素數變了，參數就不正確了），如圖：

這時，大家會有一個問題：如何才能知道圖像中某個像素點的坐標呢？

3.使用Gimp軟件精準定位圖片區域

使用Gimp軟件可以解決這個問題。

Gimp是一款類似于Photoshop的數字圖像處理軟件，不同的是，Gimp是開源免費的。

下載地址：https://www.gimp.org/

雙擊安裝即可，注意選擇一下安裝目錄。

完成安裝之后打開，界面如下：

點擊“文件”找到“打開”：

選擇要打開的圖片名字：

點擊名稱后，右邊會有圖像預覽，點擊“打開”即可：

打開后如圖：

把鼠標放到圖像的任意位置，看左下角：

這里就會顯示我們鼠標所在的像素坐標數值。

這樣我們就能方便地寫“poly”的coords了。

請在空閑時找一張圖片演練一下吧！

4.為區域添加鏈接

在<area/>標簽中添加href屬性即可指定鏈接路徑，如下：

href="https://www.zhihu.com/question/284642168"

添加title屬性可以在鼠標滑過鏈接區域時提示讀者，如下：

title="殲20氣動外形分析"

今天的內容結束了，圖像區域鏈接在使用時還有一些注意事項，我們下次再詳細討論。

使用碎片時間，學習完整知識！關注大魚師兄，一起精研技藝。

整合營銷服務商

WebRTC 如何推送本地視頻流

、需求

二、核心API

三、最終解決方案

四、總結

圖片添加區域鏈接的基本寫法

目錄

您的項目需求