Develop Reference

quaggaJS: how to "pause" the decoder

I'm using quaggaJS (https://github.com/serratus/quaggaJS) to read barcodes in a web application. It works very well, and this is my initialization code:
Quagga.init({
inputStream: {
name: "Live",
type: "LiveStream",
constraints: {
width: 1280,
height: 720,
facingMode: "environment"
}
},
decoder: {
readers: ["code_39_reader"],
debug: {
drawBoundingBox: true,
showFrequency: false,
drawScanline: true,
showPattern: true
},
multiple: false
},
locator: {
halfSample: true,
patchSize: "medium"
}
}, function (err) {
if (err) {
alert(err);
return;
}
Quagga.registerResultCollector(resultCollector);
Quagga.start();
});
here the handling of the onDetected event:
Quagga.onDetected(function (data) {
Quagga.stop(); // <-- I want to "pause"
// dialog to ask the user to accept or reject
});
What does that mean?
When it recognize a barcode I need to ask the user if he wants to accept or reject the decoded value - and therefore repeat the process.
It would be nice to leave the captured image so he can actually see what he just captured.
Quagga.stop() works in most cases but it's not reliable because sometimes the canvas will turn black. I guess this is due the behavior of the stop() method:
the decoder does not process any more images. Additionally, if a camera-stream was requested upon initialization, this operation also disconnects the camera.
For this reason I'm looking for a way to pause the decoding, so the last frame is still there and the camera has not disconnected yet.
Any suggestion how to achieve this?

A better way to do it would be to first pause the video and then call Quagga.stop() so that the video element that Quagga creates for you will be paused and you don't see the blacked out image. Additionally, you can also have a restart/re-scan button to resume or rather restart the scanning process.
To get the view element you can do something like below:
Quagga.onDetected(function (result) {
var cameraFeed = document.getElementById("cameraFeedContainer")
cameraFeed.getElementsByTagName("video")[0].pause();
return;
});

You can get the image frame via Quagga.canvas.dom.image.
With that, you can overlay the videostream.
HTML
<div class="scanArea">
<div id="interactive" class="viewport"></div>
<div class="scanArea__freezedFrame"></div>
</div>
CSS
.scanArea {
position: relative;
}
.scanArea__freezedFrame {
position: absolute;
left: 0;
top: 0;
}
JavaScript
Quagga.onDetected(function(result) {
var canvas = Quagga.canvas.dom.image;
var $img = $('<img/>');
$img.attr("src", canvas.toDataURL());
$('.scanArea__freezedFrame').html($img);
});

I am struggling with setting up the loop for youtube api by using my code each time loop video is loading.I have put only one video in loop

Here is my video
http://dynamitechefs.ch/
I have put one video to loop. The video is loading each time. How can I remove video loading?
Here is my code
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: mediaParams['height'],
width: mediaParams['width'],
videoId: mediaParams['v'],
playerVars: {
controls: 1,
showinfo: 0 ,
startAt:1,
rel:0,
loop:1,
playlist : 'BmAL33M0jcI'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
Thanks in advance.

Based from the documentation of IFrame API Player Parameters, when you play a single video player, a setting of 1 causes the player to play the initial video again and again. In the case of a playlist player (or custom player), the player plays the entire playlist and then starts again at the first video.
Just take NOTE that currently, the loop parameter only works on the
AS3 player when used in conjunction with the playlist parameter. To
loop a single video, set the loop parameter value to 1 and set the
playlist parameter value to the same video ID already specified in the
Player API URL:
https://www.youtube.com/v/VIDEO_ID? > version=3
&loop=1
&playlist=VIDEO_ID
For more information, use this demo to know how the different parameters of IFrame API works.

You could use the player.seekTo function to seek to the beginning of the video when the video is close to the end (i.e. 99% complete) to keep the player buffer in memory and prevent a reload. You can see this example in the code below:
var player;
// Callback for when the YouTube iFrame player is ready
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
// Set Player height and width
height: '390',
width: '640',
// Set the id of the video to be played
videoId: 'Rykmwn0SMWU',
// Setup event handelers
events: {
'onReady': onPlayerReady,
}
});
};
function onPlayerReady() {
var interval = setInterval(function(){
console.log(player.getCurrentTime() / player.getDuration())
if (player.getCurrentTime() / player.getDuration() > .99) {
player.seekTo(0)
}
},500);
}

How to stop chrome from capturing a tab?

I'm trying to build an chrome extension similar to the chromecast one. I am using chrome.tabCapture to successfully start a audio/video stream. How do I stop the screen capture? I want to have a stop button, but I am not sure what to call to stop it. I can stop the LocalMediaStream, but the tab is still capturing and does not allow me to start a new capture without closing the tab. Any suggestions or maybe an api page I may have missed?

Try stream.getVideoTracks()[0].stop(); to stop the screen capture. And to record the stream caught using chrome.tabCapture API , you could use RecordRTC.js
var video_constraints = {
mandatory: {
chromeMediaSource: 'tab'
}
};
var constraints = {
audio: false,
video: true,
videoConstraints: video_constraints
};
chrome.tabCapture.capture(constraints, function(stream) {
console.log(stream)
var options = {
type: 'video',
mimeType : 'video/webm',
// minimum time between pushing frames to Whammy (in milliseconds)
frameInterval: 20,
video: {
width: 1280,
height: 720
},
canvas: {
width: 1280,
height: 720
}
};
var recordRTC = new RecordRTC(stream, options);
recordRTC.startRecording();
setTimeout(function(){
recordRTC.stopRecording(function(videoURL) {
stream.getVideoTracks()[0].stop();
recordRTC.save();
});
},10*1000);
});
I hope the above code snippet would help you :)
Edit 1: corrected the RecordRTC initialization.

Youtube Javascript API - disable related videos

Right, this seems to be poorly documented or I can't see it in the documentation. I basically want no related videos (?rel=0) using the JavaScript API.
$players[$vidIdPlaceholderRef] = new YT.Player('player_' + $vidIdPlaceholderRef, {
height: '550',
width: '840',
videoId: $vidId
});
is what I have in place.
I have also tried:
$players[$vidIdPlaceholderRef] = new YT.Player('player_' + $vidIdPlaceholderRef, {
height: '550',
width: '840',
videoId: $vidId + '?rel=0',
rel : 0
});
with no luck. Does any one know of an option which can be added (tried rel : 0 with no luck )

"rel" is a player parameter, as specified here:
https://developers.google.com/youtube/player_parameters#rel
To add player parameters to iframe players, you need to specify the playerVars property of the second constructor argument (at the time of writing this is documented here, and on the IFrame API documentation page)
e.g.
new YT.Player('playerid', {
height: '550',
width: '840',
videoID: 'video_id',
playerVars: {rel: 0, showinfo: 0, ecver: 2}
});

The behavior of the rel player parameter has changed.
From documentation,
The behavior for the rel parameter is changing on or after September
25, 2018. The effect of the change is that you will not be able to
disable related videos. However, you will have the option of
specifying that the related videos shown in the player should be from
the same channel as the video that was just played
So, it's no longer possible to disable related videos. Instead playerVars: {rel:0} will change the behavior of the player and shows suggestion from specified channel.

You get related videos in two places: at the end of the video with the grid, and at the bottom of the video while paused. I've figured out a way to remove them at the end and make the ones at the bottom at least tolerable for most businesses.
1. Remove related videos at the end of a video
IFrame Player API: Events
To avoid showing related videos at the end of a video, I just stopped the video so it returned to showing the thumbnail and play button:
var player = new YT.Player('player', {
height: '390',
width: '640',
events: {
'onStateChange': function(event){
switch(event.data){
// Stop the video on ending so recommended videos don't pop up
case 0: // ended
player.stopVideo();
break;
case -1: // unstarted
case 1: // playing
case 2: // paused
case 3: // buffering
case 5: // video cued
default:
break;
}
}
}
});
You could also replace player.stopVideo(); with any other code you want to run.
2. Making related videos at the bottom of a video only show your videos
IFrame Player API: YouTube Embedded Players and Player Parameters
rel=0 no longer avoids showing any related videos; now, it will still show related videos, but at least they'll only be from your channel. This changed sometime around September 25, 2018 (documentation).
By setting playerVars in YT.Player, we can at least have related videos only show our channel's videos. The documentation isn't clear that you have to have playerVars set up as an object, but you can set it up like so:
var player = new YT.Player('player', {
...
playerVars:{
rel: 0
modestbranding: 1, // If you're trying to remove branding I figure this is helpful to mention as well; removes the YouTube logo from the bottom controls of the player
// color: 'white', // Can't have this and modestbranding active simultaneously (just a note in case you run into this)
},
...
});
2A. Potential way to remove related videos from bottom
I may look more into it if I have the time, but here's where an answer may lie:
We can easily access the iframe object but we can't do anything with it: IFrame Player API: Accessing and modifying DOM nodes. It appears that because we'd be editing an iframe from YouTube there are security concerns (regardless of what we'd actually be doing). Ideally I could just remove the "More videos" text with player.getIframe().contentWindow.document.querySelector('.ytp-pause-overlay.ytp-scroll-min').remove(), but when I run player.getIframe().contentWindow.document I get an error SecurityError: Permission denied to access property "document" on cross-origin object.
But playerVars also has an origin value that may let us access the iframe's object anyway:
var player = new YT.Player('player', {
...
playerVars:{
origin: 'https://mywebsite.com'
},
...
});
It's not working with localhost, but that may be a Chromium and Firefox thing. Perhaps this is a legitimate option on a live site; I'll update this post when/if I try that to let you know if I succeed.

The accepted solution was not working for me. What does work is:
1) Putting the iframe in html that includes the rel parameter
<iframe id="youtube-video" width="560" height="315"
src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&rel=0&modestbranding=1"
frameborder="0" enablejsapi="1" allowfullscreen></iframe>
2) Using the javascript API to attach to that existing player
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('youtube-video', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
console.log("ready");
}
function onPlayerStateChange(event) {
console.log("state changed");
}
demo fiddle: http://jsfiddle.net/bf7zQ/195/

If you're using SWFObject, you simply need to do something like this:
function loadVideo() {
var params = { allowScriptAccess: "always" }
, atts = { id: "myvideo" }
;
//NOTE THE END OF THE BELOW LINE vvvvvv
swfobject.embedSWF("https://www.youtube.com/v/[video id here]?enablejsapi=1&playerapiid=myvideo&version=3&rel=0"
, "videoplaceholderid"
, "768", "432", "8", null, null, params, atts);
}
Just add rel=0 to the end of your url.

No need to code through the API,now its easily can be done by
You tube embed button -> Show more -> tickout the option 'Show suggested videos when the video finishes'

Here is a Quick solution:
setInterval(function(){
if($('iframe').length > 0){
$('iframe').each(function(){
if($(this).hasClass('gotYou')){
//do nothing
}else{
var getMySrc = $(this).attr('src');
var newSrc = getMySrc.split('?');
console.log(newSrc);
var freshURL = newSrc[0]+'?rel=0&'+newSrc[1];
console.log(freshURL);
$(this).addClass('gotYou');
$(this).attr('src', freshURL );
}
});
}
}, 1);
What it does it, it looks for the iframe in your document. If it finds iframe, it grabs the src of the iframe, finds the ? mark and then replaces ? by ?rel=0& . Here the goal is to out rel=0

new YT.Player('playerid', {
height: '550',
width: '840',
videoID: 'video_id',
playerVars: {rel: 0},
});

How to change video (and start playing immediately) in Flowplayer via Javascript?

It should change the video and start playing regardless of whether or not a video is currently loaded and playing.
Thanks.

See example below where api is your flowplayer instance and replaceclip is the one you want to start plating
var api = flashembed("player", {src:'FlowPlayerDark.swf'}, {config: ...}});
var replaceclip = {'url':'myvideo.mp4', 'autoplay':true};
<button onClick="api.playClip(replaceclip)">Play</button>

See my example in Github https://github.com/Teaonly/android-eye/blob/master/assets/droideye.js
var initAudioPlayer = function () {
// install flowplayer into container
// http://flash.flowplayer.org/
$f("player", "flowplayer-3.2.15.swf", {
plugins: {
controls: {
fullscreen: false,
height: 30,
autoHide: false,
play: false,
}
},
clip: {
autoPlay: false,
url: "stream/live.mp3",
}
});
audioPlayer = $f();
};
var newClip = {'url':'stream/live.mp3?id='+audioCount,'autoplay':true};
audioCount ++;
audioPlayer.play(newClip);

$f().play([{url:'yourmovie.flv'}]);
In this way you can change the video dynamically in Ajax.

You can check out the javascript api for the flowplayer here
Specifically, you'll probably want to check out the flowplayer objects 'Clip' and 'Player'