npm 包 wukong 使用教程-JavaScript中文网-JavaScript教程资源分享门户

wukong 是一款基于 WebRTC 的音视频通讯组件，它提供了丰富的 API 接口和灵活的扩展性，可以方便地集成到前端应用程序中。本文将介绍如何使用 wukong 来实现前端的音视频通讯需求。

安装 wukong

wukong 是一个 npm 包，可以在项目中使用 npm 或 yarn 进行安装。

npm install wukong --save

# 或者使用 yarn
yarn add wukong

初始化 wukong

在代码中引入 wukong 并进行初始化。

import Wukong from 'wukong';

const wukong = new Wukong({
  appId: 'your_app_id',
  appSecret: 'your_app_secret'
});

appId 和 appSecret 是你在 wukong 官网申请的应用程序 ID 和密钥。
在初始化 wukong 后，你可以通过 wukong.login 方法来进行登录操作。

wukong.login({
  user: 'your_user_id',
  token: 'your_user_token',
})

user 和 token 是你在应用程序中自定义的用户 ID 和用户 Token。

实现音频通话

加入房间

const roomId = 'your_room_id';

wukong.joinRoom(roomId, 'audio', 'host').then(() => {
  console.log('加入房间成功');
}).catch(e => {
  console.error('加入房间失败：', e);
})

roomId 是你要加入的房间 ID。
第二个参数是加入房间的类型，可以是 audio 或 video。
第三个参数是你在房间中的身份，可以是 host 或 guest。

推送本地音频流

-- -------------------- ---- -------
----- ----------- - - ------ ----- ------ ----- --
------------------------------------------------------------ -- -
  ----- --------------- - --------------------------------
  --------------------------------------- -- -
    -------------------------
  ---------- -- -
    --------------------------- ---
  --
---------- -- -
  --------------------------- ---
--

getUserMedia 方法用于获取本地媒体流。
createAudioTrack 方法用于创建本地音频轨道。
publish 方法用于将本地音频轨道推送到服务器，以便其他用户可以听到你的声音。

订阅远程音频流

当有其他用户加入房间并推送音频流时，你需要订阅其音频流，以便听到其声音。

-- -------------------- ---- -------
---------------------- ------- -- -
  -- ----------- --- -------- -
    ------------------------------- -- -
      -------------------------
    ---------- -- -
      --------------------------- ---
    --
  -
--

on('track-add', handler) 方法用于监听远程音视频轨道的添加事件。
在事件处理函数中，你可以检查音视频轨道的类型（kind 属性），然后调用 subscribe 方法来订阅远程音视频流。

实现视频通话

除了音频通话外，wukong 还支持视频通话。

加入房间

const roomId = 'your_room_id';

wukong.joinRoom(roomId, 'video', 'host').then(() => {
  console.log('加入房间成功');
}).catch(e => {
  console.error('加入房间失败：', e);
})

第二个参数是加入房间的类型，改为 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