I got html5 video capture like this:
var canvas = document.createElement('canvas');
canvas.height = video.height;
canvas.width = video.width;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
capturedImage=ctx.getImageData(0,0,canvas.width,canvas.height))
and tried to upload this capture like this:
$.ajax({
type: method,
contentType: false,
cache: false,
processData: false,
async: false,
url: '....',
data: capturedImage,<----------how to convert above captured image here?
}).done(function(o) {
.....
});
if just:
data:capturedImage
backend will get data value like:
str:imageObject
ajax request just send a str to backend,so how to convert this captured image to let ajax uploading work?
Have you tried using capturedImage.data or JSON.stringify(caputedImage.data)? The data member supposedly contains the actual pixel array. I am not sure how $.ajax handles byte arrays, so you may have to do JSON.stringify(caputedImage.data).
Related
I want to get the current time, within the video being played when I click within the audio waveform.
I'm playing a video stream, I want to be able to pause, then add a note to a table about something within the video. So I need to get the currentTime.
I merge an audio stream with the video and play in a div.
let options = {
controls: true,
bigPlayButton: false,
autoplay: false,
loop: false,
fluid: false,
width: 1000,
height: 200,
plugins: {
// enable videojs-wavesurfer plugin
wavesurfer: {
// configure videojs-wavesurfer
backend: 'MediaElement',
displayMilliseconds: true,
debug: true,
waveColor: 'black',
progressColor: 'purple',
cursorColor: 'yellow',
hideScrollbar: true,
// put waveform in separate container
container: '#waveform'
}
}
};
let videoplayer = videojs('myClip', options, function() {
let videofile = $("#mergedVideo").text()
console.log(" Playing "+videofile)
// load wav file from url
videoplayer.src({src: videofile, type: 'video/mp4'});
});
// Here is the pause... always gives an error..
videoplayer.on('pause', function () {
let currenttime = videoplayer.getCurrentTime();
$('#currentTime').text(currenttime);
alert(" PAUSED ")
});
but i'm getting videoplayer.getCurrentTime is not a function in console. I have this working perfectly for just audio streams.
Any help would be grealty appreciated.
It's currentTime(). There's a getCurrentTime() on the lower level tech abstraction, but you shouldn't (need to) use it directly.
I am using simple-peer in my video chat web application. If both the users are in audio call how can I add Video track and how can I disable it. If I use replaceTrack I am again which is giving this issue
error Error: [object RTCErrorEvent]
at makeError (index.js:17)
at RTCDataChannel._channel.onerror (index.js:490)
I am showing a profile picture if the video is not enabled for users. if Video is enabled I want to replace this picture with video and replace it for all people in the call
If both the users enabled audio only, stream contain only audio track so here we can add black space (ended video track ).so we can easily solve this issue
for more info visit this
https://blog.mozilla.org/webrtc/warm-up-with-replacetrack/
Code from the above link
let silence = () => {
let ctx = new AudioContext(), oscillator = ctx.createOscillator();
let dst = oscillator.connect(ctx.createMediaStreamDestination());
oscillator.start();
return Object.assign(dst.stream.getAudioTracks()[0], {enabled: false});
}
let black = ({width = 640, height = 480} = {}) => {
let canvas = Object.assign(document.createElement("canvas"), {width, height});
canvas.getContext('2d').fillRect(0, 0, width, height);
let stream = canvas.captureStream();
return Object.assign(stream.getVideoTracks()[0], {enabled: false});
}
let blackSilence = (...args) => new MediaStream([black(...args), silence()]);
video.srcObject = blackSilence();
This one I've been banging my head against for a few weeks now.
Scenario:
Let user generate an image out of layers they select
Convert image to canvas
Share image from canvas on facebook wall using share_open_graph (along with the image, a short text and title will be shared)
I've already had a solution in place using publish_actions but that was recently removed from the API and is no longer available.
I am using js and html for all code handling.
The issue is that I can generate a png image from the canvas but that is saved as base64 and share_open_graph doesn't allow this type of image, it needs a straight forward url such as './example.png'. I have tried using several approaches and with canvas2image, converting and saving image using file-system but all of these fail.
Does anyone have similar scenario and possible solution from April/May 2018 using share_open_graph ?
My current code looks like this - it fails at the image conversion and save to a file (Uncaught (in promise) TypeError: r.existsSync is not a function at n (file-system.js:30)). But I am open to different solutions as this is clearly not working.
html2canvas(original, { width: 1200, height: 628
}).then(function(canvas)
{
fb_image(canvas);
});
var fb_image = function(canvas) {
canvas.setAttribute('id', 'canvas-to-share');
document.getElementById('img-to-share').append(canvas);
fbGenerate.style.display = 'none';
fbPost.style.display = 'block';
var canvas = document.getElementById('canvas-to-share');
var data = canvas.toDataURL('image/png');
var encodedPng = data.substring(data.indexOf(',') + 1, data.length);
var decodedPng = base64.decode(encodedPng);
const buffer = new Buffer(data.split(/,\s*/)[1], 'base64');
pngToJpeg({ quality: 90 })(buffer).then(output =>
fs.writeFile('./image-to-fb.jpeg', output));
var infoText_content = document.createTextNode('Your image is being
posted to facebook...');
infoText.appendChild(infoText_content);
// Posting png from imageToShare to facebook
fbPost.addEventListener('click', function(eve) {
FB.ui(
{
method: 'share_open_graph',
action_type: 'og.shares',
href: 'https:example.com',
action_properties: JSON.stringify({
object: {
'og:url': 'https://example.com',
'og:title': 'My shared image',
'og:description': 'Hey I am sharing on fb!',
'og:image': './image-to-fb.jpeg',
},
}),
},
function(response) {
console.log(response);
}
);
});
};
What is the best way to use HLS.js to make a custom license request to play encrypted HLS content? What I'm looking for is to override the AES URI that's in the manifest with one of my own, a.k.a. overriding the LAURL
const vid = document.getElementsByTagName('video')[0];
const config = {
debug: true,
startPosition: 100,
maxBufferHole: 0.5,
maxSeekHole: 2,
};
const hls = new Hls(config);
hls.attachMedia(vid);
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
console.log('hls and videojs are bound together');
hls.loadSource('https://example.com/movie.m3u8');
hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
console.log('manifest parsed, found ' + data.levels.length + ' quality levels');
});
});
Should I be using HLS.js's custom loader?
I am currently trying to resolve the following issue:
var fileName = "monthly_report.pdf"
var document = new Document();
//DO SOME STUFF WITH THE DOCUMENT
MemoryStream stream = new MemoryStream();
doc.Save(stream, SaveFormat.Pdf);
byte[] bytes = stream.GetBuffer();
Response.Clear();
Response.ContentType = "application/pdf";
Response.AddHeader("content-disposition", "attachment; filename="+fileName);
Response.BinaryWrite(bytes);
Response.End();
Based on this code I am trying to display an Aspose. Words document converted into an pdf in the browser / trying to create a download dialog in the browser for said document.
When I execute the action there is no error message. The contents of the pdf are then displayed within the response message of the chrome debugger. The response also holds the appropriate size ( 60kb for the pdf ). It simply does not start a download or displays the pdf in the browser and I wonder why that would be.
I also tried an alternative provided by Aspose:
var resp = System.Web.HttpContext.Current.Response;
resp.Clear();
// Create Memory Stream Object
MemoryStream stream = new MemoryStream();
doc.Save(stream, SaveFormat.Pdf);
doc.Save(resp, fileName, ContentDisposition.Attachment, SaveOptions.CreateSaveOptions(
SaveFormat.Pdf));
resp.End();
Which leads to the exact same result the pdf being displayed in the response not the browser itself.
The controller action executing this code is called by the ajax statement:
$("#btnReport").click(function () {
var datum = $("#hiddenDatum").val();
$.ajax({
type: "GET",
url: '#Url.Action("GenerateMonthlyReport", "Reporting")',
data: { datum: datum},
success: function (data) {
}
});
});
Any suggestions to what I am doing wrong would be highly appreciated.
Edit: My research indicates that the ajax call indeed does not work. How can i initiate the file download based on my controller logic?
You can't download a file directly using AJAX calls. You can do this though:
$.ajax({
type: "GET",
url: '#Url.Action("GenerateMonthlyReport", "Reporting")',
data: { datum: datum},
success: function (data) {
window.location.href = data.filePath; // i.e. '/downloads/file.pdf';
}
});
You cannot stream data back to the jQuery handler. Why not just make this a simple get request with a standard HTML anchor?
#Html.ActionLink("Generate Monthly Report", "GenerateMonthlyReport", "Reporting", new { datum = DateTime.Now.ToString("d", new CultureInfo("en-US")})