<!DOCTYPE html>
<html>
<head>
<script src="node_modules/es5-shim/es5-shim.js"></script>
<script src="node_modules/angular/angular.js"></script>
<script src="lib/simple-webrtc.js"></script>
<script src="ng-simple-webrtc.js"></script>
<link href="styles.css" rel="stylesheet">
</head>
<body ng-app="BroadcastApp">
<p>Simple Angular broadcaster via WebRTC</p>
<div id="ctrl" ng-controller="BroadcastAppController">
<button ng-click="prepare()" ng-disabled="hasStream">Prepare to broadcast</button>
<broadcaster
has-stream="hasStream"
mirror="true"
room-name="roomName"
muted="true"
source-id="sourceId"
min-width="minWidth"
is-broadcasting="isBroadcasting"></broadcaster>
<div ng-show="hasStream">
<h3>Start my own room</h3>
<input type="text" ng-model="roomName" placeholder="Enter a new room name" />
<button ng-click="start()" ng-disabled="!roomName || broadcasting">Start room</button>
<p ng-show="isBroadcasting">Broadcasting. To watch connect to this server and open
<a href="watch.html" target="_blank">watch.html</a> page.
Enter the same room "{{ roomName }}" and watch this video stream.</p>
<p>Message <input type="text" ng-model="message" placeholder="Enter message" /> to peers
in the room <button ng-click="sendMessage()">Send</button>
</div>
</div>
<script src="node_modules/console-log-div/console-log-div.js"></script>
<script>
angular.module('BroadcastApp', ['SimpleWebRTC'])
.run(function () {
if (window.MediaStreamTrack) {
MediaStreamTrack.getSources(function (sources) {
var videoSources = sources.filter(function (source) {
return source.kind === 'video';
});
console.log('got video sources', videoSources);
});
}
})
.controller('BroadcastAppController', function ($scope) {
$scope.hasStream = false;
$scope.roomName = '';
$scope.isBroadcasting = '';
// set to value if you want to connect to a specific source
// source id returned by navigator.getUserMedia
// $scope.sourceId = '140903818cd57b682ab8d6e23005d501ae3627fdffa0331a88ea580afff9eb71';
$scope.minWidth = 1280;
$scope.message = 'hi there';
$scope.prepare = function prepare() {
$scope.$broadcast('prepare');
};
$scope.start = function start() {
$scope.$broadcast('start');
};
$scope.sendMessage = function sendMessage() {
$scope.$broadcast('messageAll', $scope.message);
};
$scope.$on('channelMessage', function (event, peer, message) {
console.log('message', message);
});
});
</script>
</body>
</html>