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