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;
};
});
Related
I would like to integrate a feature to my website which can detect QR codes. So for that, I had used Barcode Detection API. But it is returning undefined for rawData
<meta name="viewport" content="width=device-width"/>
<video id="bar" autoplay style="width:100vw;height:100vh;margin:0;object-fit:cover;"></video>
<canvas id="canvas1" hidden></canvas>
<img id="input" hidden/>
navigator.mediaDevices.getUserMedia({
audio: 0,
video: {
facingMode: {
exact: "environment"
}
}
}).then(s => {
const bar = document.getElementById('bar');
bar.srcObject = s;
bar.onloadedmetadata = () => {
setInterval(() => {
const canvas = document.getElementById('canvas1');
canvas.width = bar.videoWidth;
canvas.height = bar.videoHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(bar, 0, 0);
const input = document.getElementById('input');
input.src = canvas.toDataURL();
if ('BarcodeDetector' in window) {
const detector = new BarcodeDetector();
detector.detect(input).then(detections => {
detections.forEach(detected => {
alert(detected.rawData)
})
})
}
}, -1)
}
});
Here is the demo: https://authentication-demo.000webhostapp.com/
EDIT
Issue is resolved. I had simply changed to rawValue from rawData.
alert(detected.rawValue||detected.rawData);
just add breakpoint on result variable.
in this case is detected.
so you can use the required data as you wish.
Ex:
detected.rawValue
Hi i´m trying to show chessboardjs on a form view in odoo backend, I finally make the widget to show the board, but the pieces are hidden, I don´t know why because seems to work fine, except for the pieces. If I use dragable : true in the options and move a hidden piece then the board is rendered with all the pieces. do I´m missing something, on my code that the chessboard its not rendered well??
here is mi widget code:
(function (instance) {
var _t = instance.web._t,
_lt = instance.web._lt;
var QWeb = instance.web.qweb;
openerp.chess_base = function (instance, local) {
local.YourWidgetClassName = instance.web.form.FormWidget.extend({
start: function () {
this.$el.append('<div id="board" style="width: 300px">BOARD GOES HERE</div>'); // creating the board in the DOM
this.onBoard();
},
onBoard: function (position, orientation) {
if (!position) {
this.position = 'start'
} else {
this.position = position
}
if (!orientation) {
this.orientation = 'white'
} else {
this.orientation = orientation
}
this.el_board = this.$('#board');
this.cfg = {
position: this.position,
orientation: this.orientation,
draggable: false,
pieceTheme: '/chess_base/static/img/chesspieces/wikipedia/{piece}.png'
};
this.board = ChessBoard(this.el_board, this.cfg);
}
});
instance.web.form.custom_widgets.add('widget_tag_name', 'instance.chess_base.YourWidgetClassName');
}
})(openerp);
I don't know why but this solve the issue, if someone have an explanation to me please ...
(function (instance) {
var _t = instance.web._t,
_lt = instance.web._lt;
var QWeb = instance.web.qweb;
openerp.chess_base = function (instance, local) {
local.ShowBoard = instance.web.form.FormWidget.extend({
start: function () {
this.$el.append('<div id="board" style="width: 300px">BOARD GOES HERE</div>');
this.show_board();
},
show_board: function () {
var Game = new instance.web.Model("chess.game"),
record_id = this.field_manager.datarecord.id,
record_name = this.field_manager.datarecord.name,
self = this;
self.el_board = self.$('#board');
Game.query(['pgn']).filter([['id', '=', record_id], ['name', '=', record_name]]).all().then(function (data) {
console.log(data);
self.cfg = {
position: data[0].pgn,
orientation: 'white',
pieceTheme: '/chess_base/static/img/chesspieces/wikipedia/{piece}.png'
};
ChessBoard(self.el_board, self.cfg);
});
}
});
instance.web.form.custom_widgets.add('board', 'instance.chess_base.ShowBoard');
}
})(openerp);
I am designing a webpage that allows the user to upload an image and take measurements (counts, lengths, and angles). Uses both jQuery and fabric.js - The user can push one of three buttons for the appropriate analysis (i.e. counts, lengths, or angles). However, currently I can't figure out how to remove objects from one canvas while preserving the background image that the user uploads. Any help greatly appreciated.
You have just to call the clear method of canvas.
Take a look to the executable snippet below(or this JSFiddle), you can load an image as background, draw rectangles on it and delete all rectangle.
var eCommands;
(function(eCommands) {
eCommands[eCommands["None"] = 0] = "None";
eCommands[eCommands["Rect"] = 1] = "Rect";
eCommands[eCommands["Delete"] = 2] = "Delete";
})(eCommands || (eCommands = {}));
var Application = (function() {
function Application(canvas, rectButton, deleteButton, uploadButton) {
this._currentCommand = eCommands.None;
this._canvas = new fabric.Canvas(canvas);
this._rectButton = rectButton;
this._deleteButton = deleteButton;
this._uploadButton = uploadButton;
var cc = this._currentCommand;
var c = this._canvas;
var self = this;
this._drawRect = function() {
self._currentCommand = eCommands.Rect;
};
this._delete = function() {
c.clear();
};
this._executeCurrentCommand = function(e) {
switch (self._currentCommand) {
case eCommands.Rect:
var rect = new fabric.Rect({
left: c.getPointer(e.e).x - 10,
top: c.getPointer(e.e).y - 10,
fill: 'red',
width: 20,
height: 20
});
c.add(rect);
c.renderAll.bind(c);
break;
}
};
this._drawBackground = function(e) {
var reader = new FileReader();
reader.onload = function(event) {
c.setBackgroundImage(event.target.result, c.renderAll.bind(c), {});
};
reader.readAsDataURL(e.target.files[0]);
};
this._rectButton.addEventListener('click', this._drawRect, false);
this._deleteButton.addEventListener('click', this._delete, false);
this._uploadButton.addEventListener('change', this._drawBackground, false);
this._canvas.on('mouse:up', this._executeCurrentCommand);
}
return Application;
})();
var p = new Application(document.getElementById('c'),
document.getElementById('btn_rect'),
document.getElementById('btn_delete'),
document.getElementById('btn_upload'));
#c {
border: 1px solid #333;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<canvas id="c" width="500" height="150"></canvas>
<br />
<input type="button" value="Rect Command" id="btn_rect" />
<input type="button" value="Delete Command" id="btn_delete" />
<input type="file" id="btn_upload" accept="image/*" />
Hi there I am trying to have a video autoplay and mute. But on mobile devices it doesn't show due to flash.
here is my code.
<div id="vimeo"> </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
function vimeo_player_loaded() {
moogaloop3 = document.getElementById('vimeo');
moogaloop3.api_setVolume(0);
}
var flashvars = {
'clip_id': '138036294', // <--vimeo video ID
'server': 'vimeo.com',
'show_title': 0,
'show_byline': 0,
'show_portrait': 0,
'fullscreen': 0,
'autoplay': 1,
'js_api': 1,
'js_onload': 'vimeo_player_loaded'
}
var parObj = {
'swliveconnect':true,
'fullscreen': 1,
'allowscriptaccess': 'always',
'allowfullscreen':true
};
var attObj = {}
attObj.id="vimeo";
swfobject.embedSWF("http://www.vimeo.com/moogaloop.swf", "vimeo", "343", "193", "9.0.28", '',flashvars,parObj, attObj );
</script>
How would I go about making it default to html5?
Found another way of doing it using
<div id="vimeo"> <div>
<script>
// URL of the video
var videoUrl = 'http://www.vimeo.com/76979871';
var endpoint = 'http://www.vimeo.com/api/oembed.json';
var callback = 'embedVideo';
var url = endpoint + '?url=' + encodeURIComponent(videoUrl)+ '&autoplay=true' + '&callback=' + callback + '&width=420';
function embedVideo(video) {
document.getElementById('vimeo').innerHTML = unescape(video.html);
}
function init() {
var js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', url);
document.getElementsByTagName('head').item(0).appendChild(js);
}
window.onload = init;
I'm working on building a custom YouTube player to embed a video feed on a website. I'm new to this, and I haven't had much luck searching around the Web.
Using snippets of useful code from tutorials, I've created a main video player and a carousel of thumbnails for users to click on to load that video into the player. The only thing missing, however, is I want the currently selected video's title to appear below the iframe tag. Any help on this? Or can anybody point me in the right direction?
Here's my script:
<script>
(function() {
function createPlayer(jqe, video, options) {
var ifr = $('iframe', jqe);
if (ifr.length === 0) {
ifr = $('<iframe scrolling="no">');
ifr.addClass('player');
}
var src = 'http://www.youtube.com/embed/' + video.id;
if (options.playopts) {
src += '?';
for (var k in options.playopts) {
src+= k + '=' + options.playopts[k] + '&';
}
src += '_a=b';
}
ifr.attr('src', src);
jqe.append(ifr);
}
function createCarousel(jqe, videos, options) {
var car = $('div.carousel', jqe);
if (car.length === 0) {
car = $('<div>');
car.addClass('carousel');
jqe.append(car);
}
$.each(videos, function(i,video) {
options.thumbnail(car, video, options);
});
}
function createThumbnail(jqe, video, options) {
var imgurl = video.thumbnails[0].url;
var img = $('img[src="' + imgurl + '"]');
if (img.length !== 0) return;
img = $('<img>');
img.addClass('thumbnail');
jqe.append(img);
img.attr('src', imgurl);
img.attr('title', video.title);
img.click(function() {
options.player(options.maindiv, video, $.extend(true,{},options,{playopts:{autoplay:1}}));
});
}
var defoptions = {
autoplay: false,
user: null,
player: createPlayer,
carousel: createCarousel,
thumbnail: createThumbnail,
loaded: function() {},
playopts: {
autoplay: 0,
egm: 1,
autohide: 1,
fs: 1,
showinfo: 0
}
};
$.fn.extend({
youTubeChannel: function(options) {
var md = $(this);
md.addClass('youtube');
var allopts = $.extend(true, {}, defoptions, options);
allopts.maindiv = md;
$.getJSON('http://gdata.youtube.com/feeds/users/' + allopts.user + '/uploads?alt=json-in-script&format=5&callback=?', null, function(data) {
var feed = data.feed;
var videos = [];
$.each(feed.entry, function(i, entry) {
var video = {
title: entry.title.$t,
id: entry.id.$t.match('[^/]*$'),
thumbnails: entry.media$group.media$thumbnail
};
videos.push(video);
});
allopts.allvideos = videos;
allopts.carousel(md, videos, allopts);
allopts.player(md, videos[0], allopts);
allopts.loaded(videos, allopts);
});
}
});
})();
$(function() {
$('#player').youTubeChannel({user:'oklahomadaily'});
});
</script>
And here's my HTML:
<div class="video">
<div class="boxTitle">Featured videos</div>
<div id="player"></div>
<div id="title"><p class="multimedia">Could not find a description...</p></div>
</div>
Thanks for your patience and assistance.