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

本文将指导如何在10分钟内使用Vue2快速集成融云音视频会议服务。首先,需要注册融云开发者账户并开通服务,然后在开发环境中安装依赖,并遵循简单的使用步骤。注意,会议发起人和参与者需使用相同的appkey,tooken需在后台生成。
摘要由CSDN通过智能技术生成

预备开始

  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', //appkey
     token:'在开发者后台api调用那里点击获取tooken',   //tooken 
     config:{
       mediaServer:'', //公共配置
       //logLevel:''
     },
     meetingId:'', //会议号 
     crtRoom:null ,//room实例
     rtcClient:null,//初始化rtc
     remoteTracks:[] //tracks初始化
    }
  },
  mounted(){
    
    // 获取 IMLib 实例
    const im = RongIMLib.init({ appkey: this.appkey })
    // 监听 IMLib 连接状态变化
    im.watch({
      status (status) {
        // IM 连接状态变更通知
        console.log('watch--'+status)
      }
    })
    // 初始化 RCRTCClient
    this.rtcClient = im.install(installer, {
      /**
       * 自定义 MediaServer Url,公有云用户无需关注
       * @description
       * 1. 仅当 `location.hostname` 为 `localhost` 时,&#
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值