How to get video stream from webcam in angular
Question
I need to stream video from my webcam to all user that enter my webpage.
If i currently go to my page i can see myself at the webcam, but I want that every user that browse to my page will see my broadcast live.
I am new to angular, what am I missing here? How can I broadcast to all users that entering my page?
I have this html code:
<body>
<div ng-app="myapp" ng-controller="mainController">
<webcam channel="channel"
on-streaming="onSuccess()"
on-error="onError(err)"
on-stream="onStream(stream)">
</webcam>
<button ng-click="makeSnapshot()">take picture</button>
<canvas id="snapshot" width="300" height="300"></canvas>
</div>
<div class="webcam" ng-transclude></div>
<div id="stream" ></div>
</body>
And my module code:
var webcam = angular.module('myapp', ['webcam'])
.controller('mainController', function ($scope) {
var _video = null,
patData = null;
$scope.patOpts = { x: 0, y: 0, w: 25, h: 25 };
$scope.channel = {};
$scope.webcamError = false;
$scope.onError = function (err) {
};
$scope.onSuccess = function () {
_video = $scope.channel.video;
$scope.$apply(function () {
$scope.patOpts.w = _video.width;
$scope.patOpts.h = _video.height;
$scope.showDemos = true;
});
};
$scope.onStream = function (stream) {
//i think it is here i need to add some code for streaming
};
$scope.makeSnapshot = function () {
};
$scope.downloadSnapshot = function downloadSnapshot(dataURL) {
window.location.href = dataURL;
};
var getVideoData = function getVideoData(x, y, w, h) {
};
var sendSnapshotToServer = function sendSnapshotToServer(imgBase64) {
$scope.snapshotData = imgBase64;
};
});
1 answers
solution1
0 2016-12-07 18:59:16
You need create a Stream Live video.
Record webcam stream
Send stream to your server and save file mp4
In the home page, read public mp4 (by url)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.