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