remote-instruction v3.1.13

使用指南

根据以下方式引入即可完成项目的接入

安装

通过 npm 引入

npm install --save remote-instruction

remote-instruction 同时提供 commonJS 和 ES modules 两种格式的打包文件，易于和常见的打包工具配合使用。

兼容性

由于使用 MutationObserver API，rrweb 不支持 IE11 以下的浏览器。可以从这里找到兼容的浏览器列表。

快速开始

客服版本

// 初始化 客户端ui
import { GuidanceUI } from 'remote-instruction'
new GuidanceUI({roomId:this.roomId}).initUI()

// 初始化 客服后台
import { GuidanceClient } from 'remote-instruction'
this.client = new GuidanceClient({
    dom: document.getElementById('player'),
})
this.client.initObserver({
    connect: (socketId) => {
        console.log('已上线')
        console.log('connect', socketId)
    },
    disconnect: () => {
        console.log('已下线')
    },
    online: (id) => {
        console.log('用户上线', id)
    },
    offline: (id) => {
        console.log('用户下线', id)
    },
    roomCreated: (id) => {
        console.log('房间已创建', id)
    },
    roomCreatedFail: (id) => {
        console.log('房间创建失败', id)
    },
    roomDisbanded: () => {
        console.log('房间解散')
    },
    error: (error) => {
        console.log('error', error)
    },
})

拍多赚版本

被观察者/操作者

import { RRWebClient } from 'remote-instruction'
const client = new RRWebClient('roomid')

场景一：客服主动指导用户操作，用户初始化连接

场景二：用户主动需要客服指导，通过调用此方法进行连接

client.initObservable({
    joinedRoom:(roomId)=>{
        console.log('客服已上线，加入房间',roomId)
    },
    disconnect:(roomId)=>{
        console.log('断开远程连接',roomId)
    },
    replay:(roomId)=>{
        console.log('开始屏幕共享到房间',roomId)
    },
    offline: (roomId) => {
        console.log('客服下线',roomId)
    },
    serverBusy: () => {
        console.log('客服繁忙，等待客服上线～')
    },
    startInstruction: () => {
        console.log('客服开始指导～')
    },
    rejectInstruction: () => {
        console.log('客服拒绝指导～')
    }
})

暂停录屏

client.pauseRecord()

继续录屏

client.startRecord()

观察者/指导者/客服

观察者必须指定一个dom节点用于查看操作者的实时录屏

const client = new RRWebClient({
    roomId: 'roomid',
    dom: document.getElementById('player')
})

初始化客户端后，可以通过以下方式进入房间观察操作者内容

client.initObserver({
    connect: (socketId) => {
        console.log('已上线')
        console.log('connect', socketId)
    },
    online: (id) => {
        console.log('用户上线', id)
    },
    offline: (id) => {
        console.log('用户下线', id)
    },
    error: (error) => {
        console.log('error', error)
    },
    roomUpdate: (roomList) => {
        console.log('房间更新', roomList)
    }
})

离开房间

client.leave()

切换房间

观察者/指导者/客服切换房间指导

client.switchObservable(id)

拒绝指导

client.rejectObservable(socketId)

继续语音/暂停语音

client.handleUnpublish()

client.handlePublish()