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.
Related
If i use the following code to record a canvas animation:
streamInput = parent.document.getElementById('whiteboard');
stream = streamInput.captureStream();
const recorder = RecordRTC(stream, {
// audio, video, canvas, gif
type: 'video',
mimeType: 'video/webm',
recorderType: MediaStreamRecorder,
disableLogs: false,
timeSlice: 1000,
ondataavailable: function(blob) {},
onTimeStamp: function(timestamp) {},
bitsPerSecond: 3000000,
frameInterval: 90,
frameRate: 60,
bitrate: 3000000,
});
recorder.stopRecording(function() {
getSeekableBlob(recorder.getBlob(), function(seekableBlob) {
url = URL.createObjectURL(recorder.getBlob());
$("#exportedvideo").attr("src", url);
$("#exportedvideo").attr("controls", true);
$("#exportedvideo").attr("autoplay", true);
})
});
The video plays fine and i can seek it in chrome/edge/firefox etc.
When i download the video using the following code:
getSeekableBlob(recorder.getBlob(), function(seekableBlob) {
var file = new File([seekableBlob], "test.webm", {
type: 'video/webm'
});
invokeSaveAsDialog(file, file.name);
}
The video downloads and plays fine, and the seekbar updates like normal.
If i then move the seekbar to any position, as soon as I move it I get a media player message:
Can't play,
Can't play because the item's file format isnt supported. Check store to see if this item is available here.
0xc00d3e8c
If i use firefox and download the file, it plays perfect and I can seek.
Do i need to do anything else to fix the Chromium webm?
i've tried using the following code to download the file:
var file = new File([recorder.getBlob()], "test.webm", {
type: 'video/webm'
});
invokeSaveAsDialog(file, file.name);
however, the file plays and i can move the seekbar but the video screen is black.
yet firefox works fine.
Here are the outputted video files:
First set were created without ts-ebml intervention:
1: https://lnk-mi.app/uploads/chrome.webm
2: https://lnk-mi.app/uploads/firefox.webm
Second set were created using ts-ebml:
1: https://lnk-mi.app/uploads/chrome-ts-ebm.webm
2: https://lnk-mi.app/uploads/firefox-ts-ebml.webm
both were created exactly the same way using ts-ebml.js to write the meta-data
recorder.addEventListener("dataavailable", async(e) => {
try {
const makeMediaRecorderBlobSeekable = await injectMetadata(e.data);
data.push(await new Response(makeMediaRecorderBlobSeekable).arrayBuffer());
blobData = await new Blob(data, { type: supportedType });
} catch (e) {
console.error(e);
console.trace();
}
});
is there a step I am missing?
Having tried all the plugins like ts-ebml and web-writer, I found the only reliable solution was to upload the video to my server and use ffmpeg with the following command
ffmpeg -i {$srcFile} -c copy -crf 20 -f mp4 {$destFile}
to convert the video to mp4.
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 tried to test the code below on an android device, it didn't work (the switch button appeared but the camera output didn't.). I then decided to test it on a Mac and it worked (it just showed the camera output and the button, the button didn't do anything because there is no back camera.). Here is my code (the javascript portion of it.):
var constraints = {
audio: true,
video: {
width: 1280,
height: 720
}
};
navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {
var video = document.querySelector('#webcam');
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
video.play();
};
}).catch(function(err) {
console.log(err.name + ": " + err.message);
});
var front = false;
document.getElementById('flip-button').onclick = function() {
front = !front;
};
var constraints = {
video: {
facingMode: (front ? "user" : "environment")
}
};
Here's the HTML portion of my code:
<video id="webcam">
</video>
<button Id="flip-button">switch
</button>
here's the css portion of my code:
#webcam {} #flip-button {
background-color: #202060;
height: 15%;
width: 20%;
border: none;
margin-left: 40%;
}
Thanks for your time.
You got your id wrong. Replace #webcam with #video.
Or just remove this line:
var video = document.querySelector('#webcam');
The latter works because ids are implicitly available in global scope for backwards compatibility. Some people frown on this, but it's neat for tidy fiddles.
Some beginner's advice: Always check your browser's web console for errors. Here it said:
TypeError: video is null
which was the clue that the result from querySelector was null.
PS: You also have two competing definitions of constraints, leaving your facingMode unused. Lastly, flipping front won't do much, unless front is used again, which it is not.
I'm working on a website using jPlayer. The problem appeared when I tried to use it with my android phone, so I started recoding it. Now I'm trying to use the jPlayerAndroidFix class. I'm doing it just like in the example given in the source code in the tutorial, and still it's not working.
Here's the code:
function playSound(sound) {
if (playToggle) {
return;
}
var id = "#jplayer-play";
var media = {
mp3: sound
};
var options = {
swfPath: $('body').data('jplayer-swf'),
solution: 'flash,html',
wmode:"window",
supplied: 'mp3',
preload: 'metadata',
volume: 0.8,
muted: false,
errorAlerts: false,
warningAlerts: false,
customCssIds: true
};
var myAndroidFix = new jPlayerAndroidFix(id, media, options);
myAndroidFix.setMedia(media);
myAndroidFix.play();
}
Important thing to add - the audio is received dynamically, for example from a link:
http://granie.t-mobile.pl/sets/play/69986
and that's the "sound" variable.
What may cause the problem? What am I doing wrong?
The jPlayerAndroidFix class can be found in the source code of
http://jplayer.org/latest/demo-01-android/?theme=0
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'