声网实现屏幕共享以及直播

最新推荐文章于 2022-10-18 18:52:24 发布
最新推荐文章于 2022-10-18 18:52:24 发布
阅读量4.7k 收藏 2
点赞数 2
分类专栏： 原创 文章标签： 屏幕共享 直播 js 声网
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36717653/article/details/83505324
版权

最近因为公司新增需求所以花费了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");
    }
});

}

猿老
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
java实现屏幕共享功能实例分析
09-04
主要介绍了java实现屏幕共享功能的方法,以实例形式分析了屏幕共享功能的客户端与服务端的详细实现方法,是非常具有实用价值的技巧,需要的朋友可以参考下
声网的视频直播与屏幕共享
kangluon的博客
06-09 2614
视频直播 以下是操作步骤 1. 获取当前设备的 麦克风 摄像头 扬声器 等数据 2. 创建直播实例 3. 给当前实例绑定事件 4. 初始化频道 5. 加入频道 6. 创建本地流 7. 初始化本地流 8. 发布本地流 重中之中 引入声网的SDK，会用到jquery 也先引入 import AgoraRTC from 'agora-rtc-sdk' import $ from 'jquery' 获取当前设备的 麦克风 摄像头 扬声器 等数据 --（AgoraRTC.getDevices） Agor
利用声网进行屏幕共享及关闭共享&&网络状态检测
qq_51196135的博客
10-18 1566
利用声网进行屏幕共享及关闭共享&&网络状态检测
声网关闭（打开）摄像头，翻转摄像头，静音功能（vue）
qq_51196135的博客
10-18 1646
声网关闭（打开）摄像头，翻转摄像头，静音功能（vue）
agora(声网)web端(Vue)与小程序内拉流处理方式
渣渣宇的博客
02-19 4418
简单说一下agora在不同框架内端应用，以后可以直接套用。 由于我只做过拉流，所以只记录拉流的步骤。 以下都是以 互动直播 产品为前提下进行的开发。 Web端(agora.version:4.3.0) 概述 /** * agora声网解决方案 * 1. 创建 AgoraClient 对象 * 2. join进入相应频道 * 3. on 监听 user-published 拿到远端用户对象 AgoraRTCRemoteUser * 4. subscribe订阅流 将3.内的参数(远端用户对象, t
声网 视频通话SDK小结
初心一点的专栏
04-17 3763
声网视频通话、直播SDK小结视频通话、直播场景和特点SDK下载集成步骤集成注意点 视频通话、直播场景和特点 视频通话： 视频通话 SDK 可实现 一对一单聊、多人群聊，同时具备 纯语音通话 和视频通话功能 视频通话和视频互动直播不同。视频通话，不分主播和观众，所有用户都可自由发言，默认流畅和低延时优先，画质稍低，典型场景如 多人视频会议 视频通话功能和场景，点击了解详情 视频直播： 互动直播...
Electrons实现Chrome使用WebRTC实现屏幕共享
07-08
使用Electron和Chrome的WebRTC实现屏幕共享，客户端与服务端使用socket.io连接。
C# winform屏幕共享 Stocket网络通信-菜鸟入门 详细注释
12-10
简单的winform屏幕共享，实现服务端和多个客户端之间的屏幕共享，自动获取局域网ip和端口号，详细代码注释，希望对stocket网络通信的小伙伴有帮助
原创　qt 组播实现的屏幕共享程序　
05-16
原创qt 组播实现的屏幕共享程序. 更多例子: blog.csdn.net/jklinux　
共享屏幕工具
04-04
屏幕共享是一个多人远程桌面共享软件，这款桌面屏幕共享能够在网络上替代投影仪，实现多人演示。可以在局域网内远程显示对方机器的桌面（支持远程控制）。 服务端可查看连接用户列表，用户姓名，连接状态。 适用于...
electron_sdk:一个基于声网electron-sdk 的直播互动、视频、屏幕共享的demo示例
05-25
基于声网electron sdk和react构建示例应用程序 环境要求 在 创建一个开发人员帐户。完成注册过程后，您将被重定向到仪表板，在左侧的仪表板树中导航至“ 项目” >“ 项目列表”，从仪表板获取的应用程序ID复制到文本文件中。启动应用程序时将使用它。 >=6.9.1 >= 1.8.3 快速开始 打开 文件并添加应用程序App_ID. 注：如果懒得注册开发者账号获取APP ID，可以使用我的APP_ID：8797638c21bc4c1886a74228ffa5c16e 注意: npm install 安装依赖项其中electron会默认安装64位的，但是声网的electron sdk 只支持32位的electron ，所以在npm install 安装依赖前在package.json文件中先删掉 "electron": "^5.0.8"，等npm install 安装完依赖项
Agora网络屏幕共享「Agora Web Screensharing」-crx插件
03-09
扩展以允许在Agora Web应用程序中进行屏幕共享。 扩展以允许在Agora Web应用程序中进行屏幕共享。 支持语言:English (United States)
声网 AgoraRTCError CAN_NOT_GET_GATEWAY_SERVER: invalid token, authorized failed
wyanyi的博客
07-14 4428
声网 RTC WEBBasic Video Call Demo 中 ，使用指定整数uid获取token后，老是报错AgoraRTCError CAN_NOT_GET_GATEWAY_SERVER: invalid token, authorized failed，然后拿官网生成的临时token是可以的，一度怀疑是后端生成token接口的问题，最终发现这个demo有点坑啊 demo上只有三个参数，appId, token和channel，此时用官网生成的临时token是可以跑的 但是使用指定...
WebRTC - Agora （声网）简介与实现音视频通话
weixin_34335458的博客
10-18 1577
Agora （声网）简介 官网： www.agora.io/cn/ 一个专注移动端的高清实时通话云服务解决方案。 SD-RTN（Software Defined Real-time Network） SD-RTN（Software Defined Real-time Network）是依赖于云计算技术并致力于全球实时音视频业务传输的“智简”网络，覆盖全球 200+ 国家。作为提供实时音视频业务的 ...
java声网_声网Agora集成踩坑录
weixin_33656445的博客
03-08 789
最近项目用到了agora 来进行语音和视频通话。官网上写的是四行代码实现语音。其实的话中间还是有些问题存在的。就是建议使用demo里的workthread 和他的eventhandler 因为文档中说明 创建RtcEngine 和调用最好在一个线程。所以最后自己创建一个子线程用来创建对象和调用 join 什么的。这样不会有问题。使用中遇到一个问题就是。两个手机无法加入一个频道内。不互通。后来发现...
vue在打包，声网sdk，部署上线后，出现未初始化的报错，Agora-SDK [ERROR]: Cannot access ‘e‘ before initialization
qq_39738977的博客
02-13 4193
Agora-SDK [ERROR]: [client-c143d] subscribe user 74291802 error ReferenceError: Cannot access ‘e’ before initialization 问题原因参考RTC开发者社区的回答 RTC开发者社区回答链接 参考大佬的解决思路 解决参考办法 如果项目和截图中的一样 1.那就在webpack.base.conf.js中增加一项配置externals externals: { 'AgoraRTCSdkNg':
agora声网多人语音通话，屏蔽视频功能
qq_33475265的博客
08-12 1479
public class VoiceRoom17ChatActivity extends BaseChatActivity implements AGEventHandler,LiveRoom17Adapter.onClickButtonInterface{ private final static Logger log = LoggerFactory.getLogger(VoiceR...
集成声网（Agora）SDK踩坑集锦系列
热门推荐
liuzhen007的专栏
04-12 1万+
本文以Android平台为例，使用的声网SDK版本2.4.0. 问题一、/app/src/main/res/values/strings.xml:4:34: Error: 元素内容必须由格式正确的字符数据或标记组成。 解决：下载声网的官方demo，编译运行第一次都会遇到这个报错。其实是提示我们使用正确的app ID，有的话直接用ID字符串替换该位置即可。如果没有去声网的官网注册一下再补上。注意...
声网Agora web-RTC监听订阅对端音视频轨无效
ma_luping的博客
04-25 1847
声网web-RTC与对端都在频道内后，web本端如何都无法订阅到对端（Linux服务端）的音视频轨道，具体代码如下： 1、加入RTC并监听频道内用户的发布和取消发布 async function joinRTC() { clienRTC.on("user-published", handleUserPublished); clienRTC.on("user-unpublished", handleUserUnpublished); try { [options.destRt
html实现屏幕共享
最新发布
10-12
HTML本身并不能实现屏幕共享的功能，但可以通过WebRTC技术实现。WebRTC是一种实时通信技术，可以在浏览器之间传输音频、视频和数据流。屏幕共享就是通过WebRTC传输屏幕捕获的视频流。 具体实现步骤如下： 1. 使用getUserMedia API获取屏幕捕获的视频流。 2. 使用RTCPeerConnection API建立点对点连接。 3. 将视频流通过RTCPeerConnection传输到远程浏览器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值