文档首页/ 云客服/ 用户接入——网页版客户端集成 (RESTful)/ 代码使用示例-用户发起点击通话

更新时间：2023-02-28 GMT+08:00

代码使用示例-用户发起点击通话

发起点击通话的前提，是在接收用户消息时，通过了webRTC环境的校验。

当demo中出现了以下按钮，代表可以发起点击通话。

发起的方法，可以参考Footer.vue中的createCall方法。

/音视频通话
createCall(callType) {
    this.mode = callType === '0' ? 'audio' : 'video';
    let callbacks = function () {
        EventBus.$emit("startCallPoll");
    }
    this.$Chat.createClickToCall(callType, callbacks);
    this.isTalking = true;
    this.callType = callType;
}

该方法会调用createClickToCall接口，当方法得到成功返回后，会调用callbacks回调函数，回调函数中的方法EventBus.$emit("startCallPoll")意为发送一个startCallPoll事件。

事件的监听方法如下：

//轮询座席消息
EventBus.$on("startCallPoll", () => {
    this.getCallEvent();
});

会开始调用getClickToCallEvents接口，开始轮询点击通话事件。

//轮询获取通话事件
getCallEvent() {
    setTimeout(() => {
        this.$Chat.getClickToCallEvents(this.callbacks);
    }, 100);
}

这里面的callbacks方法如下，其中new AudioCodesUA()来自奥科的SDK

//音视频相关回调函数
callbacks(data) {
    if (data && data['resultCode'] === '0') {
        let eventId = data['eventId'];
        if (eventId) {
            if (eventId === 168101) { //已接入到座席
                const msgContent = data['content'];
                // eslint-disable-next-line no-undef
                this.webRtcConfig.phone = new AudioCodesUA();
                this.webRtcConfig.callTo = msgContent['accessCode']
                this.webRtcConfig.serverConfig.domain = msgContent['domain']
                this.webRtcConfig.serverConfig.addresses = msgContent['gwAddresses']
                this.webRtcConfig.account.user = msgContent['clickToCallCaller']
                this.webRtcConfig.account.displayName = msgContent['clickToCallCaller']
                this.initSipStack();
            } else if (eventId === 168102) {
                //that.$Chat.guiInfo('排队中....')
            } else if (eventId === 168106) { // 呼叫转移
                //that.$Chat.guiInfo('呼叫转移中')
            } else if (eventId === 168110) { // 呼叫释放
                this.isTalking = false
            } else if (eventId === 168103) { // 呼叫排队超时
                this.isTalking = false
            } else if (eventId === 168105) { // 呼叫失败
                this.isTalking = false
                this.$message({
                    message: '建立通话失败！',
                    type: 'warning'
                });
            }else {
                this.$message({
                    message: '建立通话失败！失败原因码为:' + eventId,
                    type: 'warning'
                });
                if (this.callType === '1'){
                    EventBus.$emit("videoDrop");
                }else {
                    EventBus.$emit("audioDrop");
                }
            }
        }
    } else {
        this.isTalking = false;
    }
    if (this.isTalking) {
        EventBus.$emit("startCallPoll");
    }
}

在收到168101事件代表已成功接入到座席，这时候会调用initSipStack方法参考如下。

initSipStack() {
    let phone = this.webRtcConfig.phone
    phone.setServerConfig(this.webRtcConfig.serverConfig.addresses,
        this.webRtcConfig.serverConfig.domain,
        this.webRtcConfig.serverConfig.iceServers)
 
    phone.setAccount(this.webRtcConfig.account.user,
        this.webRtcConfig.account.displayName,
        this.webRtcConfig.account.password)
 
    // Set phone API listeners
    let that = this
    phone.setListeners({
        loginStateChanged: function (isLogin, cause) {
            switch (cause) {
                case 'connected':
                    that.ac_log('phone>>> loginStateChanged: connected')
                    if (that.webRtcConfig.activeCall !== null) {
                        that.ac_log('Already exists active call')
                    } else {
                        if (that.mode === 'video') {
                            that.webRtcConfig.activeCall = phone.call(phone.VIDEO,
                                that.webRtcConfig.callTo)
                        } else {
                            that.webRtcConfig.activeCall = phone.call(phone.AUDIO,
                                that.webRtcConfig.callTo)
                        }
                        EventBus.$emit("showAudio");
                    }
                    break
                case 'disconnected':
                    that.ac_log('phone>>> loginStateChanged: disconnected')
                    if (phone.isInitialized()) {
                        that.ac_log('Cannot connect to SBC server')
                    }
                    if (that.callType === '1'){
                        EventBus.$emit("videoDrop");
                    }else {
                        EventBus.$emit("audioDrop");
                    }
                    that.ac_log('service disconnected')
                    break
                case 'login failed':
                    that.ac_log('phone>>> loginStateChanged: login failed')
                    break
                case 'login':
                    that.ac_log('phone>>> loginStateChanged: login')
                    break
                case 'logout':
                    that.ac_log('phone>>> loginStateChanged: logout')
                    break
            }
        },
 
        // eslint-disable-next-line no-unused-vars
        outgoingCallProgress: function (call, response) {
            that.ac_log('phone>>> outgoing call progress')
            EventBus.$emit("callMessage", "呼叫中");
        },
        // eslint-disable-next-line no-unused-vars
        callTerminated: function (call, message, cause, redirectTo) {
            that.ac_log('phone>>> call terminated callback, cause=%o', cause)
            if (call !== that.webRtcConfig.activeCall) {
                that.ac_log('terminated no active call')
                return
            }
            that.webRtcConfig.activeCall = null
            that.ac_log('Call terminated: ', cause)
            phone.deinit() // Disconnect from SBC server.
            that.isTalking = false // 轮询结束
            console.log('Stop polling, drop existing ClickToCall, reset CallDurationTimer and enable ClickToCall')
            that.guiClearVideoView()
        },
 
        // eslint-disable-next-line no-unused-vars
        callConfirmed: function (call, message, cause) {
            that.ac_log('phone>>> callConfirmed')
            // Show or hide video controls, according call property 'video'
 
            let hasVideo = call.hasVideo()
            that.guiToggleLocalVideo() // set local video according current check box setting.
            if (hasVideo) {
                EventBus.$emit("showVideo");
                EventBus.$emit("hideAudioImmediately");
            } else {
                EventBus.$emit("callMessage", "time");
            }
        },
 
        callShowStreams: function (call, localStream, remoteStream) {
            console.log('phone>>> callShowStreams')
            let remoteVideo = document.getElementById('remote_video')
            remoteVideo.srcObject = remoteStream // to play audio and optional video
        },
 
        // eslint-disable-next-line no-unused-vars
        incomingCall: function (call, invite) {
            console.log('phone>>> incomingCall')
            call.reject()
        },
 
        // eslint-disable-next-line no-unused-vars
        callHoldStateChanged: function (call, isHold, isRemote) {
            console.log('phone>>> callHoldStateChanged ' + isHold ? 'hold' : 'unhold')
        }
    })
    phone.init(false)
}

上述的方法来自奥科文档，具体使用方式可以参考奥科官网，搜索webrtc-web-browser-client-sdk-api-reference-guide了解。本处提示几个地方：

本方和对方的音视频展示，需要有一个video标签，可以参考VideoWindow.vue中的：

在通话建立时，sdk会调用callConfirmed方法

callConfirmed: function (call, message, cause) {
    that.ac_log('phone>>> callConfirmed')
    // Show or hide video controls, according call property 'video'
 
    let hasVideo = call.hasVideo()
    that.guiToggleLocalVideo() // set local video according current check box setting.
    if (hasVideo) {
        EventBus.$emit("showVideo");
        EventBus.$emit("hideAudioImmediately");
    } else {
        EventBus.$emit("callMessage", "time");
    }
}

会展示本方的音视频媒体。

存在对方媒体时会调用callShowStreams展示对方媒体。

callShowStreams: function (call, localStream, remoteStream) {
    console.log('phone>>> callShowStreams')
    let remoteVideo = document.getElementById('remote_video')
    remoteVideo.srcObject = remoteStream // to play audio and optional video
}

通话中断会调用callTerminated 方法。

callTerminated: function (call, message, cause, redirectTo) {
    that.ac_log('phone>>> call terminated callback, cause=%o', cause)
    if (call !== that.webRtcConfig.activeCall) {
        that.ac_log('terminated no active call')
        return
    }
    that.webRtcConfig.activeCall = null
    that.ac_log('Call terminated: ', cause)
    phone.deinit() // Disconnect from SBC server.
    that.isTalking = false // 轮询结束
    console.log('Stop polling, drop existing ClickToCall, reset CallDurationTimer and enable ClickToCall')
    that.guiClearVideoView()
}

因其他情况结束了通话流程会触发disconnected事件。

case 'disconnected':
    that.ac_log('phone>>> loginStateChanged: disconnected')
    if (phone.isInitialized()) {
        that.ac_log('Cannot connect to SBC server')
    }
    if (that.callType === '1'){
        EventBus.$emit("videoDrop");
    }else {
        EventBus.$emit("audioDrop");
    }
    that.ac_log('service disconnected')
    break

语音通话的结束按键方法可以参考MainContent.vue中的HangUp方法。

/**
 * 挂断点击通话
 */
hangUp() {
    if (this.hangUpButton) {
        EventBus.$emit("hangUp");
        clearInterval(this.talkTimeTask);
        this.hangUpButton = false;
        this.audioIn = "0";
        this.sec = 0;
        this.min = 0;
        let msg = {
            avatar: "zph",
            text: `<img src="` + audioPng + `" class="footer-image" alt="" style="height: 16px;margin-right: 5px;vertical-align: middle;margin-bottom: 2px">` + "通话时长" + this.infos,
            type: 0,
            time: this.$Utils.getDateString(),
            float: "right",
        };
        if (this.infos!=='呼叫中'){
            EventBus.$emit("pushInRecords", JSON.stringify(msg));
        }
        this.infos = "00:00";
    }
}

该方法会发送hangUp事件：EventBus.$emit("hangUp");在Footer.vue中有该事件的监听，会调用cancel方法。

//音视频挂断
EventBus.$on("hangUp", () => {
    this.cancel();
});

其中dropClickToCall会调用dropClickToCall接口。

cancel() {
    if (this.webRtcConfig.activeCall != null) {
        this.webRtcConfig.activeCall.terminate()
        this.webRtcConfig.activeCall = null
    }
    this.$Chat.dropClickToCall();
}

在视频通话中

挂断方法在VideoWindow.vue中的hangUpVideoCall。

2.       hangUpVideoCall(){
    if (this.videoView){
      EventBus.$emit("hangUp");
      this.videoView = false;
      let msg = {
        avatar: "zph",
        text: `<img src="`+videoPng+`" class="footer-image" alt="" style="height: 16px;margin-right: 5px;vertical-align: middle;margin-bottom: 2px">`+"通话时长"+this.infos,
        type: 0,
        time: this.$Utils.getDateString(),
        float: "right",
      };
      if (this.infos!=='呼叫中'){
        EventBus.$emit("pushInRecords", JSON.stringify(msg));
      }
      this.infos = "00:00";
      this.sec = 0;
      this.min = 0;
      clearInterval(this.talkTimeTask);
      this.talkTimeTask = "";
    }
}

该方法同样会发送hangUp事件，同音频挂断。

2. 停止发送本地视频VideoWindow.vue中的hangUpVideoCall

/**
 * 视频画面停止
 */
videoMuteEvent(){
  this.videoIsOff = !this.videoIsOff;
  EventBus.$emit("videoMute");
}

该方法会发送videoMute事件，在Footer.vue中监听。

EventBus.$on("videoMute", () => {
    this.videoMute()
});

videoMute() {
    let muted = this.webRtcConfig.activeCall.isVideoMuted()
    this.webRtcConfig.activeCall.muteVideo(!muted)
}

3. 视频静音方法VideoWindow.vue中的audioMuteEvent。

/**
 * 视频语音静音
 */
audioMuteEvent(){
  this.voiceIsOff = !this.voiceIsOff;
  EventBus.$emit("audioMute");
}

该方法会发送audioMute事件，在Footer.vue中监听。

EventBus.$on("audioMute", () => {
    this.audioMute()
})

audioMute() {
    let muted = this.webRtcConfig.activeCall.isAudioMuted()
    this.webRtcConfig.activeCall.muteAudio(!muted)
}

上一篇：代码使用示例-用户查询排队

下一篇：代码使用示例-用户评价

意见反馈

文档内容是否对您有帮助？

有帮助没帮助

提供反馈

提交成功！非常感谢您的反馈，我们会继续努力做到更好！您可在我的云声建议查看反馈及问题处理状态。

系统繁忙，请稍后重试

在使用文档中是否遇到以下问题

内容与产品页面不一致

内容不易理解

缺失示例代码

步骤不可操作

搜不到想要的内容

缺少最佳实践

意见反馈（选填）

0/500

请至少选择一项反馈信息并填写问题反馈

字符长度不能超过500

直接提交取消

如您有其它疑问，您也可以通过华为云社区问答频道来与我们联系探讨

智能客服提问云社区提问

代码使用示例-用户发起点击通话

相关文档

意见反馈

文档内容是否对您有帮助？

7*24

备案

专业服务

退订

建议反馈

售前咨询热线