前期准备

如果你的网站使用的是 React 框架，建议使用 React package。如果是其他框架或原生 JavaScript，可以使用 web 组件版的 Web UIKit。

另外，注册一个声网开发者帐户（详细步骤可参考这篇文章）。注意：可以在 GitHub 获取完整项目：React，JavaScript。

React 的设置

首先，从 GitHub 示例获得代码，在该示例的基础上搭建项目。然后，运行 npm i && npm start 来开启 React 服务器，访问 localhost:3000 上的 hello world 应用。

JavaScript 的设置

下载示例项目，打开 index.html 文件。

访问查询参数

假如我们把网站托管在 example.com 上，现在我们想让一个用户加入 test 聊天室，首先，我们要创建一个链接 example.com/?channel=test ，通过这个链接把数据添加到查询参数上（URL 里 ? 标识后边的 key=value 对)。我们可以得到多个由 & 字符分隔的参数: example.com/?channel=test&token=123

const parseParams = () => {
    const params = new URLSearchParams(window.location.search);
    const object = {};
    params.forEach((value, key) => {
      object[key] = value;
    })
    console.log('params', object)
    return object;
  };

然后，创建一个 parseParams 函数，这个函数使用 URLSearchParams 函数从 URL 返回查询函数。接下来，我们为对象添加 key=value 对并将其返回。

在 React 框架中用 Web UIKit 使用查询参数

<AgoraUIKit
  rtcProps={{
    appId:  '<Agora App ID>',
    channel:  '<Default Channel>',
    token:  null,
    role:  'host'
    layout:  layout.grid,
    ...parseParams()
  }}
  callbacks={{
    EndCall: () =>  setVideocall(false),
  }}
/>

我们可以使用 rtcProps 内的扩展（… ）操作符来调用 parseParams 函数。即使缺少查询参数，这个模式也可以提供合适的默认值。而且在这个模式下，我们可以重写任一 rtcProps ，也可以传递其他该模式支持的道具，比如 role 、layout、activeSpeaker 等。

在原生 JS 中用 Web UIKit 使用查询参数

<script>
  const  el = document.querySelector('agora-react-web-uikit');
  const  params = new  URLSearchParams(window.location.search);
  params.forEach((value, key) => {
    el[key] = value;
  })
</script>

大家可以使用 querySelector 挑选 web 组件，然后更新对象属性。我迭代了代码段里的参数，可以直接更新 URL 里的所有值（跳过parseParams 函数）。

注意：终端用户只需一些简单的操作就可以在 URL 里修改查询参数。如果你想把数据直接传递到应用上，应该审查用户输入。例如，“audience” 用户使用下列代码就可以轻松变成 “host” ，以“ 主持人”的身份加入聊天室。如果不希望出现这种情况，一定要审查用户输入。

生成链接

想要快捷生成专属链接，可以用 JavaScript 中的 Date 对象来使用当前时间戳。下面是创建新聊天室函数：

const  createLink = () => {
  const  ts = new  Date().getTime()
  let  link = window.location.origin + '/?channel=' + ts
  return  link
}

总结

如果你在学习这篇教程或使用声网 Web UIKit 时遇到任何问题，可以随时在 GitHub 仓库提出功能需求或报告 bug~

原文作者：Ekaansh Arora
原文链接：https://www.agora.io/en/blog/create-meeting-urls-for-an-agora-video-call-with-the-web-uikit/