wukong 是一款基于 WebRTC 的音视频通讯组件，它提供了丰富的 API 接口和灵活的扩展性，可以方便地集成到前端应用程序中。本文将介绍如何使用 wukong 来实现前端的音视频通讯需求。
安装 wukong
wukong 是一个 npm 包，可以在项目中使用 npm 或 yarn 进行安装。
--- ------- ------ ------ - ---- ---- ---- --- ------
初始化 wukong
在代码中引入 wukong 并进行初始化。
------ ------ ---- --------- ----- ------ - --- -------- ------ -------------- ---------- ----------------- ---
appId和appSecret是你在 wukong 官网申请的应用程序 ID 和密钥。- 在初始化 wukong 后，你可以通过
wukong.login方法来进行登录操作。
-------------- ----- --------------- ------ ------------------ --
user和token是你在应用程序中自定义的用户 ID 和用户 Token。
实现音频通话
加入房间
----- ------ - --------------- ----------------------- -------- --------------- -- - ---------------------- ---------- -- - ------------------------ --- --
roomId是你要加入的房间 ID。- 第二个参数是加入房间的类型，可以是
audio或video。 - 第三个参数是你在房间中的身份，可以是
host或guest。
推送本地音频流
----- ----------- - - ------ ----- ------ ----- --
------------------------------------------------------------ -- -
----- --------------- - --------------------------------
--------------------------------------- -- -
-------------------------
---------- -- -
--------------------------- ---
--
---------- -- -
--------------------------- ---
--getUserMedia方法用于获取本地媒体流。createAudioTrack方法用于创建本地音频轨道。publish方法用于将本地音频轨道推送到服务器，以便其他用户可以听到你的声音。
订阅远程音频流
当有其他用户加入房间并推送音频流时，你需要订阅其音频流，以便听到其声音。
---------------------- ------- -- -
-- ----------- --- -------- -
------------------------------- -- -
-------------------------
---------- -- -
--------------------------- ---
--
-
--on('track-add', handler)方法用于监听远程音视频轨道的添加事件。- 在事件处理函数中，你可以检查音视频轨道的类型（
kind属性），然后调用subscribe方法来订阅远程音视频流。
实现视频通话
除了音频通话外，wukong 还支持视频通话。
加入房间
----- ------ - --------------- ----------------------- -------- --------------- -- - ---------------------- ---------- -- - ------------------------ --- --
- 第二个参数是加入房间的类型，改为
video即可开始视频通话。
推送本地视频流
----- ----------- - - ------ ----- ------ ---- --
------------------------------------------------------------ -- -
----- --------------- - --------------------------------
--------------------------------------- -- -
-------------------------
---------- -- -
--------------------------- ---
--
---------- -- -
--------------------------- ---
--getUserMedia方法用于获取本地媒体流，这里包含了音频和视频轨道。createVideoTrack方法用于创建本地视频轨道。publish方法用于将本地视频轨道推送到服务器，以便其他用户可以看到你的视频。
订阅远程视频流
---------------------- ------- -- -
-- ----------- --- -------- -
----- ----------- - --------------------------------
--------------------- - --- ---------------------
-------------------- - -----
---------------------------------------
-------------------------
-
--- 在监听音视频轨道添加事件时，如果是视频轨道，就通过
document.createElement方法创建一个 video 标签，并将远程视频流绑定到其srcObject属性上。 - 将 video 标签添加到页面上后，远程的视频就可以显示在该标签中了。
总结
本文介绍了如何使用 wukong 进行前端的音视频通讯开发。我们依次介绍了 wukong 的安装、初始化、音频通话和视频通话的实现方法。希望本文对你了解 wukong 的使用有所帮助。
完整示例代码：https://github.com/wukongjs/wukong-sample-js/blob/master/src/index.js
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/82219