web端实时音视频功能开发指南

yun2win官网:www.yun2win.com

SDK下载地址:http://www.yun2win.com/h-col-107.html

简介

yun2win-sdk-web提供web端实时音视频功能完整解决方案,方便客户快速集成音视频功能. SDK 提供整套解决方案

yun2win官网:www.yun2win.com

SDK下载地址:http://www.yun2win.com/h-col-107.html

开发准备

1、准备Chrome浏览器版本49及以上

2、给网站配置CA证书

3、导入y2wVideo.js文件并添加到main.html

复制


<script src="js/core/y2wVideo.js?v=0.1"></script>

4、添加自定义界面videoAudio.html

提醒

本地开发,需要生成CA证书,用https访问,并点击盾牌,选择加载不安全的脚本

创建聊天房间

调用以下代码创建房间:

复制


var y2wVideo = new RTCManager();
//currentUser.id 当前用户ID   currentUser.imToken  当前用户的ImToken
y2wVideo.createVideo(currentUser.id, currentUser.imToken, function (error, channelId) {
            if (error) {
            return;
            }
            //发送通知通知其他人,具体看下面
            y2w.sendVideoMessage(scene, receiverIds, mode, channelId);
           //发起方打开视频语音聊天界面
            window.open("../yun2win/videoAudio.html?userid=" + currentUser.id + "&channelId=" + channelId + "&type=" + mode, "_blank");
});

群聊视频发起与加入

发起方:

复制


//发送通知通知其他人
var receiverIds=[];//已经选择群聊的群成员用户ID

for (var i = 0; i < obj.selected.length; i++) {
receiverIds[receiverIds.length] = obj.selected[i].id;
}
y2w.sendVideoMessage(‘group‘, receiverIds, ‘video‘, channelId);//channelId 房间ID
//发起方打开视频语音聊天界面
window.open("../yun2win/videoAudio.html?userid=" + currentUser.id + "&channelId=" + channelId + "&type=" + ‘video‘, "_blank");

接收方:

复制


if (syncObj.type == "groupavcall") {
        var receiversIds = syncObj.content.participants.receiversIds;
        if (receiversIds) {
                for (var j = 0; j < receiversIds.length; j++) {
                if (receiversIds[j] == currentUser.id) {
                            y2w.receive_AV_Mesage(syncObj);
                            break;
                        }
                }
        }
        break;
}

群聊音频发起与加入

发起方:

复制


var receiverIds=[];//已经选择群聊的群成员用户ID

for (var i = 0; i < obj.selected.length; i++) {
receiverIds[receiverIds.length] = obj.selected[i].id;
}
//发送通知通知其他人
y2w.sendVideoMessage(‘group‘, receiverIds, ‘audio‘, channelId);//channelId 房间ID
//发起方打开视频语音聊天界面
window.open("../yun2win/videoAudio.html?userid=" + currentUser.id + "&channelId=" + channelId + "&type=" + ‘audio‘, "_blank");

接收方:

复制


if (syncObj.type == "groupavcall") {
        var receiversIds = syncObj.content.participants.receiversIds;
        if (receiversIds) {
                for (var j = 0; j < receiversIds.length; j++) {
                if (receiversIds[j] == currentUser.id) {
                            y2w.receive_AV_Mesage(syncObj);
                            break;
                        }
                }
        }
        break;
}

一对一视频发起与加入

发起方:

复制


var receiverIds=[];
receiverIds[receiverIds.length] = obj;//obj 对方用户ID
//发送通知通知其他人
y2w.sendVideoMessage(‘p2p‘, receiverIds, ‘video‘, channelId);//channelId 房间ID
//发起方打开视频语音聊天界面
window.open("../yun2win/videoAudio.html?userid=" + currentUser.id + "&channelId=" + channelId + "&type=" + ‘video‘, "_blank");

接收方:

复制


if (syncObj.type == "singleavcall") {
        var receiversIds = syncObj.content.participants.receiversIds;
        if (receiversIds) {
                for (var j = 0; j < receiversIds.length; j++) {
                if (receiversIds[j] == currentUser.id) {
                            y2w.receive_AV_Mesage(syncObj);
                            break;
                        }
                }
        }
        break;
}

一对一音频发起与加入

发起方:

复制


var receiverIds=[];
receiverIds[receiverIds.length] = obj;//obj 对方用户ID
//发送通知通知其他人
y2w.sendVideoMessage(‘p2p‘, receiverIds, ‘audio‘, channelId);//channelId 房间ID
//发起方打开视频语音聊天界面
window.open("../yun2win/videoAudio.html?userid=" + currentUser.id + "&channelId=" + channelId + "&type=" + ‘audio‘, "_blank");

接收方:

复制


if (syncObj.type == "singleavcall") {
        var receiversIds = syncObj.content.participants.receiversIds;
        if (receiversIds) {
                for (var j = 0; j < receiversIds.length; j++) {
                if (receiversIds[j] == currentUser.id) {
                            y2w.receive_AV_Mesage(syncObj);
                            break;
                        }
                }
        }
        break;
}

桌面共享

发起方:

复制


var receiverIds=[];
receiverIds[receiverIds.length] = obj;//obj 对方用户ID
//发送通知通知其他人
y2w.sendVideoMessage(‘sharescreen‘, receiverIds, ‘audio‘, channelId);//channelId 房间ID
//发起方打开视频语音聊天界面
window.open("../yun2win/videoAudio.html?userid=" + currentUser.id + "&channelId=" + channelId + "&type=" + ‘audio‘, "_blank");

接收方:

复制


if (syncObj.type == "sharescreen") {
        var receiversIds = syncObj.content.participants.receiversIds;
        if (receiversIds) {
                for (var j = 0; j < receiversIds.length; j++) {
                if (receiversIds[j] == currentUser.id) {
                            y2w.receive_AV_Mesage(syncObj);
                            break;
                        }
                }
        }
        break;
}

组装地址前准备

1、判断是否已经登录

复制


var currentUserid = localStorage.getItem(‘y2wIMCurrentUserId‘);
var currentuserinfo = JSON.parse(localStorage.getItem(currentUserid));
if (currentuserinfo == null) {
        if (window.confirm("您还没有登录,请先登录")) {
              window.location.href = ‘../yun2win/index.html‘;
        }
        return;
        //重新登录
}

2、检测浏览器版本

复制


var sUserAgent = navigator.userAgent;
//parseFloat 运行时逐个读取字符串中的字符,当他发现第一个非数字符是就停止
var appVersion = navigator.appVersion;
var index = appVersion.indexOf(‘Chrome/‘);
var sub = appVersion.substring(index+7);
var fAppVersion = parseFloat(sub);
if (fAppVersion < 49) {
     alert(‘您的浏览器版本太低!为了不影响您的视频聊天,请升级到最新版本‘);
}

提醒

请记住使用chrome浏览器49版本及以上

3、通过登录token获取access_token

复制


var params = {
        grant_type: ‘client_credentials‘,
        client_id: currentuserinfo.key,//用户的app Key
        client_secret: currentuserinfo.secret //密钥
};
var token = currentuserinfo.token;//登录token
$.ajax({
    url: config.y2wAutorizeUrl + ‘oauth/token‘,
    type: ‘POST‘,
    data: params,
    dataType: ‘json‘,
    contentType: ‘application/x-www-form-urlencoded‘,
beforeSend: function (req) {
    if (token)
    req.setRequestHeader(‘Authorization‘, ‘Bearer ‘ + token);
},
success: function (data) {
var token = data.access_token;//获取access_token
        //组装的地址
        //document.getElementById("iframe_videoaudio").src = "https://av-api.liyueyun.com/media/?userid=" +
        memberId + "&channelId=" + channelId + "&type=" + initype + "&token=" + token + "&avatarUrl=" + avatarUrl + "&name=" + name;
},
error: function (e) {//验证失败,重新登陆
    if (e.status ==400){
        if (window.confirm("验证失败,请重新登录")) {
           window.location.href = ‘../yun2win/index.html‘;
        }
        }
    }
});

组装地址

复制


//memberId 当前用户ID   channelId 房间ID
//initype默认开启类型 (video/audio)  token  access_token avatarUrl 用户头像地址 name用户名字
document.getElementById("iframe_videoaudio").src = "https://av-api.liyueyun.com/media/?userid=" + memberId +
"&channelId=" + channelId + "&type=" + initype + "&token=" + token + "&avatarUrl=" + avatarUrl + "&name=" + name;
时间: 2024-10-27 08:42:40

web端实时音视频功能开发指南的相关文章

Android端实时音视频开发指南

简介 yun2win-sdk-Android提供Android端实时音视频完整解决方案,方便客户快速集成实时音视频功能. SDK 提供的能力如下: 发起 加入 AVClient Channel AVMember yun2win官网:www.yun2win.com SDK下载地址:http://www.yun2win.com/h-col-107.html 开发准备 注册并创建应用 到 github下载yun2winSDK及demo 下载源码详解 app为主体显示Module uikit为公共服务M

iOS端im实时音视频功能快速开发实操指导!

所需工具yun2win实时音视频IOS端sdk 下载地址:https://github.com/yun2win/yun2win-sdk-iOS/tree/master/Y2W_IM_SDK yun2win官网:www.yun2win.com 简介 Y2W_RTC_SDK集成多种实时通讯能力: 实时音频 实时视频 屏幕共享 协作白板 开发流程 发起方使用Y2WRTCManager对象的createChannel方法创建Y2WRTCChannel对象 接收方使用Y2WRTCManager对象的get

从零到一,使用实时音视频 SDK 一起开发一款 Zoom 吧

zoom(zoom.us) 是一款受到广泛使用的在线会议软件.相信各位一定在办公.会议.聊天等各种场景下体验或者使用过,作为一款成熟的商业软件,zoom 提供了稳定的实时音视频通话质量,以及白板.聊天.屏幕共享.PPT放映等常用功能.但是在当今浏览器成为端上主流的时代,实时音视频又怎甘于落后呢?相比于需要安装包的 Zoom,直接在网页上开发一款类似的会议软件肯定会受到更多的关注.当需要开会的时候,直接通过一个链接,大家就可以接入并开始会议了.现在,使用七牛实时音视频的 Web SDK,我们可以将

iOS音视频项目开发(跨平台)

苹果手机带动了IOS的火热,一大堆开发人员在捣鼓IOS平台的开发,相信大家也使用过QQ的语音视频对话功能,但是不知道大家有没有试过自己来开发一个基于IOS平台的音视频即时通讯的应用,这个应用必须能够做到跨平台.现在介绍两种方法使用IOS与其他平台的音视频通话. 首先就是使用一个跨平台的音视频通讯平台即可,这是作为非专业技术人员也可以做到的,下面就先介绍第一种:只需三个条件: 1.手机有网络连接: 2.有AnyChat for iOS SDK: 3.对方PC或手机有以上条件. AnyChat音视频

实时音视频技术难点及解决方案

对于一个实时互动的音视频系统而言,存在很多技术难点,有几个比较重要的点: 首先是低延迟,如果要满足比较流畅地进行实时互动,那么单向的端到端的迟延大概要在400毫秒以下才能保证流畅沟通; 第二点就是流畅性,你也很难想象在视频过程中频繁卡顿会有良好的互动; 第三点是回声消除,回声的产生是扬声器播放的声音经过环境反射被麦克风重新采集并传输给对方,这样对方就会一直听到自己的回声,整个互动过程会非常难受; 第四点是国内外互通,随着现在国内同质化产品越来越多,国内的竞争也异常激烈,很多厂商纷纷选择出海,这时

摸索在web端使用腾讯云的实时音视频

今天接到一个新任务,要在web端集成,实时音频/视频,选择了腾讯云的服务: 腾讯云实时 音视频 文档地址:https://cloud.tencent.com/document/product/647/17021 点击web下的下载按钮会弹出一个网页可以在web端体验 实时 音视频 的demo demo地址:https://trtc-1252463788.file.myqcloud.com/web/demo/official-demo/index.html?_ga=1.256196107.1236

实时音视频互动系列(下):基于 WebRTC 技术的实战解析

在 WebRTC 项目中,又拍云团队做到了覆盖系统全局,保证项目进程流畅.这牵涉到主要三大块技术点: 网络端.服务端的开发和传输算法 WebRTC 协议中牵扯到服务端的应用协议和信令服务 客户端iOS.安卓 H.264 编解码技术 △ WebRTC 技术点 实时音视频互动必须遵守三大点 必须基于 UDP 协议,否则不要谈实时 因为 TCP 协议的重传机制(传输保障)会导致累积延迟问题,用 UDP 协议没有传输保障机制,但需要自行完善丢包容错逻辑. 又拍云音视频互动方案是基于UDP 协议,使用 T

小程序音视频功能的原理及应用

本文由云+社区发表 作者:常青 腾讯视频云是做什么的?腾讯视频云既不做数据库,也不做存储,也不做网络,我们只做音视频服务,也就是直播.点播.视频通话.这类面向B类客户的音视频PAAS业务. 今天主要是跟大家讲的是腾讯视频云在过去一年时间里跟小程序结合,看看怎么去把这样一个高技术含量的一个能力去跟小程序这样一个非常轻量级的平台发挥1+1>2的效应. 今天的话题分四部分,第一个是小程序音视频能拿来做什么,第二部分是将其内部是怎么做到的?第三就是讲腾讯视频云的音视频技术的一些技术细节:第四个是介绍一下

安卓平台的音视频互动开发平台

兼容Google.HTC.小米.Samsung.华为等主流硬件设备 支持iOS.Web.PC等设备和Android之间的互联互通 视频会话时,默认打开前置摄像头: 能够有Java音视频采集.显示驱动,兼容更多Android设备: 想要在Android平台下实现音视频通信,最快捷的方法是寻找开源项目或调用其他公司封装好的API,接下来小编介绍一款不错的SDK包给大家,(安卓平台的音视频互动开发平台)下面是一些关于如何调用相关API接口的方法,大家可以相互交流交流. Android通信平台相关API