声网实现屏幕共享以及直播
最近因为公司新增需求所以花费了2周时间搞定 中途出现许许多多的问题 在网上实在没有找到类似的资料 所以才发一张文章
注:我这边实现的学生可以申请一对一的视频通话 通过websocket保存key并且推送给老师或者学生
var client, localStream, camera, microphone;
var screenClient, screenStream;
var videoClient, videoStream;
var cameraUid = “”;
var strCameraUid = “”;
var screenUid = “”;
var audioSelect = document.querySelector(‘select#audioSource’);
var videoSelect = document.querySelector(‘select#videoSource’);
//老師摄像头
function teaJoin() {
var channel_key = null;
client = AgoraRTC.createClient({mode: ‘rtc’, codec: ‘vp8’});
client.init(key.value, function () {
client.join(channel_key, courseId, null, function (uid) {
camera = videoSource.value;
microphone = audioSource.value;
localStream = AgoraRTC.createStream({
streamID: uid,
audio: true,
cameraId: camera,
microphoneId: microphone,
video: true,
screen: false
});
localStream.setVideoProfile(‘720p_3’);
if(userRole ==“T”){
cameraUid = uid;
}else{
strCameraUid = uid;
}
// The user has granted access to the camera and mic.
localStream.on(“accessAllowed”, function () {
console.log(“accessAllowed”);
});
// The user has denied access to the camera and mic.localStream.on("accessDenied", function () {console.log("accessDenied");});localStream.init(function () {console.log("getUserMedia successfully");if(userRole == "T"){$('#playDiv').html('');localStream.play('playDiv');}else{$('#small_playDiv').html('');localStream.play('small_playDiv');}// localStream.play('agora_video_local');client.publish(localStream, function (err) {console.log("Publish local stream error: " + err);});client.on('stream-published', function (evt) {console.log("Publish local stream successfully");if(userRole =="T"){canPlay(cameraUid);var btn = $("#startPlayBtn");btn.attr("onclick","teaUnpublish()");btn.removeAttr("disabled");btn.css("background-color", "red");btn.val("结束视频");}});}, function (err) {console.log("getUserMedia failed", err);});}, function (err) {console.log("Join channel failed", err);});
}, function (err) {console.log("AgoraRTC client init failed", err);
});channelKey = "";
client.on('error', function (err) {console.log("Got error msg:", err.reason);if (err.reason === 'DYNAMIC_KEY_TIMEOUT') {client.renewChannelKey(channelKey, function () {console.log("Renew channel key successfully");}, function (err) {console.log("Renew channel key failed: ", err);});}
});client.on('stream-removed', function (evt) {var stream = evt.stream;stream.stop();$('#agora_remote' + stream.getId()).remove();console.log("Remote stream is removed " + stream.getId());
});client.on('peer-leave', function (evt) {var stream = evt.stream;if (stream) {stream.stop();$('#agora_remote' + stream.getId()).remove();console.log(evt.uid + " leaved from this channel");}
});
}
//學生攝像頭
function stJoin() {
var channel_key = null;
videoClient = AgoraRTC.createClient({mode: ‘rtc’, codec: ‘vp8’});
videoClient.init(key.value, function () {
videoClient.join(channel_key, courseId, null, function (uid) {
camera = videoSource.value;
microphone = audioSource.value;
videoStream = AgoraRTC.createStream({
streamID: uid,
audio: true,
cameraId: camera,
microphoneId: microphone,
video: true,
screen: false
});
videoStream.setVideoProfile(‘720p_3’);
strCameraUid = uid;
// The user has granted access to the camera and mic.
videoStream.on(“accessAllowed”, function () {
console.log(“accessAllowed”);
});
// The user has denied access to the camera and mic.videoStream.on("accessDenied", function () {console.log("accessDenied");});videoStream.init(function () {console.log("getUserMedia successfully");$('#small_playDiv').html('');videoStream.play('small_playDiv');// localStream.play('agora_video_local');videoClient.publish(videoStream, function (err) {console.log("Publish local stream error: " + err);});videoClient.on('stream-published', function (evt) {console.log("Publish local stream successfully");});}, function (err) {console.log("getUserMedia failed", err);});}, function (err) {console.log("Join channel failed", err);});
}, function (err) {console.log("AgoraRTC client init failed", err);
});channelKey = "";
videoClient.on('error', function (err) {console.log("Got error msg:", err.reason);if (err.reason === 'DYNAMIC_KEY_TIMEOUT') {videoClient.renewChannelKey(channelKey, function () {console.log("Renew channel key successfully");}, function (err) {console.log("Renew channel key failed: ", err);});}
});videoClient.on('stream-removed', function (evt) {var stream = evt.stream;stream.stop();$('#agora_remote' + stream.getId()).remove();console.log("Remote stream is removed " + stream.getId());
});videoClient.on('peer-leave', function (evt) {var stream = evt.stream;if (stream) {stream.stop();$('#agora_remote' + stream.getId()).remove();console.log(evt.uid + " leaved from this channel");}
});
}
//屏幕共享
function joinStr(cheID) {
var channel_key = null;
screenClient = AgoraRTC.createClient({mode: ‘rtc’, codec: ‘vp8’});
screenClient.init(key.value, function () {
screenClient.join(channel_key, courseId, null, function(uid) {
screenUid = uid;
screenStream = AgoraRTC.createStream({
streamID: uid,
audio: false,
video: false,
screen: true,
//chrome extension ID
extensionId: cheID
});
screenStream.setVideoProfile(‘720p_3’);
// The user has granted access to the camera and mic.
screenStream.on(“accessAllowed”, function() {
console.log(“accessAllowed”);
});
// The user has denied access to the camera and mic.screenStream.on("accessDenied", function() {console.log("accessDenied");});screenStream.init(function() {screenStream.play('agora_local2');$("#video").css("display","block");$("#container").css("display","none");screenClient.publish(screenStream, function (err) {console.log("Publish local screenstream error: " + err);});screenClient.on('stream-published', function (evt) {screenPlay(screenUid);var btn = $("#screenShare");btn.attr("onclick","strUnpublish()");btn.removeAttr("disabled");btn.css("background-color", "#0e5a94");$("#screenShare span").html("关闭屏幕");});}, function (err) {alert("请输入正确的共享屏幕插件ID");CHROME_ID = "";console.log("getUserMedia failed", err);});}, function(err) {console.log("Join channel failed", err);});
}, function (err) {console.log("AgoraRTC client init failed", err);
});channelKey = "";
screenClient.on('error', function(err) {console.log("Got error msg:", err.reason);if (err.reason === 'DYNAMIC_KEY_TIMEOUT') {screenClient.renewChannelKey(channelKey, function(){console.log("Renew channel key successfully");}, function(err){console.log("Renew channel key failed: ", err);});}
});screenClient.on('stream-removed', function (evt) {var stream = evt.stream;stream.stop();$('#agora_remote' + stream.getId()).remove();console.log("Remote stream is removed " + stream.getId());});screenClient.on('peer-leave', function (evt) {var stream = evt.stream;if (stream) {stream.stop();$('#agora_remote' + stream.getId()).remove();console.log(evt.uid + " leaved from this channel");}
});
}
function leave() {
// document.getElementById(“leave”).disabled = true;
client.leave(function () {
console.log(“Leavel channel successfully”);
}, function (err) {
console.log(“Leave channel failed”);
});
}
function publish() {
// document.getElementById(“publish”).disabled = true;
// document.getElementById(“unpublish”).disabled = false;
client.publish(localStream, function (err) {
console.log("Publish local stream error: " + err);
});
}
//关闭老师摄像头
function teaUnpublish() {
if (localStream != null) {
localStream.stop();
localStream.close()
client.unpublish(localStream, function(err) {
console.log(“Unpublish local stream failed” + err);
});
var btn = $("#startPlayBtn");
btn.attr(“onclick”,“teaJoin()”);
btn.css(“background-color”, “#338FCC”);
btn.val(“开始视频”);
localStream = null;
}
}
//关闭屏幕共享
function strUnpublish() {
if (screenStream != null) {
screenStream.stop();
screenStream.close()
client.unpublish(screenStream, function(err) {
console.log(“Unpublish local stream failed” + err);
});
var btn = $("#screenShare");
btn.attr(“onclick”,“verification()”);
btn.css(“background-color”, “#0e6eb8”);
$("#screenShare span").html(“屏幕共享”);
$("#video").css(“display”,“none”);
$("#container").css(“display”,“block”);
screenStream = null;
}
}
//关闭学生摄像头
function stUnpublish() {
if (videoStream != null) {
videoStream.stop();
videoStream.close()
client.unpublish(videoStream, function(err) {
console.log(“Unpublish local stream failed” + err);
});
videoStream = null;
}
}
function getDevices() {
AgoraRTC.getDevices(function (devices) {
for (var i = 0; i !== devices.length; ++i) {
var device = devices[i];
var option = document.createElement(‘option’);
option.value = device.deviceId;
if (device.kind === ‘audioinput’) {
option.text = device.label || 'microphone ’ + (audioSelect.length + 1);
audioSelect.appendChild(option);
} else if (device.kind === ‘videoinput’) {
option.text = device.label || 'camera ’ + (videoSelect.length + 1);
videoSelect.appendChild(option);
} else {
console.log('Some other kind of source/device: ', device);
}
}
});
}
getDevices();
//学生
function stuJoin() {
var channel_key = null;
client = AgoraRTC.createClient({mode: ‘rtc’, codec: ‘vp8’});
client.init(key.value, function () {
console.log(“AgoraRTC client initialized”);
client.join(channel_key, courseId, null, function (uid) {
console.log(“User " + uid + " join channel successfully”);
}, function (err) {console.log("Join channel failed", err);});
}, function (err) {console.log("AgoraRTC client init failed", err);
});channelKey = "";
client.on('error', function (err) {console.log("Got error msg:", err.reason);if (err.reason === 'DYNAMIC_KEY_TIMEOUT') {client.renewChannelKey(channelKey, function () {console.log("Renew channel key successfully");}, function (err) {console.log("Renew channel key failed: ", err);});}
});client.on('stream-added', function (evt) {var stream = evt.stream;client.subscribe(stream, function (err) {console.log("Subscribe stream failed", err);});
});client.on('stream-subscribed', function (evt) {var stream = evt.stream;var cameraId = $("#cameraId").html();var screenId = $("#screenId").html();//老师端摄像头//如果是老师,先打开小播放区,否则先打开大播放区if(stream.getId() !=cameraId && stream.getId() !=screenId){if ($('#playDiv').html() == "") {$('#playDiv').append('<div id="agora_remote5' + stream.getId() + '" style="float:left; width:100%;height:100%;display:inline-block;"></div>');stream.play('agora_remote5' + stream.getId());}else{$('#small_playDiv').html("");$('#small_playDiv').append('<div id="agora_remote5' + stream.getId() + '" style="float:left; width:100%;height:100%;display:inline-block;"></div>');stream.play('agora_remote5' + stream.getId());}}//学生端摄像头if(stream.getId() == cameraId){if (userRole != "Z") {if (userRole != "T") {//如果是老师,先打开小播放区,否则先打开大播放区if ($('#playDiv').html() == "") {$('#playDiv').append('<div id="agora_remote' + stream.getId() + '" style="float:left; width:100%;height:100%;display:inline-block;"></div>');stream.play('agora_remote' + stream.getId());} else if ($('#small_playDiv').html() == "") {$('#small_playDiv').append('<div id="agora_remote' + stream.getId() + '" style="float:left; width:100%;height:100%;display:inline-block;"></div>');stream.play('agora_remote' + stream.getId());}}}}//共享屏幕if(stream.getId() == screenId && userRole != "T"){$("#video").css("display","block");$("#agora_local2").css("display","none");$("#container").css("display","none");$("#applyBoardBtn").css("display","none");if ($('div#video #agora_remote' + stream.getId()).length === 0) {$('div#video').append('<div id="agora_remote' + stream.getId() + '" style="float:right; width:100%;height:100%;display:inline-block;"></div>');}stream.play('agora_remote' + stream.getId());}});client.on('stream-removed', function (evt) {var stream = evt.stream;stream.stop();$('#agora_remote' + stream.getId()).remove();if(userRole == "S"){if(stream.getId() == $("#screenId").html()){$("#applyBoardBtn").css("display","block");$("#container").css("display","block");$("#video").css("display","none");}}console.log("Remote stream is removed " + stream.getId());
});client.on('peer-leave', function (evt) {var stream = evt.stream;if (stream) {stream.stop();$('#agora_remote' + stream.getId()).remove();console.log(evt.uid + " leaved from this channel");}
});
}
声网实现屏幕共享以及直播相关推荐
- 人人皆可虚拟，直播还能这么玩？声网推出 MetaLive 元直播解决方案
视频群聊.在线社交.电商带货.游戏竞技-越来越多的场景融入了直播这一功能.无可厚非,直播可以拉近人与人间的距离,让彼此间的交流更具象.但传统直播场景更为强调主播个人的表现,用户多以围观.刷弹幕.打赏等 ...
- 利用声网进行屏幕共享及关闭共享网络状态检测
本地端与远程端创建并加入房间后,若需要进行屏幕共享,则可按以下步骤: 1⃣️用获取视频流的参数(channelName,videoRecordId)继续获取token结果一次次来加入同一个房间: 2⃣ ...
- 智慧树日均直播课堂超1.5万次 声网RTC技术保障学生“学的好”
在疫情期间开学第一个月,使用智慧树进行在线课程教学的高校就超1800所,日均直播课堂超15000课次,日活跃用户数翻番.这是国内专注高校教育的平台"智慧树"公布的疫情期间的部分数据 ...
- 如何实现一套可切换的声网+阿里的直播引擎
前言 小盒的直播业务一开始是打算用两套引擎切换使用的,所以需要封装一下.而且因为声网和阿里的直播sdk的官方文档都不是很全面,甚至有的还有错误(可能是文档没及时更新)导致无法正常运行,接入时问题多多, ...
- 声网连麦+直播+视频+游戏“史上最强”社交直播方案 打造陌陌全新8.0改版
做直播的,每天烧钱买流量,用户留存却是个问题.留不住用户,天天买量,天天流失.怎么破?做社交的,烧钱获客,赢得了口碑,却不知道如何变现,怎么破?做App的,装机量是上去了,用户活跃度和打开率却一直do ...
- 声网发布极速直播、低码高清 首创轻互动直播，节省50%带宽成本
12月10日,实时互动云服务开创者及引领者声网Agora在北京发布了首款定义轻互动直播场景的"极速直播"与可降低50%直播带宽成本的"低码高清"两大新产品,同时 ...
- 主流的第三方直播SDK对比（腾讯云、即构、阿里云、声网、网易云信、网宿）
直播业务概述 大家所熟知的直播平台虎牙.斗鱼.快手.抖音.B站,直播功能看似普遍,但从零到一开发却不简单.直播中运用到的技术难点非常之多,音频视频处理/编解码,前后处理,直播分发,即时通讯等技术,学好 ...
- 云直播SDK核心功能对比｜腾讯云、阿里云、声网、即构等SDK厂商对比
直播业务概述 大家所熟知的直播平台虎牙.斗鱼.快手.抖音.B站,直播功能看似普遍,但从零到一开发却不简单.直播中运用到的技术难点非常之多,音频视频处理/编解码,前后处理,直播分发,即时通讯等技术,学好 ...
- 声网 Agora Share：从天到秒级效率提升，一切都为服务好 15 万+应用
如今,实时音视频互动已成为生活中无处不在的场景,特别是疫情带来的"生活场景线上化",使亿万用户涌到线上,为线上应用带来了巨大流量.当实时音视频变成主流互动方式, 这项服务不仅仅是满 ...
最新文章
- Python脱产8期 Day02
- 行业洞见 | 一文了解自动驾驶汽车
- ubuntu16.04忘了root密码
- 计算机等级考试初级网络工程师,计算机等级网络工程师考试内容
- ASP.NET Core中的OWASP Top 10 十大风险-SQL注入
- mysql还是mdb2_mysql两种表存储结构myisam和innodb的性能比较测试
- OpenJTAG调试S3C2440裸板程序
- Java GregorianCalendar hashCode（）方法与示例
- 【机器学习课程笔记（吴恩达）】1.2 什么是机器学习？
- python模块 - functools模块
- Blue Coat 庖丁解牛 云安全势在必行
- MySQL入门系列：MySQL数据类型
- Eclipse_Java文件注解乱码
- 分布式服务协调---幂等(Idempotent)机制
- 什么是差模干扰、共摸干扰？
- Q3亏损收窄预计Q4季度实现盈利，趣头条走上盈利分水岭靠什么？
- LDAP认证服务客户端配置
- 《孩子，为你自己读书》（Yanlz+Unity+SteamVR+云技术+5G+AI+VR云游戏+多多图书馆+志存当高远+读万卷书如行万里路+术业有专攻+读书是对思想的一种升华+立钻哥哥++==）
- 北斗网络同步时钟与GPS卫星时钟同步设备的区别
- MATLAB批量读取航摄相片EXIF信息和GNSS信息以及MATLAB批量经纬度坐标转换空间直角坐标