webRTC的用户体验

webRTC的用户体验介绍

国内这方面资料比较少,查询了一些国外资料,进行一些总结,希望对大家有用.参考博客:

注意:本文图片链接可能需要翻墙,如果英文不错可以去看原文,

介绍

我们使用WebRTC的主要目的是应用它的如下如下几个功能

• 音视频捕捉
• 视频显示
• 音视频压缩
• 网络通信.

webrtc遵循开放的网络,实时的,易访问的跨平台设计原则,那么他是如何工作的?
webrtc有三个主要组成:

1. getUserMedia:允许浏览通过设备的麦克风和摄像头捕捉media.
2. RTCPeerConnection: 创建浏览器和peer各端间的联系,音视频才能交换.
3. RTCDataChannel: 可以进行数据如文件等的传输,但并不像RTCPeerConnection和getuserMedia间的video和voice的交换模式.

这三个API组成的WebRTC技术应用的基础;

PS.目前Safari还不支持webrtcAPI,所以要做iPhone上的视频聊天,还需要写原生APP. 可以参考我的上篇博客webrtc on ios.

在哪些方面可以使用WebRTC技术来加强app功能

除了主流的视频通话会议等, 互联网教育app也有这方面功能需求,目前虽然大部分网上教学是通过录视频进行,不过学生和老师的面对面交流越来越重要.
以及电子商务式的购物,直接跟零售商面对面沟通,更高的交互来培养高价值客户.
随着技术发展远程医疗,私人网上社区等也会需要这方面功能.

集成webrtc的用户体验

下面我们将更深入的了解webrtc,但在这之前,首先我们要考虑添加webrtc到现有的应用中是否必要,用户体验是否因此更好?

所以,我们开始之前,必须回答6个问题:

1. webrtc如何适应用户原有的app使用流程?

在什么时候,你会希望用户在你的应用中启动视频或语音通信, 对于一些视频会议类的app,用户会想在首页就立刻打开这个功能;对于教学辅导类的app, 用户可能先注册一个账号,看看教学资料,再考虑是否与导师会话.

2. 是否存在阻碍?

用户是否可以在任何时间或特定时间开始进行会话?是否有界面或其他任务限制?是否有权限区开启等.不同应用之间差别很大,重要的是,你要把这些条件给客户选择:

3. 体验如何共享?

一旦会话连接建立了,如何通知用户会议正在进行或应邀参加? 如果你的应用已经有了推送通知,这些新类型的通知如何设计,如果用户禁用了通知怎么办?
如果你的应用不支持通知,用户邀请你控制之外的其他人? 所以你可以提供明确的分享方式,让用户通过一键分享给其他人. (例如点击通过电子邮件分享，微博等）。

4. 用户发送到哪?

主要关于浏览器上的逻辑设置,跟应用无关.比如用户习惯前进后退网页,如何保证正常工作.

5. 如果出现问题?

精心设计工作流程,让客户理解操作流程,呼叫与被呼. 如果用户拒绝了麦克风和摄像权限怎么办.

6. 如何设计跟原有应用风格一致.

按钮样式，导航模式，字体，颜色，图标，声音效果和动画应该感到熟悉和更大的体验中适合。

用户使用流程

1. 启动会话

用户如何启动一个会话: 一个按钮,点击加入会话.那么我们该让按钮传递怎样的信息了. 例如,用户可以创建一个视频通话的room, 其他人可以自行加入. 也可以呼叫特定的人.

2. 连接和等待.

在呼叫过程中,怎样给用户回应来表示呼叫正在进行,从电话中可以学习:

这种反馈至关重要,可以使用动画或铃声,让你的用户知道现在的状况.

另一个指标是等待时间,用户可以等待多久来呼叫期待其他人加入,可以用传统的音乐或即兴的消耗游戏,动画等,改善用户体验.(QQ通话是用本地摄像头作为界面,让用户可以在通话之前先看看自己形象).

通话过程中的体验

1. 向他们展示他们的样子.

第一次使用视频通话,都会感到不舒服,你通过屏幕和人交谈时,不能停止自己的脸在小盒子笨拙的盯着另一边.因此尽管看着自己说话怪怪的,但是还需要本地视频预览做有益的参考.

当用户在通话过程中切换坐姿或移动,他们可以使用本地预览以确保在明亮的环境中来让视频清晰完整.那么本地预览如何放置: 可以单独放在左上角,另一种模式是对包括在参与者名单的本地预览到屏幕底部.

远端放中间,可以让用户的视角对着摄像头.

2. 告诉他们谁在说话.

对于某些没有打开远程视频的用户,我们要用头像来表示他们加入了房间,所以让用户注册id时设置头像.

对于很多视频通话应用程序，当前发言者成为在布局中最突出的视频流,所以最好设置包括某种“当前发言人”指示器。

另一个重要的视觉反馈是,通话中谁可能被设置为静音,图标和界面颜色的变化是显示的常用做法,它可以帮助快速​​解决有人忘记在说话前取消静音的问题。

如果单向显示通话,那么最好设一个占位图标.来告诉用户目前状态.

3. 让他们能控制自己能看到的和听到的

在语音或视频中,用户可能希望暂时忽略另一个人,可能是由于过多的背景噪音, 对于视频通话,用户往往希望能突出当前发言者,例如会议主导者,可以考虑给予用户控制哪些流优先显示在屏幕上.

连接方式和带宽对webRTC的用户体验影响

通话质量是用户判断你服务可靠性的重要标准.

1. 交互的成本

用户体验的重要组成部分就是性能,他们在不同的网络环境中访问应用,高容量的wifi 或是低带宽的3G网,他们也可能在运行了其他多个程序的电脑上开启我们的浏览器.这些都是超过你控制会影响应用程序的性能的问题. 我们应该围绕这些做一些设计.

呼叫质量主要由:音频 视频和连接数决定. 音频通过使用相对低的带宽,成本较低. 而视频耗费更多些,不过也取决于分辨率. WebRTC核心代码会自动确定可用的带宽，并相应缩减视频分辨率. 随着越来越多的人加入到通话中, 每一项成本都会激增. 即使有video route在中间帮助,这对处理传入的视频影响也很明显. 一般的规律是: 更多的参与者,就需要更多的带宽.

2. 设计连接的各种状态

首先是connecting,你如何告诉他们,而应用是如何建立连接的. 提供一个message or loading indicator来让等待的用户知道.

下面,我们将讨论如何用视觉让用户觉得连接过程很快. Facebook是个很好的例子.当你查看新闻内容时加载较慢,会先用占位图像.保证用户不会认为黑屏太久. 想想有什么内容可以在connected state时候提供.

如果连接请求失败,用户会是看到什么?你如何引导他们修复问题,并鼓励再试一次? 在这种情况下,明确的文档是必须的. 此外,可以在应用中建立监测.收集失败原因.

3. 显示用户的连接质量和状况

我们强调用户视觉反馈的重要性,

如果连接中断:

4.Information Gives the User More Control

给用户这样的状态信息，使他们能够分析他们的浏览器，设备和网络使用情况，并改善他们的最终他们的通话质量。他们可以调整自己的环境，关闭了一些带宽密集型的应用程序，并要求其他人在其网络上暂停任何下载或流活动。

对于视频有大量的丢包的影响通话质量，快速，有效的解决方案是为用户隐藏自己的视频流。这将释放带宽，提高音频质量，尤其是在许多人的电话。让用户知道这些信息通过文档，或者一个明显的工具提示,如UI控制中的一个选项。

5. 优化连接过程

如前面所说的,连接一个视频会话,用户的体验与响应速度相关.下面我们说一些可以让客户觉得快的多的启动过程,

• 第一种: Trickle ICE. ICE表示Interactive Connectivity Establishment
  (类似一种点对点直接通信,直接获取ip并以此通信),这种通信不需要等待连接检查就可以开始,节约相比建立连接的几秒时间.

(关于更多ICE信息可以阅读 ICE always tastes better when it trickles! by Emil Ivov.)

• 第二种: 在一个和建立会话相关的UI被交互时,可以预先进行连接的建立.

其余简单提示用户体验的方法.

1. 文本聊天. (多个通信channel)

虽然webRTC技术主要是用于视频会话方面,但考虑其主要目的是让沟通更轻松,更开放,也可以添加文字聊天.添加另一种体验. 比如一些要在文本上才好沟通的: 网址,文件,号码等.又或者用户麦克风无法正常使用,这也是一个替代方式.

2. 屏幕共享.

3. 文件共享

如:照片,文档等

4. 隐私

通话房间上锁,可选静音,

5. 收集用户反馈.