资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

html5通话,html5 语音聊天

phonegap 什么插件能打电话

最近采用phonegap做一个APP,需要在应用内实现拨打电话,通话结束後能反馈通话相关状态,查看了一番phonegap官方文档,似乎没有跟电话相关的api,在互联网上也大概搜了一下,好像没找到相关的内容。其实html5是支持直接在网页上拨打电话的,只要加入如下html代码即可:

创新互联公司是一家集网站建设,洮南企业网站建设,洮南品牌网站建设,网站定制,洮南网站建设报价,网络营销,网络优化,洮南网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

[html] view plaincopy

打电话a href="tel:10086" 移动客服/a

发短信a href="sms:10086" 发短信/a

但这中方式只能实现拨打电话和发送短信,不能反馈结果,比如我想在应用能实现拨打电话,通话结束後自动保存通话的电话号码、通话时间、时长等,默认的html功能就不能满足了。

phonegap官方不提供的功能,我们只有自己通过开发插件了实现了

下面我们通过代码来简单介绍下phonegap插件开发步骤:

一、定义JS插件API

[javascript] view plaincopy

var Phone = function() {

};

Phone.prototype.call = function (successCallback, failureCallback,number) {

cordova.exec(successCallback, failureCallback, "Phone", "call", [number]);

};

window.Phone = new Phone();

上面的代码我们定义了一个Phone插件,插件有一个call API,我们传入

[javascript] view plaincopy

successCallback

failureCallback

分别做为电话拨打成功和失败的回调函数

传入

[javascript] view plaincopy

number

做为电话号码

在方法裏边调用

phonegap的cordova.exec()

[javascript] view plaincopy

cordova.exec(successCallback, failureCallback, "Phone", "call", [number]);

就是在这个方法裏将执行到native端的功能调用

最後我们new一个Phone对象,把他附件到window对象上,方便以後调用。

这样,插件的JS代码完成。

二、native端代码(以android平台为例)

先直接上代码

[java] view plaincopy

package com.juhuibao.PhoneGapPlugin;

import java.util.Date;

import org.apache.cordova.api.CallbackContext;

import org.apache.cordova.api.CordovaPlugin;

import org.apache.cordova.api.PluginResult;

import org.json.JSONArray;

import org.json.JSONException;

import android.app.Activity;

import android.content.Intent;

import android.database.Cursor;

import android.net.Uri;

import android.provider.CallLog.Calls;

import android.telephony.PhoneNumberUtils;

public class Phone extends CordovaPlugin {

private static final int PHONE_CALL = 0; // 拨打电话

private static final int PHONE_ABORT = 1; // 挂断电话

private Date start_time;

private CallbackContext callbackContext;

private String phonenumber;

@Override

public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {

try{

this.callbackContext = callbackContext;

if ("call".equals(action)) {

this.phonenumber=args.getString(0);

this.call(args.getString(0),callbackContext);

return true;

}

if ("abort".equals(action)) {

this.abort(callbackContext);

return true;

}

return false;

}

catch(Exception e){

callbackContext.error(e.getMessage());

}

return false;

}

//拨打电话

private void call(String phonenumber, CallbackContext callbackContext) {

if (phonenumber != null phonenumber.length() 0) {

if(PhoneNumberUtils.isGlobalPhoneNumber(phonenumber)){

Intent i = new Intent();

i.setAction(Intent.ACTION_CALL);

i.setData(Uri.parse("tel:"+phonenumber));

start_time=new Date();

this.cordova.startActivityForResult(this, i,PHONE_CALL);

}

else{

callbackContext.error(phonenumber+"不是有效的电话号码。");

}

} else {

callbackContext.error("电话号码不能为空.");

}

}

//中断电话

private void abort(CallbackContext callbackContext) {

}

public void onActivityResult(int requestCode, int resultCode, Intent intent) {

Date end_time=new Date();

if (resultCode == Activity.RESULT_OK) {

if (requestCode == PHONE_CALL) {

this.callbackContext.error("未知状态");

}

}

else if (resultCode == Activity.RESULT_CANCELED) {

try{

if (requestCode == PHONE_CALL) {

long duration=GetLastCallDuration();

PhoneResult result=new PhoneResult();

result.setNumber(Phone.this.phonenumber);

result.setStartTime(Phone.this.start_time);

result.setEndTime(end_time);

result.setDuration(duration);

this.callbackContext.sendPluginResult(new PluginResult(PluginResult.Status.OK, result.toJSONObject()));

}

}

catch(Exception e){

this.callbackContext.error(e.getMessage());

}

}

else {

this.callbackContext.error("其他错误!");

}

}

long delayTime=0;

long timeOut=2000;

long GetLastCallDuration() throws InterruptedException{

Activity activity = this.cordova.getActivity();

Cursor cursor = activity.getContentResolver().query(Calls.CONTENT_URI,

new String[] {Calls.NUMBER,Calls.DATE, Calls.DURATION, Calls.TYPE, Calls.DATE },

"number=?and type=?",

new String[]{this.phonenumber,"2"},

Calls.DEFAULT_SORT_ORDER);

activity.startManagingCursor(cursor);

boolean hasRecord = cursor.moveToFirst();

if (hasRecord) {

long endTime=cursor.getLong(cursor.getColumnIndex(Calls.DATE));

Date date = new Date(endTime);

long duration = cursor.getLong(cursor.getColumnIndex(Calls.DURATION));

long dif=this.start_time.getTime()-date.getTime();

long second=dif/1000;

if(second2second-2){

return duration;

}else{

if(delayTime=timeOut){

return 0;

}

Thread.sleep(200);

delayTime+=200;

return GetLastCallDuration();

}

}else{

if(delayTime=timeOut){

return 0;

}

Thread.sleep(200);

delayTime+=200;

return GetLastCallDuration();

}

}

}

然後调用具体实现拨打电话功能的方法call方法,在call方法内我们首先判断电话号码合法性,不合法直接调用callbackContext.error("不是有效的电话号码。"),这个方法将触发JS端的error回调函数执行,并传入一个字符串参数,比如以上的failureCallback

如果电话号码合法则弹出呼叫界面,如下代码

[java] view plaincopy

if(PhoneNumberUtils.isGlobalPhoneNumber(phonenumber)){

Intent i = new Intent();

i.setAction(Intent.ACTION_CALL);

i.setData(Uri.parse("tel:"+phonenumber));

start_time=new Date();

this.cordova.startActivityForResult(this, i,PHONE_CALL);

}

else{

callbackContext.error(phonenumber+"不是有效的电话号码。");

}

在代码中我们通过变量start_time记录开始时间,然後使用this.cordova.startActivityForResult(this, i,PHONE_CALL);启动Activity。

在终止拨号或挂断电话时将执行onActivityResult方法,我们将在此方法内实现通话状态信息的反馈。主要看一下这段代码

[java] view plaincopy

else if (resultCode == Activity.RESULT_CANCELED) {

try{

if (requestCode == PHONE_CALL) {

long duration=GetLastCallDuration();

PhoneResult result=new PhoneResult();

result.setNumber(Phone.this.phonenumber);

result.setStartTime(Phone.this.start_time);

result.setEndTime(end_time);

result.setDuration(duration);

this.callbackContext.sendPluginResult(new PluginResult(PluginResult.Status.OK, result.toJSONObject()));

}

}

catch(Exception e){

this.callbackContext.error(e.getMessage());

}

}

不管电话有没有接通,resultCode总是等於Activity.RESULT_CANCELED。

我们通过GetLastCallDuration()方法获得通话时长,原理就是读取通话记录裏边的duration字段,由於通话刚结束时通话记录可能还没出现记录,所以我们要反复调用该方法,直到有记录或到超时时间为止。

取得了时长我们通过this.callbackContext.sendPluginResult(new PluginResult(PluginResult.Status.OK, result.toJSONObject()));把结果反馈给JS端。

附 PhoneResult.java

[java] view plaincopy

package com.juhuibao.PhoneGapPlugin;

import java.text.SimpleDateFormat;

import java.util.Date;

import org.json.JSONException;

import org.json.JSONObject;

public class PhoneResult {

private String number = "";

private Date startTime;

private Date endTime;;

private long duration = 0;

public JSONObject toJSONObject() throws JSONException {

SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss:S");

return new JSONObject(

"{number:" + JSONObject.quote(number) +

",startTime:" + JSONObject.quote(sdf.format(startTime)) +

",endTime:" + JSONObject.quote(sdf.format(endTime)) +

",duration:" + duration + "}");

}

public String getNumber() {

return number;

}

public void setNumber(String number) {

this.number = number;

}

public Date getStartTime() {

return startTime;

}

public void setStartTime(Date startTime) {

this.startTime = startTime;

}

public Date getEndTime() {

return endTime;

}

public void setEndTime(Date endTime) {

this.endTime = endTime;

}

public long getDuration() {

return duration;

}

public void setDuration(long duration) {

this.duration = duration;

}

}

这样native端的代码完成。

三、客户端调用

[javascript] view plaincopy

window.Phone.call(function (obj) { alert(JSON.stringify(obj));

}, function (err) { alert(err); }, "13401100000");

四、配置插件

在config.xml文件中注册插件

[html] view plaincopy

plugin name="Phone" value="com.juhuibao.PhoneGapPlugin.Phone"/

在AndroidManifest.xml文件中增加权限

[html] view plaincopy

uses-permission android:name="android.permission.CALL_PHONE" /

uses-permission android:name="android.permission.READ_CALL_LOG" /

uses-permission android:name="android.permission.PROCESS_OUTGOING_CALLS" /

uses-permission android:name="android.permission.READ_PHONE_STATE"/

html5 如果实现录音转发?

不能用,录音只有通话录音软件进行转发,建议试试用匹诺曹通话录音软件

HTML和HTML5有什么区别呀?

一、指代不同

1、html5:是Web中核心语言HTML的规范。

2、html:称为超文本标记语言,是一种标识性的语言。

二、特点不同

1、html5:用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。

2、html:包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。

三、构成不同

1、html5: 由不同的技术构成,其在互联网中得到了非常广泛的应用,提供更多增强网络应用的标准机

2、html:是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。

qq7.6浏览器版本的视频通话效果怎样

个人感觉不如 qq浏览器的9.0版本 QQ浏览器9.0从里到外都进行了全新的设计,

核心基于业界最新的Google Chromium 42正式版,完美支持HTML5和各种新的Web标准,

同时为了保持兼容性,它也是同时支持IE渲染核心的双核浏览器,视频通话效果更真实

画面更流畅 你可以试试

HTML5 中引入了哪些新的JavaScript API?具体有什么作用?

简而言之,HTML5就是由新的标记引进的新元素形式和为现有元素新增的某些属性,与新的JavaScript APIs的结合体。那HTML5中引入了新增加了哪些新标签与JavaScript API结合体呢?我这里例举了我们平时最常用的几种:

1、 Canvas API是一个具有完整功能的JavaScript API并伴随产生了新HTML5元素Canvas。通过Canvas API,您可以利用它和WebGL在浏览器中创建一个2 D或3 D绘图场景,

2、 Contacts API主要应用在移动设备上,为浏览器提供对用户通用通讯录的访问。它在浏览器内建立一个本地存储库,来存储联系人信息。而不是通过访问让你所有联系人信息直接保存在Google +、Facebook或其他网站上, Contacts API将允许您有本地存储库,网站可以通过本地存储库访问存储的联系人信息。现在的主流浏览器都支持Contacts API

3、 通过File API 浏览器可以直接访问用户计算机的沙箱区域将数据存储到文件系统。

4、 在HTML5中Forms API得到了发展,内置了验证功能,在接下来的课程中,您将会学习到如何通过使用内置的规则实现表单验证,以及如何添加自定义规则进行表单验证。

5、 允许浏览器请求用户的位置信息,一旦获权,浏览器可以通过许多不同的方法来确定计算机或设备的实际位置,它将会有一个比例尺来确认精确的地点位置。通过该API能获取经纬度等数据,非常适合应用程序定位。

6、 Media Capture的功能是将本地设备通过JavaScript将与浏览器相连。你将能够访问摄像头,摄像头,等等。

7、 Messaging API被用来与其他API一起使用,比如web web workers,这个我们将将在后面的课程中进一步讨论。

8、 选择(Selection)API的就像jQuery库一样运用非常广泛。在流行jQuery 、HTML5的今天,试图从文档对象模型选择元素是比较复杂的。jQuery弥补了这一差距。其实变得很容易,HTML5将高级选择功能直接内置在浏览器中。使得浏览器的选择性能得到很大的改善,甚至于JQuery选择工具一样速度。我并不是贬低jQuery。jQuery的优势就是DOM的选择,但是,jQuery不仅仅只提供了选择功能,事实上,在本课程中未来的演示的案例中,您将清楚的知道什么时候使用jQuery会更加便利,然后什么时候切换到本地选择会更加方便。.

9、 Server-Sent Events API:一个网页获取新的数据通常需要发送一个请求到服务器,也就是向服务器请求的页面.使用Server-Sent Events API,服务器可以在任何时刻向我们的web页面推送数据和信息.这些被推送进来的信息可以在这个页面上作为事件/数据来处理。服务器推送事件(Server-Sent Events)的优点在于: 只要响应的内容类型是事件/数据流,事件就通过HTTP发送,浏览器能够识别该传输。

10、 Web Notifications API即web消息提醒,它可以使页面可以发出通知,通知将被显示在页面之外的系统层面上(通常使用操作系统的标准通知机制,但是在不同的平台和浏览器上的表现会有差异)。这个功能使 web 应用可以向用户发送信息,即使应用处于空闲状态。最明显的用例之一是一个网页版电子邮件应用程序,每当用户收到了一封新的电子邮件都需要通知用户,即使用户正在使用另一个应用程序。在2013年夏天,这个API还是在被W3C在试用,并没有被很多浏览器所应用。

11、 Web Sockets API:Web Sockets是一种基于 ws 协议的技术,它使得建立全双工连接成为可能。websocket 常见于浏览器中,但是这个协议不受使用平台的限制。它允许你收发信息到服务器端。这个典型的示例就是即时通信。你建立一个对话,如果没有sockets,你可能会去从服务器中去获取新的消息。如果具有了sockets,当消息通过浏览器发到服务端的时候,对方的客户端通过已经建立好的sockets链接就能自动的接收到信息。

12、 Web存储,它有两种版本,本地存储和会话存储。就WEB开发来说,一个会话就是你通过浏览器与服务器之间的一次通话,所以,如果你熟悉服务器端web开发,会话存储可能不是头一次听说。基本上,只要用户页在页面上的统一个会话内,工作数据就不会丢失。如果浏览器关闭或者转向另一个会话,那么此时数据就不复存在。本地存储在不同会话之间仍然能保存数据, 本地存储与cookie 和IndexedDB相比,它可以让你来贮存更多的信息。Web存储与cookie,数据不发送到请求的服务器而是保存在客户端。

这些都是HTML5中新加入的一些比较常用的功能API,如果你想要系统的了解HTML5的新功能,推荐你去一个叫做秒秒学的教程网站上看看,里面有专门的课程来讲解HTML5中的新特性,希望对你有帮助。

html5可以做在线语音聊天功能吗

有啥不可以的。HTML5可以实现APP的离线推送通知,我自己电脑都在用facebook和twitter,linkin的离线通知,视频音频处理能力非常之强,加上webGL技术让其发挥各种酷炫的甚至FLASH无法比拟的效果,很多你无法想象的3D效果都发挥的淋漓尽致,还有很多设备响应,视频音频响应的API,国外也出现了一些用视频音频操作的web,加之老外开发了一些HTML5优秀框架和API,你说它还不能做什么嘛?哦对了,国外有很多HTML5在线视频语音聊天的网站了,由于很多处于中国限制级,怕放出来说传播违禁网站,自己去找啦。

你可以体验下youtube的HTML5关于视频和音频的一些功能体验,你就知道HTML5在视频音频上有多强了。

HTML5是要配合一些专有API,框架,javascript才能发挥出其性能的,并不是说就是用它的原生HTML标签就做出效果了,标签只是地基,它深层次的东西需要一个学习过程的。

我不懂HTML5深层次的开发,我只是业余全栈,我能说出看到过用到过的这些,专业HTML5开发的大神,或许还有更多更多好东西等着你呢└(^o^)┘


本文标题:html5通话,html5 语音聊天
网站地址:http://cdkjz.cn/article/dsdhgio.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220