在WebRTC中使用getScreenId.js为两个对等点共享屏幕
在WebRTC中使用getScreenId.js为两个对等点共享屏幕
提问于 2016-06-03 21:59:01
我正在尝试在webrtc视频会议中实现屏幕共享功能。根据建议，我现在使用https://www.webrtc-experiment.com/getScreenId/遵循muaz-khan的解决方案。我可以很容易地捕获一个对等体的应用程序映像，并用捕获的流替换视频流。但这是一个视频会议实验，所以两个浏览器需要互相进行视频会议。例如，浏览器1具有视频流A(本地视频)、视频流B(远程视频)；浏览器2具有视频流B(本地视频)、视频流A(远程视频)。因此，当我在浏览器1中尝试共享屏幕时，共享屏幕流应该替换浏览器1中的本地视频和浏览器2中的远程视频。
但现在，我只能让共享屏幕替换浏览器1中的本地视频，浏览器2没有任何更改，无法看到其远程视频(即浏览器1中的本地视频)的任何更改。我也不知道如何在浏览器2中触发更改。我是否需要向服务器发送共享屏幕流信号？并相应地更改远程流？
下面是我的javascript代码：
$(function() {
var brokerController, ws, webRTC, localid;
// ws = new XSockets.WebSocket("wss://rtcplaygrouund.azurewebsites.net:443", ["connectionbroker"], {
ws = new XSockets.WebSocket("ws://localhost:4502", ["connectionbroker"], {
ctx: "152300ed-4d84-4e72-bc99-965052dc1e95"
});
var addRemoteVideo = function(peerId,mediaStream) {
var remoteVideo = document.createElement("video");
remoteVideo.setAttribute("autoplay", "true");
remoteVideo.setAttribute("rel",peerId);
attachMediaStream(remoteVideo, mediaStream);
remoteVideo.setAttribute("class", "col-md-3");
remoteVideo.setAttribute("height", $( document ).height() * 0.3);
remoteVideo.setAttribute("id", 'remoteVideo');
$("#videoscreen").append(remoteVideo);
};
var onConnectionLost = function (remotePeer) {
console.log("onconnectionlost");
var peerId = remotePeer.PeerId;
var videoToRemove = $("video[rel='" + peerId + "']");
videoToRemove.remove();
};
var oncConnectionCreated = function() {
console.log("oncconnectioncreated", arguments);
}
var onGetUerMedia = function(stream) {
console.log("Successfully got some userMedia , hopefully a goat will appear..");
webRTC.connectToContext(); // connect to the current context?
};
var onRemoteStream = function (remotePeer) {
addRemoteVideo(remotePeer.PeerId, remotePeer.stream);
console.log("Opps, we got a remote stream. lets see if its a goat..");
};
var onLocalStream = function(mediaStream) {
console.log("Got a localStream", mediaStream.id);
localid = mediaStream.id;
console.log("check this id: meadiastram id ", mediaStream.id);
var video = document.createElement("video");
video.setAttribute("height", "100%");
video.setAttribute("autoplay", "true");
video.setAttribute("id", "localvideo");
video.setAttribute("name", mediaStream.id);
attachMediaStream(video, mediaStream);
$("#videoscreen").append(video);
$('#share').click(function() {
getScreenId(function (error, sourceId, screen_constraints) {
navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
navigator.getUserMedia(screen_constraints, function (stream) {
$('#localvideo').attr('src', URL.createObjectURL(stream));
}, function (error) {
console.error(error);
});
});
});
};
var onContextCreated = function(ctx) {
console.log("RTC object created, and a context is created - ", ctx);
webRTC.getUserMedia(webRTC.userMediaConstraints.hd(true), onGetUerMedia, onError);
};
var onOpen = function() {
console.log("Connected to the brokerController - 'connectionBroker'");
webRTC = new XSockets.WebRTC(this);
webRTC.onlocalstream = onLocalStream;
webRTC.oncontextcreated = onContextCreated;
webRTC.onconnectioncreated = oncConnectionCreated;
webRTC.onconnectionlost = onConnectionLost;
webRTC.onremotestream = onRemoteStream;
};
var onConnected = function() {
console.log("connection to the 'broker' server is established");
console.log("Try get the broker controller form server..");
brokerController = ws.controller("connectionbroker");
brokerController.onopen = onOpen;
};
ws.onconnected = onConnected;
}); 我使用xsocket作为服务器，单击共享并使用共享屏幕流更改本地流的代码非常简单：
$('#share').click(function() {
getScreenId(function (error, sourceId, screen_constraints) {
navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
navigator.getUserMedia(screen_constraints, function (stream) {
$('#localvideo').attr('src', URL.createObjectURL(stream));
}, function (error) {
console.error(error);
});
});任何帮助或建议都将不胜感激。
谢谢你指出另一个帖子：How to addTrack in MediaStream in WebRTC，但我不认为它们是一样的。在这种情况下，我也不确定如何重新协商远程连接。
webrtc连接的Xsocket.webrtc.js文件：https://github.com/XSockets/XSockets.WebRTC/blob/master/src/js/XSockets.WebRTC.latest.js
在这种情况下，我如何重新协商远程连接？
回答 2
Stack Overflow用户
发布于 2016-06-07 22:15:23
我自己想出了一个解决这个问题的办法，不要用sharescreen流替换本地流，而是从本地div中删除旧的本地流，然后将新的sharescreen流添加到本地div中。同时，通过datachanel将旧的本地流id发送到另一个对等体，并删除该旧的远程视频。
最重要的是重新刷新流(重新协商)，然后共享屏流将在远程对等显示。
代码：
$('#share').click(function() {
getScreenId(function (error, sourceId, screen_constraints) {
navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
navigator.getUserMedia(screen_constraints, function (stream) {
webRTC.removeStream(webRTC.getLocalStreams()[0]);
var id = $('#localvideo').attr('name');
$('#localvideo').remove();
brokerController.invoke('updateremotevideo', id);
webRTC.addLocalStream(stream);
webRTC.getRemotePeers().forEach(function (p) {
webRTC.refreshStreams(p);
});
}, function (error) {
console.error(error);
});
});
}); 在获得从服务器中删除旧视频流的命令后：
brokerController.on('updateremotevideo', function(streamid){
$(document.getElementById(streamid)).remove();
});这个解决方案对我很有效。虽然如果只想用共享屏幕流替换本地视频流，但我们需要使用sdp重新创建提供，并将sdp发送到远程对等点。它更复杂。
Stack Overflow用户
发布于 2016-11-19 14:45:04
getScreenId(function (error, sourceId, screen_constraints) {
navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
navigator.getUserMedia(screen_constraints, function (stream) {
navigator.getUserMedia({audio: true}, function (audioStream) {
stream.addTrack(audioStream.getAudioTracks()[0]);
var mediaRecorder = new MediaStreamRecorder(stream);
mediaRecorder.mimeType = 'video/mp4'
mediaRecorder.stream = stream;
self.setState({recorder: mediaRecorder, startRecord: true, shareVideo: true, pauseRecord: false, resumeRecord: false, stopRecord: false, downloadRecord: false, updateRecord: false});
document.querySelector('video').src = URL.createObjectURL(stream);
var video = document.getElementById('screen-video')
if (video) {
video.src = URL.createObjectURL(stream);
video.width = 360;
video.height = 300;
}
}, function (error) {
alert(error);
});
}, function (error) {
alert(error);
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37616376
复制相关文章
相似问题
腾讯云开发者
