差别

这里会显示出您选择的修订版和当前版本之间的差别。

到此差别页面的链接

im:web:draft:videocall [2019/03/11 06:54] (当前版本)
jk 创建
行 1: 行 1:
 +====== 实时通话 ======
  
 +Web IM SDK 支持实时通话功能。用户可以与好友进行实时视频聊天。
 +
 +注意:视频通话功能只支持https+Webkit浏览器。
 +
 +===== 集成步骤 =====
 +
 +集成步骤如下:
 +
 +1. 在html中引入以下文件。其中,前三个为集成Web IM SDK必须引用的文件,后两个为集成即时视频功能需要引用的文件。
 +
 +<code html>
 +<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>​
 +
 +<!-- EMedia_x1v1 相当于adapter.js webrtc-1.4.6.js -->
 +<!--
 +<script src="​https://​github.com/​easemob/​webim/​tree/​master/​webrtc/​dist/​EMedia_x1v1.js"></​script>​
 +-->
 +
 +<script src="​../​webrtc/​dist/​adapter.js"></​script>​
 +<script src="​../​webrtc/​dist/​webrtc-1.4.6.js"></​script>​
 +</​code>​
 +
 +2. 初始化WebRTC Call。
 +
 +<code javascript>​
 +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);
 + },
 + //​通过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) {
 + 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);​
 +        }
 +     }
 +});
 +</​code>​
 +
 +3. 调用RTC接口。
 +
 +<code javascript>​
 +    // 视频呼叫对方
 +    var call = function () {
 +        rtcCall.caller = '​mengyuanyuan';​
 +        rtcCall.makeVideoCall('​asdfghj'​);​
 +    };
 +    // 音频呼叫对方
 +    var call = function () {
 +        rtcCall.caller = '​mengyuanyuan';​
 +        rtcCall.makeVoiceCall('​asdfghj'​);​
 +    };
 +    // 关掉/​拒绝视频
 +    var endCall = function () {
 +        rtcCall.endCall();​
 +    }
 +    // 接受对方呼叫
 +    var acceptCall = function () {
 +        rtcCall.acceptCall();​
 +    }
 +</​code>​
 +
 +4. 绑定事件。
 +
 +<code javascript>​
 +document.getElementById('​rtCall'​).onclick = call;
 +document.getElementById('​rtEndCall'​).onclick = endCall;
 +document.getElementById('​rtAcceptCall'​).onclick = acceptCall;
 +</​code>​
 +
 +===== 常见问题 =====
 +
 +Q:发起视频聊天时,收到提示“An error occurred when calling webrtc”,怎么办?
 +
 +A:请开启浏览器使用摄像头的权限。以Chrome为例,在地址栏中输入chrome:​%%//​%%settings/​content,在“内容设置”页面下拉,找到“摄像头”,选择“当网站要求使用您的摄像头时询问您(推荐)”。
 +
 +----
 +<WRAP group>
 +<WRAP half column>
 +上一页:[[im:​web:​basics:​chatroom|聊天室管理]]
 +</​WRAP>​
 +
 +<WRAP half column>
 +下一页:[[im:​web:​basics:​multiuserconference|多人实时通话]]
 +</​WRAP>​
 +</​WRAP>​