10分钟vue2快速集成融云音视频会议(web)

本文主要是介绍10分钟vue2快速集成融云音视频会议(web),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

预备开始

  1. 首先要注册融云开发者账户(集成客户端需要使用appkey)并开通音视频服务(30分钟之后生效 直接用会出问题)
  2. 在开发环境下创建的每个应用均可享有 10000 分钟免费体验时长。

一、安装依赖

# 安装 RongIMLib v4
npm install @rongcloud/imlib-v4 --save# 安装 RTCLib
npm install @rongcloud/plugin-rtc --save

二、使用步骤

<!--* @Description: * @Author: zhaiyzh* @Date: 2022-03-28 15:20:37* @LastEditTime: 2022-04-06 17:29:40
-->
<template><div class="hello"><input type="text" placeholder="会议号" :value="meetingId"/><button @click="joinRoom">进入会议</button><button @click="leaveRoom">离开房间</button><button @click="publishMicrophoneCamera">获取摄像头和麦克风权限</button><div id="rong-video-box"></div></div>
</template>
<script>
import * as RongIMLib from '@rongcloud/imlib-v4'
import { installer, RCRTCCode } from '@rongcloud/plugin-rtc'
import qs from 'qs'export default {name: '',data () {return {appkey:'写你融云开发者账号里的的appkey', //appkeytoken:'在开发者后台api调用那里点击获取tooken',   //tooken config:{mediaServer:'', //公共配置//logLevel:''},meetingId:'', //会议号 crtRoom:null ,//room实例rtcClient:null,//初始化rtcremoteTracks:[] //tracks初始化}},mounted(){// 获取 IMLib 实例const im = RongIMLib.init({ appkey: this.appkey })// 监听 IMLib 连接状态变化im.watch({status (status) {// IM 连接状态变更通知console.log('watch--'+status)}})// 初始化 RCRTCClientthis.rtcClient = im.install(installer, {/*** 自定义 MediaServer Url,公有云用户无需关注* @description

这篇关于10分钟vue2快速集成融云音视频会议(web)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/559515

相关文章

OpenCV在Java中的完整集成指南分享

《OpenCV在Java中的完整集成指南分享》本文详解了在Java中集成OpenCV的方法,涵盖jar包导入、dll配置、JNI路径设置及跨平台兼容性处理,提供了图像处理、特征检测、实时视频分析等应用... 目录1. OpenCV简介与应用领域1.1 OpenCV的诞生与发展1.2 OpenCV的应用领域2

Python Web框架Flask、Streamlit、FastAPI示例详解

《PythonWeb框架Flask、Streamlit、FastAPI示例详解》本文对比分析了Flask、Streamlit和FastAPI三大PythonWeb框架:Flask轻量灵活适合传统应用... 目录概述Flask详解Flask简介安装和基础配置核心概念路由和视图模板系统数据库集成实际示例Stre

SpringBoot集成MyBatis实现SQL拦截器的实战指南

《SpringBoot集成MyBatis实现SQL拦截器的实战指南》这篇文章主要为大家详细介绍了SpringBoot集成MyBatis实现SQL拦截器的相关知识,文中的示例代码讲解详细,有需要的小伙伴... 目录一、为什么需要SQL拦截器?二、MyBATis拦截器基础2.1 核心接口:Interceptor

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

SpringBoot集成EasyPoi实现Excel模板导出成PDF文件

《SpringBoot集成EasyPoi实现Excel模板导出成PDF文件》在日常工作中,我们经常需要将数据导出成Excel表格或PDF文件,本文将介绍如何在SpringBoot项目中集成EasyPo... 目录前言摘要简介源代码解析应用场景案例优缺点分析类代码方法介绍测试用例小结前言在日常工作中,我们经

Spring Boot集成Druid实现数据源管理与监控的详细步骤

《SpringBoot集成Druid实现数据源管理与监控的详细步骤》本文介绍如何在SpringBoot项目中集成Druid数据库连接池,包括环境搭建、Maven依赖配置、SpringBoot配置文件... 目录1. 引言1.1 环境准备1.2 Druid介绍2. 配置Druid连接池3. 查看Druid监控

在Spring Boot中集成RabbitMQ的实战记录

《在SpringBoot中集成RabbitMQ的实战记录》本文介绍SpringBoot集成RabbitMQ的步骤,涵盖配置连接、消息发送与接收,并对比两种定义Exchange与队列的方式:手动声明(... 目录前言准备工作1. 安装 RabbitMQ2. 消息发送者(Producer)配置1. 创建 Spr

如何在Spring Boot项目中集成MQTT协议

《如何在SpringBoot项目中集成MQTT协议》本文介绍在SpringBoot中集成MQTT的步骤,包括安装Broker、添加EclipsePaho依赖、配置连接参数、实现消息发布订阅、测试接口... 目录1. 准备工作2. 引入依赖3. 配置MQTT连接4. 创建MQTT配置类5. 实现消息发布与订阅

Linux如何快速检查服务器的硬件配置和性能指标

《Linux如何快速检查服务器的硬件配置和性能指标》在运维和开发工作中,我们经常需要快速检查Linux服务器的硬件配置和性能指标,本文将以CentOS为例,介绍如何通过命令行快速获取这些关键信息,... 目录引言一、查询CPU核心数编程(几C?)1. 使用 nproc(最简单)2. 使用 lscpu(详细信

SpringBoot集成LiteFlow工作流引擎的完整指南

《SpringBoot集成LiteFlow工作流引擎的完整指南》LiteFlow作为一款国产轻量级规则引擎/流程引擎,以其零学习成本、高可扩展性和极致性能成为微服务架构下的理想选择,本文将详细讲解Sp... 目录一、LiteFlow核心优势二、SpringBoot集成实战三、高级特性应用1. 异步并行执行2