差别
这里会显示出您选择的修订版和当前版本之间的差别。
两侧同时换到之前的修订记录 前一修订版 后一修订版 | 前一修订版 | ||
im:web:draft:videocall [2019/03/22 08:59] 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> |