EasyRTC URL.createObjectURL возвращает действительный URL, но элемент видео черный
Эта ошибка возникает, только когда easyRTC запускается внутри приложения angularJS.
Скажем, у нас есть 3 участника, A, B и C. Когда каждый из них подключается в случайное время, они видят видеопоток друг друга (3 одновременных потока). Скажи, А обновляет страницу. Это последовательность событий, упрощенная
easyrtc.setRoomOccupantListenerуволен- Список жильцов получен
- некоторые другие события easyrtc запущены
- для потока каждого пассажира генерируется URL потока, вызывая
URL.createObjectURL - URL потока добавляется в
videoэлемент и видео поток отображается (черезng-repeatметод)
НО
Хотя все работает, как и планировалось, A видит только видео с B. C имеет действительный URL-адрес потока, но видео черное.
- Это происходит только тогда, когда A обновляет страницу и извлекает все остальные потоки оптом.
- элемент видео живет внутри директивы. Я пытался создать элемент видео с помощью jQuery, внутри директивы, но не повезло
- Директива имеет изолированную область применения
- я использую
$sce.trustAsResourceURLдля потока URL - Тот же самый точный код прекрасно работает в файле примера js без углов
- Я пытался сохранить потоки в
window.myStreamArrayа затем в консоли заново сгенерируйте URL-адреса потоков и добавьте их к элементам видео с помощью некоторого jQuery. Это отлично работает для 1-го потока. 2-й поток, хотя я получаю действительный URL, ничего не отображается - Элемент видео имеет
autoplay
Код, который работает автономно и работает. тот же код работает как угловой сервис. Если мы откроем 3 вкладки браузера и нажмите " B" 1.connect, нажмите " C" 2.Connect, а нажмите " A" 1.Connect, A получит B и C и отобразит видеопотоки.
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
</head>
<body>
<h1>easy rtc demo</h1>
<button id="btnOneInit">1. connect</button>
<button id="btnOne">1. start streaming</button>
<button id="btnTwoInit">2. connect</button>
<button id="btnTwo">2. start streaming</button>
<div id="one">
<video autoplay src=""></video>
</div>
<div id="two">
<video autoplay src=""></video>
</div>
<div id="three">
<video autoplay src=""></video>
</div>
<div id="four">
<video autoplay src=""></video>
</div>
<script src="/lib/jquery-2.1.0.min.js"></script>
<script src="/lib/sugar.min.js"></script>
<script src="/lib/socket.io.js"></script>
<script src="/lib/sails.io.js"></script>
<script src="/lib/easyrtc.js"></script>
<script>
function easy() {
var _localRoom, _remoteRoom, _localStream, _remoteStreams, _available , _webRTCinitialized, _user;
var _acceptedStreamsMap = {};
var roomName = "SectorOne";
var mySocket;
function init(options) {
_webRTCinitialized = false;
_available = false;
_remoteStreams = [];
_remoteRoom = {
id: undefined,
token: undefined
};
mySocket = io.connect();
_user = {
id: options.id,
role: 'presenter'
};
return this;
}
function connect() {
easyrtc.dontAddCloseButtons();
easyrtc.enableDebug(true);
easyrtc.enableAudio(false);
easyrtc.enableVideo(false);
easyrtc.enableAudioReceive(true);
easyrtc.enableVideoReceive(true);
easyrtc.setRoomOccupantListener(occupantsChanged);
easyrtc.connect('auvious.audioVideo', function (easyrtcid, roomOwner) {
_localRoom = easyrtcid;
console.log('connected with id : ' + easyrtcid);
}, function (error) {
alert(error);
});
easyrtc.setDisconnectListener(roomDisconnected);
easyrtc.setStreamAcceptor(callAccepted);
easyrtc.setAcceptChecker(acceptCall);
easyrtc.setOnStreamClosed(streamRemoved);
}
function startStreaming(audio, video, screen) {
easyrtc.enableAudio(audio);
easyrtc.enableVideo(video);
easyrtc.enableAudioReceive(true);
easyrtc.enableVideoReceive(true);
easyrtc.initMediaSource(
// success callback
function () {
var stream = easyrtc.getLocalStream();
var compositeID = _user.id;
var eventData = {userId: _user.id, role: _user.role, easyrtcid: _localRoom, id: stream.id, video: video, audio: !video, screen: screen};
_acceptedStreamsMap[_localRoom] = eventData;
var streamUrl = easyrtc.getLocalStreamAsUrl();
var options = {video: video, audio: !video, screen: screen, local: true, streamUrl: streamUrl};
console.log('about to show LOCAL stream...');
showStream(compositeID, stream, options);
easyrtc.setRoomApiField(roomName, _localRoom, JSON.stringify(eventData));
},
function (err) {
alert(err);
}
);
}
function occupantsChanged(roomName, occupants, selfInfo) {
_remoteStreams = [];
easyrtc.setRoomOccupantListener(null);
for (var easyrtcid in occupants) {
var occ = occupants[easyrtcid];
if (occ && occ.apiField) {
var streamingId = occ.apiField[easyrtcid];
if (streamingId && !_acceptedStreamsMap.hasOwnProperty(streamingId)) {
var data = JSON.parse(occ.apiField[easyrtcid].fieldValue);
_remoteStreams.push(data);
}
}
}
if (_remoteStreams.length > 0)
callOthers();
}
function callAccepted(easyrtcid, stream) {
if (_acceptedStreamsMap[easyrtcid] && !_acceptedStreamsMap[easyrtcid].streaming) {
var remoteStream = _acceptedStreamsMap[easyrtcid];
var compositeID = remoteStream.userId;
var options = Object.clone(remoteStream);
options.streamUrl = URL.createObjectURL(stream);
options.local = false;
console.log('about to show remote stream...');
console.log(_acceptedStreamsMap);
_acceptedStreamsMap[easyrtcid].streaming = true;
showStream(compositeID, stream, options);
}
}
function acceptCall(easyrtcid, acceptedCB) {
acceptedCB(true);
}
function callOthers() {
function establishConnection(position) {
function callSuccess() {
}
function callFailure(errorCode, errorText) {
}
if (position >= 0) {
console.log('calling ....' + _remoteStreams[position].easyrtcid);
easyrtc.call(_remoteStreams[position].easyrtcid, callSuccess, callFailure, function (accepted, easyrtcid) {
if (position > 0) {
establishConnection(position - 1);
}
connectionCallAccepted(accepted, easyrtcid)
})
}
}
if (_remoteStreams.length > 0) {
establishConnection(_remoteStreams.length - 1);
}
}
function connectionCallAccepted(accepted, easyrtcid) {
if (accepted) {
if (_acceptedStreamsMap[easyrtcid] == undefined) {
_acceptedStreamsMap[easyrtcid] = _remoteStreams.find(function (stream) {
return stream.easyrtcid == easyrtcid;
});
}
console.log('accepted stream--->' + easyrtcid);
console.log(_acceptedStreamsMap)
}
}
function showStream(compositeID, stream, options) {
$(compositeID).find('video').attr('src', options.streamUrl);
console.log('streaming...');
}
function closeStream(stream) {
easyrtc.enableAudio(false);
easyrtc.enableVideo(false);
if (stream.local) {
delete _acceptedStreamsMap[_localRoom];
easyrtc.setRoomApiField(roomName, _localRoom, undefined);
easyrtc.closeLocalStream(stream.streamName);
}
}
function streamRemoved(easyrtcId) {
easyrtc.enableAudio(false);
easyrtc.enableVideo(false);
var stream = _acceptedStreamsMap[easyrtcId];
if (stream) {
console.log('stream removed ---->' + easyrtcId);
console.log(_acceptedStreamsMap);
var attrs = {guid: stream.id, userId: stream.userId};
delete _acceptedStreamsMap[easyrtcId];
console.log(_acceptedStreamsMap);
}
}
function roomDisconnected() {
}
function disconnect() {
easyrtc.disconnect();
}
return {
init: init,
startStreaming: startStreaming,
connect: connect,
disconnect: disconnect,
closeStream: closeStream
}
}
var rtc = new easy();
$('#btnOneInit').click(function () {
rtc.init({id: "#one"});
rtc.connect();
})
$('#btnTwoInit').click(function () {
rtc.init({id: "#two"});
rtc.connect();
})
$('#btnOne, #btnTwo').click(function () {
rtc.startStreaming(false, true, false);
})
</script>
</body>
</html>