appcan利用天翼rtc实现视频通话功能

注：本文已发布超过一年，请注意您所使用工具的相关版本是否适用

本代码是在示例代码的基础上进行了一些简化，并将其单独做了一个 vedio.js 文件，只需要两个按钮，即可完成接听和拨打的需求

attention：

  1. 默认将用户名设置成 1234，拨打的帐号设置成 4321，如果需要使用一个 app 实现的话，具体逻辑自行修改

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
/**
 * 视频功能实现
 * 使用天翼rtc插件实现
 */

/**
 * 初始化，在页面初始化方法中调用这个函数
 * 定义天翼rtc回调函数
 * 同一个页面中  appcan.ready可以存在多个，不会冲突;而uexOnload不行...
 */
function rtcInit() {
  uexESurfingRtc.onGlobalStatus = upgateGlobalStatus; //全局监控
  uexESurfingRtc.cbLogStatus = upgateLogStatus; //登陆回调
  uexESurfingRtc.cbCallStatus = updateCallStatus; //呼叫回调
  //uexESurfingRtc.cbRemotePicPath = showRemotePicPath;//截屏回调

  /*----------配置天翼rtc插件的appkey & appid---------*/
  appId = "70392";
  appKey = uexESurfingRtc.setAppKeyAndAppId(appKey, appId); //输入你自己的appKey;
}

/**
 * 登陆回调，返回是否登陆成功
 */
function upgateLogStatus(opCode, dataType, data) {
  //alert(data);
  if ("OK" == data.substring(0, 2)) {
    var status = data.split("OK:")[1];
    var showStr = "";
    if ("LOGIN" == status) {
      showStr = "登陆成功，点击退出";
      $("#login").attr("name", "logout");
    } else if ("LOGOUT" == status) {
      showStr = "登陆";
      $("#login").attr("name", "login");
    }
    $("#login").text(showStr);
  } else {
    alert(data);
  }
}

function updateCallStatus(opCode, dataType, data) {
  alert(data);
  if ("OK" == data.substring(0, 2)) {
    var status = data.split("OK:")[1];
    var showStr = "";
    if ("NORMAL" == status) {
      showStr = "call";
    } else if ("INCOMING" == status) {
      showStr = "accept";
    }
    // else if("CALLING" == status)
    // {
    //     showStr = "Calling";
    // }
    $("#call").attr("name", showStr);
    $("#call").text(showStr);
  } else {
    alert(data);
  }
}

/**
 *监控中心回调
 */
function upgateGlobalStatus(opCode, dataType, data) {
  $("#content").append(data);
}

/**
 * 登陆方法的实现
 *
 */
function login() {
  // alert(123);
  /*--设置登陆的配置，分别是本地窗口和对方视频窗口的大小----*/
  jsonViewConfig = {
    localView: {
      x: "10",
      y: "800",
      w: "432",
      h: "528",
    },
    remoteView: {
      x: "440",
      y: "800",
      w: "432",
      h: "528",
    },
  };
  /*---这里默认设置一个用户名用于调试，后期用户登录之后直接自动生成---*/
  userName = "1234";
  /*--uexESurfingRtc.login函数需要传入的参数是一个json字符串，所以需要调用JSON.stringify方法将json对象转换为字符串--*/
  jsonDtr = JSON.stringify(jsonViewConfig);

  uexESurfingRtc.login(jsonDtr, userName);
}

/**
 * 退出登录
 * @return {[type]} [description]
 */
function logout() {
  uexESurfingRtc.logout();
}

function call() {
  uexESurfingRtc.call("3", "4321");
}

function accept() {
  uexESurfingRtc.acceptCall("3");
}

/**
 *登陆按钮
 *点击之后直接视频登陆
 */
appcan.button("#login", "ani-act", function () {
  var btnName = $("#login").attr("name");
  if (btnName == "login") {
    $("#login").text("登陆中，请稍候...");
    login();
  } else if ((btnName = "logout")) {
    $("#login").text("退出中，请稍候...");
    logout();
  }
});

/**
 * 呼叫按钮
 */
appcan.button("#call", "ani-act", function () {
  var btnName = $("#call").attr("name");
  if (btnName == "call") {
    $("#call").text("呼叫中，请稍候...");
    call();
  } else if ((btnName = "accept")) {
    $("#call").text("接听中，请稍候...");
    accept();
  }
});

关注我获取更新

wechat
知乎
github

猜你喜欢

程序
app appcan

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处，禁止全文转载