实时通话

Web IM SDK 支持实时通话功能。用户可以与好友进行实时视频聊天。

注意:视频通话功能只支持https+Webkit浏览器。

集成步骤

集成步骤如下:

1. 在html中引入以下文件。其中,前三个为集成Web IM SDK必须引用的文件,后两个为集成即时视频功能需要引用的文件。

<script src="../demo/javascript/dist/webim.config.js"></script>
<script src="./dist/strophe-1.2.8.min.js"></script>
<script src="./dist/websdk-1.4.6.js"></script>
<script src="../webrtc/dist/adapter.js"></script>
<script src="../webrtc/dist/webrtc-1.4.6.js"></script>

2. 初始化WebRTC Call。

var rtcCall = new WebIM.WebRTC.Call({
    connection: conn,
	mediaStreamConstaints: {
            audio: true,
            video: true
    },

    listener: {
	    onAcceptCall: function (from, options) {
        console.log('onAcceptCall::', 'from: ', from, 'options: ', options);
	    },
	    onGotRemoteStream: function (stream) {
	        console.log('onGotRemoteStream::', 'stream: ', stream);
        var video = document.getElementById('video');
        video.src = window.URL.createObjectURL(stream);
        },
        onGotLocalStream: function (stream) {
	        console.log('onGotLocalStream::', 'stream:', stream);
            var video = document.getElementById('localVideo');
            video.src = window.URL.createObjectURL(stream);
        },
        onRinging: function (caller) {
            console.log('onRinging::', 'caller:', caller);
        },
        onTermCall: function (reason) {
	        console.log('onTermCall::');
            console.log('reason:', reason);
        },
        onIceConnectionStateChange: function (iceState) {
            console.log('onIceConnectionStateChange::', 'iceState:', iceState);
        },
        onError: function (e) {
            console.log(e);
        }
     }
});

3. 调用RTC接口。

// 视频呼叫对方
    var call = function () {
        rtcCall.caller = 'mengyuanyuan';
        rtcCall.makeVideoCall('asdfghj');
    };
    // 关掉/拒绝视频
    var endCall = function () {
        rtcCall.endCall();
    }
    // 接受对方呼叫
    var acceptCall = function () {
        rtcCall.acceptCall();
    }

4. 绑定事件。

document.getElementById('rtCall').onclick = call;
document.getElementById('rtEndCall').onclick = endCall;
document.getElementById('rtAcceptCall').onclick = acceptCall;

常见问题

Q:发起视频聊天时,收到提示“An error occurred when calling webrtc”,怎么办?

A:请开启浏览器使用摄像头的权限。以Chrome为例,在地址栏中输入chrome://settings/content,在“内容设置”页面下拉,找到“摄像头”,选择“当网站要求使用您的摄像头时询问您(推荐)”。


上一页:聊天室管理

下一页:工具类说明