在网站和应用程序中嵌入视频通话
视频通话功能可嵌入任何网站和应用程序
视频 SDK 无代码预构建应用程序。
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
只需几行代码，5 个步骤，5 分钟即可轻松将嵌入和添加的视频通话和聊天功能集成到任何网站和应用程序中，使 5000 名用户能够在网页和应用程序中进行视频聊天。
更新 1（2021 年 10 月 31 日）：更新了文章，添加了引脚屏幕和布局配置。
更新 2（2021 年 12 月 15 日）：更新了文章，添加了白板配置信息。
请查看官方指南：视频 SDK 预构建 SDK，了解更多信息。
我们还将实现一个演示，并使用 Video SDK 和rtc-js-prebuilt进行视频通话。
介绍
视频通话正逐渐成为人们的日常习惯。思科公司的数据显示，87%的员工表示，使用视频通话让他们感到彼此之间的联系更加紧密。
什么是视频通话嵌入？
视频 SDK提供嵌入式视频通话功能，预构建的 SDK 中只需几行代码即可将视频通话添加到您的网站和应用程序中，没有什么比这更简单了，只需 10 行代码即可获得最佳的视频聊天体验。
嵌入式视频通话功能无需编写显式代码即可集成实时通信 SDK。它支持所有现代 JavaScript 框架，例如 React JS、Vue 和 Angular，也支持原生 JavaScript。
- 每月10,000分钟免费通话时长
- 完全低代码、无服务器架构。
- 具备实时音频、视频和数据流功能的视频API
- 5000多名参与者支持
- 支持富媒体聊天。
- 支持高清和全高清屏幕共享。
- 在会议中播放实时视频
- 将其与 Facebook、Youtube 等社交媒体连接（支持 RTMP 输出）。
- 智能音箱开关
- 在云端录制您的会议
- 内置白板、投票和问答功能。
- 根据您的需求自定义用户界面。
我们先从预构建 SDK 的安装开始。在将其安装到您的应用程序中之前，请仔细阅读所有步骤。
它支持所有现代框架，例如纯 JavaScript、React JS、Vue JS 和 Angular JS。
视频通话功能可嵌入任何网站和应用程序
1：首先，请在app.videosdk.live注册。
2：生成 API 密钥和密钥。
执行
3：将脚本导入到您的 HTML 页面中
<script src="https://sdk.videosdk.live/rtc-js-prebuilt/0.3.21/rtc-js-prebuilt.js"></script>
注意：您也可以使用官方的 Npm 包：rtc-js-prebuilt
4：将预构建的视频通话 JavaScript 代码嵌入到您的 HTML 页面中
<script>
var script = document.createElement("script");
script.type = "text/javascript";
script.addEventListener("load", function (event) {
const meeting = new VideoSDKMeeting();
const config = {
name: "John Doe",
apiKey: "<API KEY>", // generated in Setup
meetingId: "milkyway", // enter your meeting id
containerId: null,
redirectOnLeave: "https://www.videosdk.live/",
micEnabled: true,
webcamEnabled: true,
participantCanToggleSelfWebcam: true,
participantCanToggleSelfMic: true,
chatEnabled: true,
screenShareEnabled: true,
pollEnabled: true,
whiteBoardEnabled: true,
raiseHandEnabled: true,
recordingEnabled: true,
recordingWebhookUrl: "https://www.videosdk.live/callback",
participantCanToggleRecording: true,
brandingEnabled: true,
brandLogoURL: "https://picsum.photos/200",
brandName: "Awesome startup",
poweredBy: true,
participantCanLeave: true, // if false, leave button won't be visible
// Live stream meeting to youtube
livestream: {
autoStart: true,
outputs: [
// {
// url: "rtmp://x.rtmp.youtube.com/live2",
// streamKey: "<STREAM KEY FROM YOUTUBE>",
// },
],
},
whiteboardEnabled: true,
permissions: {
askToJoin: false, // Ask joined participants for entry in meeting
toggleParticipantMic: true, // Can toggle other participant's mic
toggleParticipantWebcam: true, // Can toggle other participant's webcam
drawOnWhiteboard: true,
toggleWhiteboard: true,
},
joinScreen: {
visible: true, // Show the join screen ?
title: "Daily scrum", // Meeting title
meetingUrl: window.location.href, // Meeting joining url
},
};
meeting.init(config);
});
script.src =
"https://sdk.videosdk.live/rtc-js-prebuilt/0.1.21/rtc-js-prebuilt.js";
document.getElementsByTagName("head")[0].appendChild(script);
</script>
5：在代码中插入 API 密钥以运行它
apiKey: "<API-KEY>"
注意：要限制在其他域中使用您的 API 密钥，您可以添加域 URL，这将阻止在其他域中使用您的 API 密钥。
运行演示
要运行演示，您需要使用本地服务器。根据您的环境，XAMPP 或 IIS 可能是最佳选择。我们将使用 live-server 包来运行一个简单的 HTTP 服务器。
$ npm install -g live-server
$ live-server --port=8000
然后在您的网络浏览器中打开http://localhost:8000。
会议记录
要录制会议，您必须先在配置中启用录制功能。
- recordingEnabled：设置
true或false禁用在线录制。 - recordingWebhookUrl：回调 URL，通常用于将录音详细信息存储在数据库中。
recordingEnabled: true,
recordingWebhookUrl: "https://www.videosdk.live/callback",
启用录制功能后，屏幕上会出现录制按钮。点击该按钮即可开始和停止录制。
启用白板
要启用白板功能，您需要配置白板标志和权限。
- whiteboardEnabled：如果启用
true，则会启用白板。 - 权限：您还可以使用布尔值设置谁可以
drawOnWhiteboard执行此操作的权限。toggleWhiteboard
whiteboardEnabled: true,
permissions: {
drawOnWhiteboard: true,
toggleWhiteboard: true,
},
在社交媒体上直播
要启用直播功能，您需要配置流密钥和 URL 列表。我们目前仅支持启用 RTMP 协议的广播。
- autoStart：如果启用
true，会议开始时将自动触发重新流传输。
livestream: {
autoStart: true,
outputs: [
// {
// url: "rtmp://x.rtmp.youtube.com/live2",
// streamKey: "<STREAM KEY FROM YOUTUBE>",
// },
],
}
针屏
要启用密码保护屏幕，您需要配置pin属性。它包含两个主要属性：
- 允许：如果为真，则该参与者可以固定或取消固定会议中的其他参与者；默认情况下，该选项设置为假。
- 布局：可以是网格、聚光灯或侧边栏中的任何一种，默认设置为网格。
更好地理解布局
网格
- 网格布局：如果没有固定参会者，则此布局为默认布局，外观与普通会议网格布局相同。当有参会者被固定后，该参会者将移动到主屏幕网格的顶部，位于所有未被固定参会者的上方。
侧边栏
- 侧边栏：此布局包含一个主屏幕视图和一个侧边栏网格布局。只有被置顶的参与者才会显示在此布局中，所有未被置顶的参与者都不会显示在此布局中。如果多个参与者被置顶，则第一个被置顶的参与者将显示在主屏幕布局中，其余被置顶的参与者将显示在侧边栏中。
聚光灯
- 焦点布局：此布局仅包含主屏幕布局，多个置顶参与者将显示在主屏幕视图中。与侧边栏布局相同，也只有置顶参与者显示在主屏幕上。
pin: {
allowed: true,
layout: "SPOTLIGHT",
}
结论
本文介绍了如何使用 JavaScript 实现视频聊天。您可以根据需要修改代码中的一些参数。以上是对 Video SDK 预构建 SDK 的简要介绍。
这是同一内容的视频版本。
希望这篇博客能帮助您了解视频 SDK 的视频通话功能。更多信息请访问视频 SDK 的官方文档。
官方 Github
videosdk-live / videosdk-rtc-js-prebuilt-embedded-example
使用纯 JS 和 HTML 的低代码预构建视频 SDK 示例。
<p>
视频 SDK 无代码预构建应用程序。
此仓库已弃用。请参考https://github.com/videosdk-live/videosdk-rtc-prebuilt-examples
那是什么？
此代码示例演示了使用Video SDK RTC Prebuilt SDK和Video SDK RTC JS SDK构建的一对一和群组视频通话应用程序。
- 专为无服务器视频通话体验而打造。
- 用少量代码即可扩展到 5000 名参与者。
- 每月赠送10000分钟通话时长。
- 内置视频和音频质量优化功能。
- 内置聊天投票、白板、问答功能。
特征
- 完全低代码、无服务器架构。
- 具备实时音频、视频和数据流功能的视频API
- 5000多名参与者支持
- 支持富媒体聊天。
- 支持高清和全高清屏幕共享。
- 在会议中播放实时视频
- 将其与 Facebook、Youtube 等社交媒体连接（支持 RTMP 输出）。
- 智能音箱开关
- 在云端录制您的会议
- 内置白板、投票和问答功能。
- 根据您的需求自定义用户界面。
浏览器支持
访问我们的……
文章来源：https://dev.to/video-sdk/video-calling-in-javascript-1pb4官方 Github
videosdk-live / videosdk-rtc-js-prebuilt-embedded-example
使用纯 JS 和 HTML 的低代码预构建视频 SDK 示例。
<p>
视频 SDK 无代码预构建应用程序。
此仓库已弃用。请参考https://github.com/videosdk-live/videosdk-rtc-prebuilt-examples
那是什么？
此代码示例演示了使用Video SDK RTC Prebuilt SDK和Video SDK RTC JS SDK构建的一对一和群组视频通话应用程序。
- 专为无服务器视频通话体验而打造。
- 用少量代码即可扩展到 5000 名参与者。
- 每月赠送10000分钟通话时长。
- 内置视频和音频质量优化功能。
- 内置聊天投票、白板、问答功能。
特征
- 完全低代码、无服务器架构。
- 具备实时音频、视频和数据流功能的视频API
- 5000多名参与者支持
- 支持富媒体聊天。
- 支持高清和全高清屏幕共享。
- 在会议中播放实时视频
- 将其与 Facebook、Youtube 等社交媒体连接（支持 RTMP 输出）。
- 智能音箱开关
- 在云端录制您的会议
- 内置白板、投票和问答功能。
- 根据您的需求自定义用户界面。
浏览器支持
访问我们的……