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

相关文章

在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

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》:本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h