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

不宅的程序园

已于 2022-04-22 14:55:15 修改

阅读量3.7k

点赞数

分类专栏：融云音视频 vue学习音视频会议web 文章标签：实时音视频音视频会议 vue音视频会议 web音视频会议融云融云web音视频会议

于 2022-04-06 17:47:54 首次发布

本文链接：https://blog.csdn.net/zyz_3362/article/details/123994904

版权

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

摘要由CSDN通过智能技术生成

预备开始

首先要注册融云开发者账户（集成客户端需要使用appkey)并开通音视频服务（30分钟之后生效直接用会出问题）
在开发环境下创建的每个应用均可享有 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` 时，&#