roomrtc
Version:
RoomRTC enables quick development of webRTC
143 lines (129 loc) • 6.07 kB
HTML
<html ng-app="demo">
<head>
<meta charset="utf-8">
<meta name="description" content="RoomRTC dev tests">
<title>RoomRTC dev tests</title>
<!-- load appcss -->
<link href="bootstrap-v3.3.7.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="data:image/png;base64,iVBORw0KGgo=" rel="icon" type="image/png">
<!-- load appjs -->
<script src="angular-v1.4.9.js"></script>
<script src="/roomrtc.bundle.js"></script>
<script type="text/javascript">
angular.module("demo", [])
.controller("roomController", function ($scope, $timeout, $sce) {
$scope.localVideo = null;
$scope.remoteVideos = {};
$scope.isConnected = false;
$scope.clients = {};
var room = $scope.room = (location.search && location.search.split('?')[1]) || "demo";
var roomRTC = new RoomRTC({ url: 'https://www.abacsi.com/', connectMediaServer: true });
roomRTC.initMediaSource()
.then(stream => {
var streamUrl = roomRTC.getStreamAsUrl(stream);
$timeout(function () {
$scope.localVideo = $sce.trustAsResourceUrl(streamUrl);
joinMediaServer(room);
});
});
function joinMediaServer(room) {
if (!$scope.localVideo || !$scope.isConnected) {
// wait for ready.
return;
}
roomRTC.joinMediaServer(room)
.then(data => {
console.log('joinMediaServer ok!', data);
})
.catch(err => {
console.error('joinMediaServer error: ', err);
});
}
roomRTC.on("connected", function (id) {
console.log("connected connectionId: ", id);
});
roomRTC.on("readyToCall", function (id) {
console.log("readyToCall, connectionId: ", id);
roomRTC.joinRoom(room)
.then(roomData => {
console.log("joinRoom ok: ", roomData);
$timeout(function () {
$scope.isConnected = true;
$scope.clients = roomData.clients;
});
return roomData.clients;
})
.catch(err => {
console.error("joinRoom error: ", err);
});
});
roomRTC.on('readyToJoinMediaServer', id => {
$scope.isConnected = true;
joinMediaServer(room);
});
roomRTC.on("videoAdded", function(pc, stream) {
var pid = (pc.id || pc.sid) + stream.id;
console.log("Ohh, we have a new participant", pid);
$timeout(function() {
var streamUrl = roomRTC.getStreamAsUrl(stream);
var trustUrl = $sce.trustAsResourceUrl(streamUrl);
$scope.remoteVideos[pid] = trustUrl;
$scope.clients[pid] = pc.resources;
})
});
roomRTC.on("videoRemoved", function(pc) {
var pid = (pc.id || pc.sid) + pc.stream.id;
var url = $scope.remoteVideos[pid];
roomRTC.revokeObjectURL(url);
console.log("Ohh, a participant has gone", pid);
$timeout(function() {
// remove url from remoteVideos
delete $scope.remoteVideos[pid];
delete $scope.clients[pid];
})
});
/**
* Setup control buttons
* */
$scope.stop = function () {
$scope.localVideo = null;
roomRTC.stop();
}
$scope.start = function () {
roomRTC.initMediaSource().then(stream => {
var streamUrl = roomRTC.getStreamAsUrl(stream);
$timeout(function () {
$scope.localVideo = $sce.trustAsResourceUrl(streamUrl);
});
});
}
});
</script>
</head>
<body ng-controller="roomController">
<div class="row">
<div class="col-xs-6">
<h1 ng-if="!isConnected">Connecting to: <span ng-bind="room">demo</span>...</h1>
<h1 ng-if="isConnected">You are in room: <span ng-bind="room">demo</span></h1>
<video class="mirror" id="localVideo" width="300" height="200" ng-src="{{localVideo}}" ng-muted="true" resize autoplay="true" ng-context-menu-disabled="true"></video>
<div class="media-controls">
<input type="button" value="Stop" ng-click="stop()">
<input type="button" value="Start" ng-click="start()">
</div>
</div>
<div class="col-xs-6">
<h4>Display list clients</h4>
<ul>
<li ng-repeat="(id, client) in clients">{{ $index + 1 }}: [{{ id }},{{ client.name }}]</li>
</ul>
</div>
</div>
<div id="remotes">
<div class="video" ng-repeat="(id, remoteVideo) in remoteVideos">
<video id="{{id}}" ng-src="{{remoteVideo}}" resize autoplay="true"></video>
</div>
</div>
</body>
</html>