实时通话

easemob-webrtc 支持实时通话功能。用户可以与好友进行实时视频聊天。

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

集成步骤如下:

1. 引入文件,其中easemob-webrtc单人音视频sdk依赖easemob-websdk即时通讯sdk,easemob-emedia为多人音视频sdk,支持npm安装和<script>标签两种方式引入:

a. 通过npm安装

npm install easemob-websdk --save
npm install easemob-webrtc --save
npm install easemob-emedia --save

b.通过<script>标签引入,WebIMConfig.js为webimSDK的配置文件

<script src="./WebIMConfig.js"></script> //webimSDK配置文件
<script src="../sdk/webimSDK.js"></script> //im
<script src="../sdk/EMedia_x1v1.js"></script> //单人音视频
<script src="../sdk/EMedia_sdk-dev.js"></script> //多人音视频

2. 初始化 WebRTC Call 。

var rtcCall = new WebIM.WebRTC.Call({
    connection: conn,
	mediaStreamConstaints: {
            audio: true,
            video: true
            /**
            * 修改默认摄像头,可以按照以下设置,不支持视频过程中切换
            * video:{ 'facingMode': "user" } 调用前置摄像头
            * video: { facingMode: { exact: "environment" } } 后置
            */
    },

    listener: {
		onAcceptCall: function (from, options) {
			console.log('onAcceptCall::', 'from: ', from, 'options: ', options);
		},
		//通过streamType区分视频流和音频流,streamType: 'VOICE'(音频流),'VIDEO'(视频流)
		onGotRemoteStream: function (stream, streamType) {
			console.log('onGotRemoteStream::', 'stream: ', stream, 'streamType: ', streamType);
			var video = document.getElementById('video');
			video.srcObject = stream;
		},
		onGotLocalStream: function (stream, streamType) {
			console.log('onGotLocalStream::', 'stream:', stream, 'streamType: ', streamType);
			var video = document.getElementById('localVideo');
			video.srcObject = stream;
		},
		onRinging: function (caller, streamType) {
                        console.log("onRinging", 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',null,true,true); //第三个参数为是否录制、第四个参数为是否合并,参数可以为空
    };
    // 音频呼叫对方
    var call = function () {
        rtcCall.caller = 'mengyuanyuan';
        rtcCall.makeVoiceCall('asdfghj',null,true,true);//用法同视频
    };
    // 关掉/拒绝视频
    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,在“内容设置”页面下拉,找到“摄像头”,选择“当网站要求使用您的摄像头时询问您(推荐)”。