前言
随着 Web 技术的日益成熟,WebRTC 技术也逐渐走入人们的视野。WebRTC 技术是浏览器本身提供的一种实现互联网实时通信的技术,可以用于视频会议、音频通话、实时数据传输等场景。
为了更好地使用 WebRTC 技术,我们可以借助 Web Components 技术来实现一个 WebRTC 客户端,以达到更加灵活和可复用的效果。本篇文章将详细介绍如何利用 Web Components 技术实现 WebRTC 客户端。
WebRTC 概述
WebRTC 技术是一种能够在浏览器上实现点对点通信的技术,它包含了三个部分:
- 媒体捕获:摄像头、麦克风等设备获取媒体流;
- 媒体传输:将媒体流传输至远程设备;
- 媒体处理:对传输过来的媒体流进行处理和展示。
以上三个部分都可以通过 WebRTC 技术来实现。不过本文主要介绍如何实现媒体捕获和传输两个部分。
Web Components 概述
Web Components 技术是用来创建可复用、可组合的组件的技术,相当于是一种浏览器原生支持的组件化编程的实现方案。Web Components 技术包含以下四个部分:
- Custom Elements:允许开发者创建定制的 HTML 元素;
- Shadow DOM:允许开发者创建隔离的 DOM 子树;
- HTML Templates:允许开发者定义 HTML 模板;
- HTML Imports:允许开发者引入 HTML 片段到当前文档中。
本文将会利用其中的 Custom Elements 和 Shadow DOM 来创建一个 WebRTC 客户端的组件。
实现过程
实现思路
根据 WebRTC 向远程设备传输媒体流的流程,大致可以分为以下几个步骤:
- 获取本地设备的媒体流(如摄像头、麦克风等);
- 将媒体流传输给远程设备;
- 接收远程设备传输过来的媒体流;
- 展示接收到的媒体流。
因此,我们需要实现以下四个功能:
- 获取媒体流;
- 传输媒体流;
- 接收媒体流;
- 展示媒体流。
创建 Custom Elements
首先我们需要创建一个用来展示视频的组件,可以通过 Custom Elements 来实现。
<video-player></video-player>
在 JavaScript 中定义上述的自定义元素:
class VideoPlayer extends HTMLElement { // ... } customElements.define('video-player', VideoPlayer);
在上述 class
中我们可以定义一些需要用到的属性和方法:
-- -------------------- ---- ------- ----- ----------- ------- ----------- - ------------- - -- ------------------- -- --------------------- -------- -- --------- -- -- ------ ---- ----- ---------- - ------------------- ----- ------ --- -- -- ----- --- ----- ----- - -------------------------------- -------------- - ----- ----------------- - ----- ----------------- - ------- ------------------ - ------- -- - ----- ----- ------ --- -- ------------------------------ ---------- - ------ - -- --- -
到目前为止,我们已经创建了一个用来展示视频的组件,接下来我们需要实现媒体流的相关功能。
获取媒体流
首先我们需要获取本地设备的媒体流:
-- -------------------- ---- ------- ----- ----------- ------- ----------- - ----- ---------------- - ----- ----------- - - ------ ----- ------ ----- -- --- ------------ --- - ----------- - ----- ------------------------------------------------- - ----- ----- - ------------------- - ------ ------------ - ----- ---------------- - ---------------- - ----- ---------------------- -------------------- - ----------------- - ----- --------------- - ------------------------------------------ -- -------------- ---------------- - ---------- -------------------- - ----- - -- --- -
在 getMediaStream
方法中,我们使用 navigator.mediaDevices.getUserMedia
获取媒体流,这里设定了 audio
和 video
两个约束条件,代表需要获取音频和视频两个媒体流。
在 startCapturing
方法中,我们获取本地媒体流,并将它绑定到 video 元素上之后展示出来。
在 stopCapturing
方法中,我们停止捕获媒体流并清空 video 元素的 srcObject
属性。
传输媒体流
接下来我们需要将媒体流传输给远程设备。这里我们可以用 WebSocket 技术来实现。
-- -------------------- ---- ------- ----- ----------- ------- ----------- - ------------- - -------- -- --- ----------- - --- --------------------------------- --------------------- - ----- -- - ----- ---- - ----------------------- -- ---------- --- -------- - ----------------------------- - ---- -- ---------- --- --------- - ------------------------------- - ---- -- ---------- --- ------------ - ------------------------------------- - -- - ----- ----------- - ------------------- - --- -------------------- ------------------------------------------ -- - ------------------------------------ --- ----- ----- - ----- ---------------------------------- ----- ----------------------------------------------- --------------------------------- ----- -------- ------ --------------- ---- - ----- ------------ - ----- ------ - ----- ----------------------------------- ----- ------------------------------------------------ --------------------------------- ----- --------- ------- ---------------- ---- - ---------------------- - ----- ----- - --- --------------------------------- ------------------- - --- -------------------- ------------------------------------------ -- - ----------------------------------- ------------------ --- ------------------------------------------------ ------------------ - ------------------------ - ----- ------ - --- ---------------------------------- ------------------------------------------------- - -------------------------- - ----- ------------ - --- --------------------------- -------------------------------------------------- - -- --- -
在上述代码中,我们定义了以下一些方法:
sendOffer
:创建 Peer Connection 并向远程设备发送 offer;sendAnswer
:创建 answer 并发送给远程设备;handleOffer
:将收到的 offer 设置为远程描述并发送 answer;handleAnswer
:将远程设备的 answer 设置为本地描述;handleCandidate
:将收到的 candidate 添加到 Peer Connection 中。
此处仅展示了通过 WebSocket 技术传输媒体流的部分,具体接入和后台开发根据实际情况进行修改。
展示媒体流
最终,我们需要实现展示收到的媒体流的功能。
-- -------------------- ---- ------- ----- ----------- ------- ----------- - -- --- ----- ---------------- - ------------------- - --- -------------------- ----- ------ - --- -------------- --------------------------- - ----- -- - ----------------------------- -- ----- ----------------------------------------------------------------- ----- --------------------------------------------- ------------------------------------ --------------------------------- ----- --------- ------- ---------------------------------------------- ---- -------------------- - ------- - -- --- -
对于收到的媒体流,我们首先需要创建一个新的 MediaStream
对象,之后将事件中的媒体轨添加到该对象,并将该对象绑定到 video 元素上即可完成展示的功能。
整合代码
将上述代码整合在一起,我们就可以实现一个完整的 WebRTC 客户端了。
-- -------------------- ---- ------- ----- ----------- ------- ----------- - ------------- - -------- -- -- ------ ---- ----- ---------- - ------------------- ----- ------ --- -- -- ----- --- ----- ----- - -------------------------------- -------------- - ----- ----------------- - ----- ----------------- - ------- ------------------ - ------- -- - ----- ----- ------ --- -- ------------------------------ ---------- - ------ ----------- - --- --------------------------------- --------------------- - ----- -- - ----- ---- - ----------------------- -- ---------- --- -------- - ----------------------------- - ---- -- ---------- --- --------- - ------------------------------- - ---- -- ---------- --- ------------ - ------------------------------------- - -- - ----- ---------------- ----- ----- ---------------- ----- ----- --------------- ----- ----- ----------- ----- ----- ------------ ----- ---------------------- ----- ------------------------ ----- -------------------------- ----- ----- ---------------- ----- - ------------------------------------- -------------
使用示例
在 HTML 中使用我们所实现的 video-player 组件:
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------- -------------- ------- ------ ----------------------------- ------- ----------------------------- ------- --------------------------- -------- ----- ----------- - --------------------------------------- ----- -------- ------- - ----- ----------------------------- ----- ------------------------ - ----- -------- ------ - ----- ---------------------------- ----- ----------------------------- - -------------------------------------------------------------- ------- ------------------------------------------------------------- ------ --------- ------- -------
在 JavaScript 中,首先获取到 video-player 元素,调用其 startCapturing
方法可以启动媒体流捕获,sendOffer
方法可以通过 WebSocket 技术将本地媒体流的描述传输给远程设备。对于停止媒体捕获,为了保证程序正常退出,我们需要在停止前发送所有的 candidates,具体实现可以自行添加。
总结
本文介绍了如何利用 Web Components 技术来实现 WebRTC 客户端的技术要点和实现过程。Web Components 技术能够帮助我们实现一些可复用、可组合的组件,将不同的功能分离出来,达到更好的可维护性和重用性。而 WebRTC 技术则可以实现浏览器上的实时通信功能,具有很广泛的应用场景。最终通过实现一个完整的 WebRTC 客户端来演示这些技术的应用。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65b7c84dadd4f0e0ff058546