I am trying to record a session using MediaRecorder.
I am using canvasStream for video and getUserMedia() for audio stream.
This code is working fine if laptop's speaker and microphone is used, but when I use headset it doesn't record audio output that is coming in headset.
Please find below sample code:
navigator.mediaDevices.getUserMedia({audio: {echoCancellation: false, noiseSuppression: false, channelCount: 2}}).then(function(audioStream) {
var canvas = document.getElementById('canvas');
var canvasStream = canvas.captureStream(35);
var o = new MediaStream();
getTracks(audioStream, 'audio').forEach(function(track) {
o.addTrack(track);
});
getTracks(canvasStream, 'video').forEach(function(track) {
o.addTrack(track);
});
let recorder = new MediaRecorder(o, {mimeType: 'video/webm'});
});
Related
Is there a property on the AVAudioPlayer class that I can use to get the samples? If not is there another class I can use to get this information?
Here's what I have:
var openDialog = NSOpenPanel.OpenPanel;
openDialog.CanChooseFiles = true;
openDialog.CanChooseDirectories = false;
openDialog.AllowedFileTypes = new string[] { "wav" };
if (openDialog.RunModal() == 1)
{
var url = openDialog.Urls[0];
if (url != null)
{
var path = url.Path;
var audioplayer = AVFoundation.AVAudioPlayer.FromUrl(file);
var samples = audioplayer.SAMPLES?;
Visual Studio Mac (C# / Xamarin)
AVAudioPlayer does not give you access to the sample data, but if you switch playback to AVPlayer you can use an MTAudioProcessingTap to "tap" the samples as they are played.
If you simply want to examine the samples in your file you can use AVAudioFile.
// get the total number of samples
var audioFile = new AVAudioFile(file, out outError);
var samples = audioFile.Length;
I using libCLCSharp and xamarin forms to playvideo.
With this url below is OK. but when i replace by an youtuble video it can not to play.
how can i do it. Thanks
my code:
_libvlc = new LibVLC();
var media = new Media(_libvlc, "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4", FromType.FromLocation);
myVideo.MediaPlayer = new MediaPlayer(media) { EnableHardwareDecoding = true };
myVideo.MediaPlayer.Play();
Docs: https://code.videolan.org/videolan/LibVLCSharp/-/blob/3.x/docs/how_do_I_do_X.md#how-do-i-play-a-youtube-video
Core.Initialize();
using(var libVLC = new LibVLC())
{
var media = new Media(libVLC, "https://www.youtube.com/watch?v=dQw4w9WgXcQ", FromType.FromLocation);
await media.Parse(MediaParseOptions.ParseNetwork);
using (var mp = new MediaPlayer(media.SubItems.First()))
{
mp.Play();
}
}
I'm trying to record Video/Audio files using MediaRecorder API for Firefox.
When I'm using web Audio API for creating the nodes (source -> Gain -> Destination)
The output of the recorded file is only Audio as the return stream from the destination node is Audio stream only referring to this documentation
https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamAudioDestinationNode
Any suggestion for getting Audio/video stream in the destination output to record audio/video not audio only.
var mediastream;
var ctx = new AudioContext();
var mediaStreamSource = ctx.createMediaStreamSource(mediaStream);
var destination = ctx.createMediaStreamDestination();
ObjectStore.VolumeGainNode = ctx.createGain();
ObjectStore.VolumeGainNode.gain.value = 0.5;
mediaStreamSource.connect(ObjectStore.VolumeGainNode);
ObjectStore.VolumeGainNode.connect(destination);
mediaStream = destination.stream;
You need a stream composed of the gUM video track and your gain-modified audio track.
Following the standard, Firefox lets you modify tracks in a stream using stream.addTrack and stream.removeTrack, as well as compose new streams out of tracks with new MediaStream([tracks]).
This lets you solve your problem by replacing the gUM audio track with your gain-manipulated one:
var constraints = { video: true, audio: true };
var start = () => navigator.mediaDevices.getUserMedia(constraints)
.then(stream => modifyGain(video.srcObject = stream, 0.5))
.catch(e => console.error(e));
var modifyGain = (stream, gainValue) => {
var audioTrack = stream.getAudioTracks()[0];
var ctx = new AudioContext();
var src = ctx.createMediaStreamSource(new MediaStream([audioTrack]));
var dst = ctx.createMediaStreamDestination();
var gainNode = ctx.createGain();
gainNode.gain.value = gainValue;
[src, gainNode, dst].reduce((a, b) => a && a.connect(b));
stream.removeTrack(audioTrack);
stream.addTrack(dst.stream.getAudioTracks()[0]);
};
Here's the fiddle (Firefox 44 or newer): https://jsfiddle.net/7wd2z8rz/
Again with MediaRecorder: https://jsfiddle.net/j33xmkcq/
I'm attempting to take a photo with my device camera, but images taken with the device held in "portrait" mode come out sideways. I'd like to rotate them before saving them, but the solution that I keep coming across isn't working for me.
Windows.Storage.Streams.InMemoryRandomAccessStream stream = new Windows.Storage.Streams.InMemoryRandomAccessStream();
imagePreview.Source = null;
await stream.WriteAsync(currentImage.AsBuffer());
stream.Seek(0);
BitmapDecoder decoder = await BitmapDecoder.CreateAsync(stream);
BitmapEncoder encoder = await BitmapEncoder.CreateForTranscodingAsync(stream, decoder);
encoder.BitmapTransform.Rotation = BitmapRotation.Clockwise90Degrees;
encoder.IsThumbnailGenerated = false;
await encoder.FlushAsync();
//save the image
StorageFolder folder = KnownFolders.SavedPictures;
StorageFile capturefile = await folder.CreateFileAsync("photo_" + DateTime.Now.Ticks.ToString() + ".bmp", CreationCollisionOption.ReplaceExisting);
string captureFileName = capturefile.Name;
//store stream in file
using (var fileStream = await capturefile.OpenStreamForWriteAsync())
{
try
{
//because of using statement stream will be closed automatically after copying finished
await Windows.Storage.Streams.RandomAccessStream.CopyAsync(stream, fileStream.AsOutputStream());
}
catch
{
}
}
this produces the original image with no rotation applied to it. I've looked at a lot of samples, and can't figure out what I'm doing wrong.
it's my first time to work with Youtube API and after I got most things done, I'm having one last issue with it which i can't seem to solve, so I would appreciate if you could take a few minutes to help.
Here it goes in simple words:
I have a video slider (carousel). Under the main video, are thumbnails of other related videos (this is the site: kushtube.com)
when I click on a related video thumbnail, the main player content is loaded via AJAX
What I wanted to ultimately achieve is that when the current video ends,the next vicdo starts playing automatically.
Now after I did some work, I managed to make it work like that, BUT
it only work on page load...
If i click on one of the related video thumbnails, the content of the player loads via AJAX and I cant seem to be able to re-initialize Youtube API to target the new ajax-loaded player.
This is my current code:
<script>
// global variable for the player
var player;
function ytInit(){
// create the global player from the specific iframe (#video)
player = new YT.Player('test', {
events: {
// call this function when player is ready to use
'onReady': onPlayerReady,
'onStateChange': onPlayerStatusChange
}
});
}
// this function gets called when API is ready to use
function onYouTubeIframeAPIReady() {
ytInit();
}
jQuery(document).ready( function($){
jQuery('ul.carousel-list li').click( function(){
ytInit();
jQuery('ul.carousel-list li.active').removeClass('active');
});
});
function onPlayerStatusChange(event) {
/* video status
----------------
-1 (unstarted)
0 (ended)
1 (playing)
2 (paused)
3 (buffering)
5 (video cued)
*/
console.log( event );
if( event.data == 0 ){
var thisLI = jQuery('ul.carousel-list li.active'); //get active slider item
var thisLINext = jQuery('ul.carousel-list li.active').next(); //get next slider item
var nextVideoCode = thisLINext.attr('video_code'); //get next video code
var nextVideoTitle = thisLINext.attr('video_title'); //get next video code
var nextVideoUrl = thisLINext.attr('video_url'); //get next video code
thisLINext.addClass('active'); //activate next slider item
thisLI.removeClass('active'); //deactivate current cslider item
//load next video
player.loadVideoById(nextVideoCode);
//update video title in header
jQuery('.entry-header h1.entry-title a').attr('href', decodeURIComponent(nextVideoUrl)).text(decodeURIComponent(nextVideoTitle));
}
}
function onPlayerReady(event) {
// bind events
var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
player.playVideo();
});
var pauseButton = document.getElementById("pause-button");
pauseButton.addEventListener("click", function() {
player.pauseVideo();
});
}
// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
Do you have any helpful suggestions? I would really appreciate.
Calling ytInit() when you click the <li> creates a new player object. I think that's not quite what you want.
Have you tried:
jQuery('ul.carousel-list li').click( function(){
// ytInit();
// just load the video from the "video_code" attr
player.loadVideoById(this.getAttribute('video_code'));
jQuery('ul.carousel-list li.active').removeClass('active');
});
If that doesn't autoplay, then you may have to wait for the YT.PlayerState.CUED (i.e. 5) event in your player status change event listener to start the player.