I have my Angular view file like below.
<!DOCTYPE html>
<video id="myVideo" class="video-js vjs-default-skin"></video>
<script>
var dataUri;
var videoData;
var player = videojs("myVideo", {
controls: true,
width: 320,
height: 240,
fluid: false,
plugins: {
record: {
audio: true,
video: true,
maxLength: 100,
debug: true
}
}
}, function(){
// print version information at startup
videojs.log('Using video.js', videojs.VERSION,
'with videojs-record', videojs.getPluginVersion('record'),
'and recordrtc', RecordRTC.version);
});
// error handling
player.on('deviceError', function() {
console.log('device error:', player.deviceErrorCode);
});
player.on('error', function(error) {
console.log('error:', error);
});
// user clicked the record button and started recording
player.on('startRecord', function() {
console.log('started recording!');
});
// user completed recording and stream is available
player.on('finishRecord', function() {
console.log('player : ', player.recordedData.video.name);
videoData = player.recordedData;
console.log('finished recording: ', player.recordedData);
}
);
function getVideoData()
{
return videoData;
}
</script>
<button id="record" onClick="getVideoData();" ng-model="onFileSelect()"></button>
When player.on('finishRecord', function() function is called it will have the recorded video data in player.recordedData variable. What My problem is, I want to send the player.recordedData to the angular controller on button click whose id is record.
If the vairiable is defined globally, you can directly use it in any of controllers. Try to put you data in object.xxx format.
example:
var model = {videoData: null};
player.on('finishRecord', function() {
...
model.videoData = player.recordedData;
}
in controller:
//directly use it, ensure it has data
model.videoData
Related
Trying to create a chrome extension (manifest v.3) that can record screen. The flow is:
Showing a record button in popup
Clicking a record button opens an html page in background
html page sends request to background to show desktop selector for the active tab
User selects the window/tab and start recording
Here is the code (https://stackblitz.com/edit/web-platform-mxfsyx?file=index.html):
Created a record button in popup
document.querySelector('#startFromBackgroundPage')
.addEventListener('click', function(event) {
chrome.runtime.sendMessage(
{ event: 'open-bg-page' }, function(response) { console.log(response); });
});
Background page
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
if (message.event === 'open-bg-page') {
chrome.tabs.create({
url: 'index.html',
selected: false,
});
}
if (message.event === 'record') {
chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
chrome.desktopCapture.chooseDesktopMedia(
["screen", "window"],
tabs[0],
function(id, options) {
chrome.runtime.sendMessage(
{'mediaId': id, options: options});
});
});
}
});
index.html/app.js
// Send message as soon page is loaded.
setTimeout(() => {
chrome.runtime.sendMessage(
{ event: 'record' }, function(response) { console.log(response); });
}, 500);
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
console.log('on message', message);
if (message.mediaId) {
setTimeout(() => {
onAccessApproved(message.mediaId, message.options);
}, 100);
}
});
// Launch webkitGetUserMedia() based on selected media id.
function onAccessApproved(id, options) {
if (!id) {
console.log('Access rejected.');
return;
}
var audioConstraint = {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: id
}
};
if (!options.canRequestAudioTrack)
audioConstraint = false;
navigator.getUserMedia({
audio: audioConstraint,
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: id,
maxWidth:screen.width,
maxHeight:screen.height} }
}, gotStream, getUserMediaError);
}
function getUserMediaError(error) {
document.querySelector('#message').innerHTML = error;
console.log('navigator.getUserMedia() error: ', error);
}
But its throwing error: NotAllowedError: Invalid state
It works fine If I replace tabs[0] with sender.tab in background.js. But then it shows the desktop/window chooser on the background page which I don't want. I want to record the current active tab. I am handling it in background page so even the page is refresh/closed the video recording continues.
Hi so as you can see i have a problem with videojs-recorder, problem is i can't get access to my cam on phone. I use code down below and i am testing it with remote dev tools on chrome. Error is:
VIDEOJS: ERROR: TypeError: Cannot read property 'getUserMedia' of undefined
This is my code:
let player;
const options = {
controls: true,
width: 300,
height: 300,
plugins: {
record: {
audio: true,
screen: true,
image: false,
maxLength: 3600,
debug: true,
}
}
};
player = videojs("myVideo", options , function(){
// print version information at startup
videojs.log('Using video.js', videojs.VERSION,
'with videojs-record', videojs.getPluginVersion('record'),
'and recordrtc', RecordRTC.version);
});
// error handling
player.on('deviceError', function() {
console.log('device error:', player.deviceErrorCode);
});
player.on('error', function(element, error) {
console.error(error);
});
player.on('startRecord', function() {
console.log('started recording!');
});
player.on('finishRecord', function() {
console.log('finished recording: ', player.recordedData);
});
Edit:
Currently i am using 2.1.2 and i am unable to do update.
I am creating a image download server for my APP with Rest API, there are two buttons in the HTML, one is download button and other is load button.
When clicked on download button progress bar shows the progress, but there is no output file and doesn't show any error even load button doesn't load anything.
This script works fine with static URL (without API) by making certain changes in the script.
Link for my temporary Server.
http://freaksearch.com/aarti/rest-api.php?json=image&Id=
Plugin required by this script : cordova-plugin-file-transfer
(this is not depreciated plugin)
Link for the plugin: https://www.npmjs.com/package/cordova-plugin-file-transfer
Here is my HTML:
<div class="padding">
<button class="button" ng-click="download()">Download</button>
<button class="button" ng-click="load()">Load</button>
{{imgFile}}
<img ng-src="{{imgFile}}">
</div>
Here is my script:
$scope.download = function(imageId, imageName) {
$ionicLoading.show({
template: 'Downloading...'
});
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
fs.root.getDirectory(
"MyProject",
{
create: true
},
function (dirEntry) {
dirEntry.getFile(
imageName + ".jpg",
{
create: true,
exclusive: false
},
function gotFileEntry(fe) {
var p = fe.toURL();
fe.remove();
ft = new FileTransfer();
ft.download(
encodeURI('http://freaksearch.com/aarti/rest-api?json=image' + imageId),
p,
function (entry) {
$ionicLoading.hide();
$scope.imgFile = entry.toURL();
},
function (error) {
$ionicLoading.hide();
alert("Download Error Source --> " + error.source);
},
false,
null
);
},
function () {
$ionicLoading.hide();
console.log("Get the file failed");
}
);
}
);
},
function () {
$ionicLoading.hide();
console.log("Request for filesystem failed");
});
}
$scope.load = function() {
$ionicLoading.show({
template: 'Loading...'
});
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {
fs.root.getDirectory(
"MyProject",
{
create: false
},
function(dirEntry) {
dirEntry.getFile(
imageName + ".jpg",
{
create: false,
exclusive: false
},
function gotFileEntry(fe) {
$ionicLoading.hide();
$scope.imgFile = fe.toURL();
},
function(error) {
$ionicLoading.hide();
console.log("Error getting file");
}
);
}
);
},
function() {
$ionicLoading.hide();
console.log("Error requesting filesystem");
});
}
Adding <preference name="AndroidPersistentFileLocation" value="Compatibility" />to the config.xml made my folder & file visible. I hope this could help someone.
Now i can see the images, but all the images are Corrupt.
I am new to RecordRTC.js, i have simple application that record audio and video and save that video. this is working fine if i record video using headphone. but if i remove the headphone and try to record video then it creating some terrible noise. some time happen like if i refresh the page then it not making the noise but if i plugged-in the headphone and remove it and press the record button then it start making the noise.
here is my code to start recording.
function captureUserMedia(mediaConstraints, successCallback, errorCallback) {
navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);
}
function onMediaSuccess(stream) {
streamMedia = stream;
var videoPreview = document.getElementById('webrtcVideo');
var videoFile = !!navigator.mozGetUserMedia ? 'video.gif' : 'video.webm';
videoPreview.src = window.URL.createObjectURL(stream);
videoPreview.play();
recordVideo = RecordRTC(stream, {
type: 'video'
});
recordVideo.startRecording();
}
function onMediaError(e) {
console.error('media error', e);
}
/**
* This function will be called from html on click of record button.
*/
function startRecording() {
captureUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
}
RecordRTC
var mediaConstraints = {
video: true,
audio: {
mandatory: {
echoCancellation: false,
googAutoGainControl: false,
googNoiseSuppression: false,
googHighpassFilter: false
},
optional: [{
googAudioMirroring: false
}]
},
};
function captureUserMedia(mediaConstraints, successCallback,errorCallback) {
navigator.mediaDevices.getUserMedia(mediaConstraints)
.then(successCallback)
.catch(errorCallback);
}
The player works fine on all other browsers, but isn't working in IE11. I'm getting the error message "Could not add internal listener" 8 times (one time for each playlist item, I assume).
The script gets to the onReady event, but never gets to onPlay. I'm running version 6.8. I have confirmed that the playList is being generated as it should, and as I mentioned, it works in all browsers except for IE11.
//get our playlist
var playListItems = [];
$(courseXML).find("audiofile").each(function() {
var newItem = {
file: "assets/audio/"+ $(this).text(),
type: "mp3"
};
playListItems.push(newItem);
});
//redoing this as a playlist
jwplayer("mediaplayer").setup({
flashplayer: "js/jwplayer.flash.swf",
html5player: "js/jwplayer.html5.js",
controls: false,
width: 1,
height: 1,
autostart: false,
playlist: playListItems,
allowscriptaccess: 'always',
events: {
onComplete: function() {
alert("I'm completed");
},
onReady: function() {
alert("I'm ready");
},
onPlay: function() {
alert("I'm playing!");
}
}
});