Web集成1对1通话

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

注意： 视频通话功能只支持 https+Webkit 浏览器。 不支持使用http/socks5 代理。

集成步骤如下：

说明：easemob-webrtc包含了easemob-emedia，easemob-webrtc为单人+多人sdk，easemob-emedia为多人sdk，当然也可以用easemob-emedia自己去实现单人1v1的场景，两个sdk只需要引入其中一个。

1. 引入文件，其中easemob-webrtc音视频sdk，依赖easemob-websdk即时通讯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 SDK
<script src="../sdk/EMedia_x1v1.js"></script> 或者 <script src="../sdk/EMedia_sdk-dev.js"></script> //音视频SDK

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 config = {
        push: true, // 对方不在线时是否推送
        timeoutTime: 30000, // 超时时间
        txtMsg: 'I gave you a video call.', // 给对方发送的消息
        pushMsg: 'user is calling you' //推送内容
    };
    var call = function () {
        rtcCall.caller = 'mengyuanyuan';
        rtcCall.makeVideoCall('asdfghj',null,true,true,config); //第三个参数为是否录制、第四个参数为是否合并，参数可以为空
    };
    // 音频呼叫对方
    var call = function () {
        rtcCall.caller = 'mengyuanyuan';
        rtcCall.makeVoiceCall('asdfghj',null,true,true,config);//用法同视频
    };
    // 关掉/拒绝视频
    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，在“内容设置”页面下拉，找到“摄像头”，选择“当网站要求使用您的摄像头时询问您（推荐）”。