當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

WebRTC 的黎明

發布時間：2023/12/20 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 WebRTC 的黎明小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

The Dawn of WebRTC 機翻

原文：The Dawn of WebRTC - SitePoint

Web 實時通信 (WebRTC) 旨在為開發人員提供使用簡單 JavaScript API 創建高清視頻和音頻呼叫的能力。這些 API 直接嵌入在瀏覽器中，無需插件、下載或任何類型的安裝即可啟動和運行。

谷歌花了大約 2 億美元將這項技術開源給開發社區。WebRTC 使用多種視頻和音頻編解碼器，使任何人都能夠創建下一代通信應用程序，而無需支付許可或版稅。

有哪些可能性？

我們才剛剛開始了解 WebRTC 將如何改變通信行業。我們正在看到使用 WebRTC 創建的所有類型的應用程序。最具標志性的例子之一是亞馬遜的 Mayday Button。它展示了大大小小的公司如何利用 WebRTC 的真正力量。

WebRTC 為您帶來了許多功能來增強您的應用程序，例如：

視頻通信：在瀏覽器之間創建安全和高清的音頻和視頻流
文件共享和消息傳遞：在瀏覽器之間安全地連接和共享數據，無需將文件上傳到云或網絡服務器。數據直接在連接的對等點之間發送
電話到瀏覽器：?WebRTC 允許公共交換電話網絡 (PSTN) 和瀏覽器之間的連接。您可以使用 HTML5 中的新 API、SIP 網關和 WebRTC 從一個位置撥打和接聽電話
移動到移動：?WebRTC 不僅適用于 Web，還有適用于 iOS 和 Android 的原生庫利用 WebRTC 的功能
機器對機器：?WebRTC 可嵌入到需要機器對機器通信的系統中，例如物聯網。Google Chromecast 是在正常用例之外使用 WebRTC 的完美示例

了解 WebRTC API

WebRTC 依賴于三個直接嵌入到 Web 瀏覽器中的 JavaScript API，無需客戶端或瀏覽器插件即可與另一個啟用 WebRTC 的瀏覽器直接通信。這些 API 是：

MediaStream（又名 getUserMedia）允許您訪問用戶使用的設備的攝像頭、麥克風或屏幕。作為附加的安全層，在您被允許流式傳輸他們的媒體之前，用戶將擁有訪問權限。如果用戶從安全連接 (HTTPS) 連接，則用戶只需為應用程序授予一次訪問權限，但如果您從非安全連接 (HTTP) 連接，則每次應用程序需要訪問權限時都會提示用戶
RTCPeerConnection（又名 PeerConnection）允許兩個用戶直接通信，點對點。它對發送到本地計算機和從本地計算機發送到接收媒體的遠程對等體的媒體進行編碼和解碼。
RTCDataChannel (aka DataChannel) 代表兩個對等點之間的雙向數據通道。它搭載在 RTCPeerConnection 之上，允許您直接在兩個連接的對等方之間安全地發送數據。

WebRTC 入門

我們將從一個簡單的照相亭應用程序開始，它允許您使用網絡攝像頭捕獲圖像并將一些 CSS 過濾器應用于捕獲的圖像。它將教您使用 MediaStream API 開始使用 WebRTC 的基礎知識。它是Google 團隊創建的示例應用程序的輕微修改版本

HTML

在下面的 HTML 代碼中，您將看到創建您的第一個 WebRTC Web 應用程序所需的基礎知識。WebRTC 利用 HTML5 `video` 元素來呈現本地和遠程視頻流。此外，我們將使用 `canvas` 元素制作本地視頻流的快照以應用過濾器：

<code class="language-markup"><div class="m-content"><h1>getUserMedia + CSS filters demo</h1><div class="photo-booth"><video autoplay></video><canvas></canvas></div><div class="buttons"><button id="start">Access Webcam</button><button id="snapshot">Take a Snapshot</button><button id="filter">Change Filter</button></div> </div></code>

JavaScript

該navigator.getUserMedia()方法是 getUserMedia API 提供的方法，它允許您從用戶那里檢索流。在撰寫本文時，需要為不同的供應商前綴定義它，以使該應用程序在所有 WebRTC 兼容瀏覽器上工作：Chrome、Firefox、Opera。我們可以通過以下代碼實現這個目標：

<code class="language-javascript">navigator.getUserMedia = navigator.getUserMedia ||navigator.webkitGetUserMedia ||navigator.mozGetUserMedia;</code>

我們需要定義我們請求的約束，這些約束navigator.getUserMedia()將決定我們請求的媒體類型。在此示例中，我們僅通過設置請求訪問用戶的網絡攝像頭video: true。

<code class="language-javascript">var constraints = { audio: false, video: true };</code>

下面我們在變量中定義和存儲演示應用程序的 HTML 元素。

<code class="language-javascript">var start = document.querySelector('#start'); var snapshot = document.querySelector('#snapshot'); var filter = document.querySelector('#filter'); var video = document.querySelector('video'); var canvas = document.querySelector('canvas');</code>

接下來，我們需要為我們將應用于快照的過濾器創建一個數組。我們將在我們的 CSS 代碼中定義過濾器，在下一節中描述，使用相同的名稱：

<code class="language-javascript">var filters = ['blur', 'brightness', 'contrast', 'grayscale','hue', 'invert', 'saturate', 'sepia'];</code>

是時候享受真正的樂趣了！我們向我們的開始按鈕添加一個click事件來初始化?navigator.getUserMedia(constraints, success, error);以訪問我們的網絡攝像頭。必須獲得許可才能訪問我們的網絡攝像頭。每個瀏覽器供應商處理顯示提示以允許以不同方式訪問用戶的網絡攝像頭和麥克風。

<code class="language-javascript">start.addEventListener('click', function() {navigator.getUserMedia(constraints, success, error); });</code>

在成功授予訪問用戶網絡攝像頭的權限后，我們將流對象作為 HTML5video標記的源傳遞。

<code class="language-javascript">function success(stream) {/* hide the start button*/start.style.display = 'none';/* show the snapshot button*/snapshot.style.display = 'block';/* show the filter button*/filter.style.display = 'block';if(window.URL) {video.src = window.URL.createObjectURL(stream);} else {video.src = stream;} }</code>

如果訪問用戶的網絡攝像頭發生錯誤或權限被拒絕，您將收到將打印到控制臺的錯誤。

<code class="language-javascript">function error(e) {console.log('navigator.getUserMedia error: ', e); }</code>

接下來我們創建一個簡單的函數來將我們的 CSS 過濾器應用于canvas和video元素。該函數將找到 CSS 類的名稱并將過濾器應用于畫布。

<code class="language-javascript">filter.addEventListener('click', function() { var index = (filters.indexOf(canvas.className) + 1) % filters.length;video.className = filters[index];canvas.className = filters[index]; });</code>

最后，我們拍攝本地視頻流的快照并將其渲染到canvas.

<code class="language-javascript">snapshot.addEventListener('click', function() {canvas.width = 360;canvas.height = 270;canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); });</code>

CSS

您將在下面找到為您的第一個 WebRTC 應用程序設置樣式的基礎知識。

<code class="language-css">body {font-family: 'Open Sans', sans-serif;background-color: #e4e4e4; }h1 {width: 780px;margin-left: 20px;float: left; }.m-content {width: 800px;height: 310px;margin: auto; }.photo-booth {width: 800px;height: 310px;float: left; }</code>

WebRTC 允許通過兩種方式定義視頻流的大小。您可以在contraints傳遞給的變量中navigator.getUserMedia(contraints, success, error);定義它，也可以在 CSS 中定義它。在這個例子中，我們使用 CSS 來定義video本地視頻流和canvas元素的尺寸。

<code class="language-css">video {width: 360px;height: 270px;float: left;margin: 20px;background-color: #333; }canvas {width: 360px;height: 270px;float: left;margin: 20px;background-color: #777; }</code>

接下來我們給我們的按鈕一點閃光。我們將隱藏我們的過濾器和快照按鈕，直到我們可以使用訪問我們的麥克風和攝像頭getUserMedia()。

<code class="language-css">.buttons {margin-left: 20px;float: left; }button {background-color: #d84a38;border: none;border-radius: 2px;color: white;font-family: 'Open Sans', sans-serif;font-size: 0.8em;margin: 0 0 1em 0;padding: 0.5em 0.7em 0.6em 0.7em; }button:active {background-color: #cf402f; }button:hover {background-color: #cf402f;cursor: pointer; }#filter, #snapshot {display: none;margin-right: 20px;float: left; }</code>

接下來，我將使用 CSS 定義照相亭的過濾器。您可以在相關的 MDN 頁面上找到支持的過濾器列表。

<code class="language-css">.blur {filter: blur(2px);-webkit-filter: blur(2px); }.grayscale {filter: grayscale(1);-webkit-filter: grayscale(1); }.sepia {filter: sepia(1);-webkit-filter: sepia(1); }.brightness {filter: brightness(2.2);-webkit-filter: brightness(2.2); }.contrast {filter: contrast(3);-webkit-filter: contrast(3); }.hue {filter: hue-rotate(120deg);-webkit-filter: hue-rotate(120deg); }.invert {filter: invert(1);-webkit-filter: invert(1); }.saturate {filter: staurate(5);-webkit-filter: staurate(5); }</code>

如果您熟悉 MailChimp，您可能已經注意到使用網絡攝像頭添加個人資料圖片的功能。MailChimp 為其用戶添加了一個簡單但有效的解決方案，以使用與此演示類似的方式使用 WebRTC 修改他們的個人資料圖像。

本文中開發的代碼可在 GitHub 上找到。您可以在WebRTC Challenge上查看照片應用程序的現場演示。

兼容性

因此，您可能想知道 WebRTC 在瀏覽器供應商和移動設備上的可用性。就目前而言，WebRTC 僅與 Chrome、Firefox 和 Opera 的桌面版本以及 Android 上的移動瀏覽器兼容。WebRTC 尚未在 iOS 上用于移動瀏覽器，但您可以使用本機庫來構建您的 iOS 和 Android 應用程序。微軟正在積極推動對象實時通信 (ORTC)，目前計劃成為 WebRTC 1.1 規范的一部分。在那之前，有一種解決方法是使用 Temasys 的托管開源插件來支持 Internet Explorer 和 Safari。

愛立信目前正在通過他們的“Bowser”應用程序支持 WebRTC，您可以從 Apple應用商店下載該應用程序。它是他們新框架OpenWebRTC的一部分，OpenWebRTC是一個基于 GStreamer 的跨平臺 WebRTC 客戶端框架。

網站iswebrtcreadyyet.com是一個方便的工具，可用于檢查您喜歡的瀏覽器的狀態。

WebRTC 資源

Web 實時通信是一項激動人心的技術，它為創新打開了大門。開發人員現在可以增強用戶體驗并在其應用程序中提供上下文信息。以下是一些資源，您可以查看這些資源以查找有關 WebRTC 的更多信息。

Webrtc.org主頁，由 Google Chrome 團隊維護
使用 WebRTC 進行實時通信：Google I/O 2013 演示文稿
WebRTC GitHub 存儲庫

如果您想使用 WebRTC 與朋友進行簡單的會議或對話，以下是您可以免費使用的資源列表：

Tawk.com
Talky.io
Appear.in

WebRTC 挑戰

如果您想了解更多有關 WebRTC 生態系統的信息，請前往WebRTC 挑戰賽。這是Blacc Spot Media團隊發起的一項新計劃，旨在向 Web 和移動社區的開發人員介紹和教育 WebRTC 的好處和功能。

結論

這只是 Web 實時通信 (WebRTC) 的強大功能的一瞥??。隨著我們繼續這個系列，我們將深入探討 WebRTC 的末端和外在，它在市場中的地位以及大小公司如何已經開始利用它的力量。重要的是要記住，WebRTC不是一個開箱即用的解決方案，而是一個允許您增強應用程序的工具。敬請期待更多！

總結

以上是生活随笔為你收集整理的WebRTC 的黎明的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。