I want to record video from getUserMedia.
Itsdemo pageor this one (Press Start, then Stop, then Play recorded)
Every 67ms I make snapshot of the canvas and add data64 to array by: video_arr.push(canvas.toDataURL());
Frame rate of my "recorded" video (when to press Play recorded) is smaller than one frame in 67 ms. Why?
Or can somebody tell true way of record and then playing video from getUserMedia?
Its just an idea to do it. I hope it should help you.
Use blobbuilder to store the recorded frames and you need to convert the canvas data to blob for that use polyfill canvas to blob
here is the polyfill usage and download
http://eligrey.com/blog/
https://github.com/blueimp/JavaScript-Canvas-to-Blob
var bb = new BlobBuilder();//global variable
//record for every frame
canvas.toBlob(function(blob) {
bb.append(blob)
});
//onstop upload the blob builder data to server
Related
I'm working on a tour in webvr and using a-frame to build it. I have a bizarre problem. I seem to be able to get aframe to play a video inside a videosphere and correctly display every second of it the first time I enter a new scene, but whenever I exit from it and try to enter it again, only the sound works as supposed. I'm wondering if I'm doing something wrong in the loading of the video or something
I'm collecting the path to the video from a json file in which I describe what each rooms contains (they may have interactable pins for 16:9 video, images and the sort, and also pins that simply load a new scene).
After loading the json, I set the source of the videosphere, name image360, as such:
document.getElementById("image360").setAttribute('src', "#" + jsonArray.zones[zoneID].locations[locationID].name);
I then play the video using the following code :
video = document.querySelector('#' + jsonArray.zones[zoneID].locations[locationID].name);
video.muted = false;
video.addEventListener("ended", videoEnded);
video.play();
The event listener I add to the video takes care of taking the user back to the previous scene once the video ends, which I do using this code:
//This function is called immediately after the end of a 360 video. Thus it first starts by obtaining the scene it should load after the end of the scene
var thisEl = document.querySelector('#' + jsonArray.zones[zoneID].locations[locationID].name);
var currentLocation = jsonArray.zones[zoneID].locations[locationID];
var locationToReturnTo = currentLocation.locationToReturnTo;
var zoneToReturnTo = currentLocation.zoneToReturnTo;
//With the information obtained, the room is then loaded
generateRoom(zoneToReturnTo, locationToReturnTo);
//After loading the room, time to generate the correct pins
generatePins(zoneToReturnTo, locationToReturnTo);
I'm truly at a loss here, and have no idea why this doesn't work. I should note that javascript and aframe are not my area of expertise at all, I just had to pick up this project after a former colleague of mine, who was working on it, left the company abruptly, so excuse me if I'm making a basic mistake.
Thanks in advance.
Switching videos directly on a entity may not work properly:
document.querySelector("a-video").setAttribute("src", "vid.mp4")
because of the current tmp <video> handling.
You should try using the assets management system:
<a-assets>
<video id="vid" src="derby.mp4"></video>
</a-assets>
<!-- Scene. -->
<a-plane src="#vid"></a-plane>
JS
(#vid).setAttribute("src", "newvid.mp4")
When I am streaming a video (using RTMP) in my flash player (AS3) - the frames I see are colored [b]a bit [/b] differently than the frames in the original video !
I would like to somehow save the frames I am showing in my player to an image sequence,
so that I can examine it and understand the difference between each frame I was showing from the stream to the original frame in the original video.
How can this be achieved ? (the video is 5 minutes long, and has 25 frames-per-second).
First you should set the following flags on the fms script, which allows you to access the streaming video or audio.
application.onConnect = function(client,....)
{
...
client.audioSampleAccess = "/";
client.videoSampleAccess = "/";
}
Secondly on the client side, you may use the BitMapData.draw method to capture the video from the VideoDisplayObject
var snapshot:BitmapData = new BitmapData(video.width, video.height);
snapshot.draw(videoDisplay);
I am new to actionScript programming. I know some html and I am currently learning html5. I need to do an interactive video by putting html content in a specific time of the video. I'll be more concise:
For example, I have a video that is 5 minutes long, let's suppose that from the second 3:50 to 4:00 I need to display two boxes over the video, each one representing one choice. If at 3:50 the video shows the possibility to the viewer to select among two paths (the video told the user to select among those paths for instance) the viewer will have the possibility to select one of the paths by clicking on one of the two boxes that will appear in that time interval. I know this needs to be made with the tag and with hyperlinks.
My question is How do I tell the html5 video player to display a canvas from the minute 3:50 to the minute 4:00 in which two hyperlinks will display??
Thanks for your attention I will appreciate very much your help. I need some kind of guidance because I have been looking for many days.
For your use case it seems you want to be able to control the video flow of the user through interactions that jump to different times in the video.
Using html5 video player to seek to a different time in a video (using currentTime) you could create a click event on a box that you lay on top of the video and set the time when you click that box, using:
// Jump 30 seconds into the video
var time = '30';
var video = document.createElement('video');
video.src = "video.mp4";
// Set the time
video.currentTime = time;
video.play();
You can check out how we created an interactive video authoring tool(open source) using html5 and JS and use that.
If you don't want to spend time coding an interactive video you should check out H5Ps authoring tool through this simple example. You can test out creating your own at H5P.org as well. The tool is completely free.
I may be wrong, but I believe that you mean javascript instead of actionscript. If that is the case then I would definitely check this out Video.JS.
When you reach the current time you trigger your method/function which adds whatever you want on top of the video.
var whereYouAt = myPlayer.currentTime();
However, if you DO mean actionscript then you are working with a flash player. Therefore I suggest you take a look at this Vimeo Player
currentTime:Number [read-only] Returns the current playback time of the video.
What I need to do is easy: the purpose of this test is show down the speed of my webcam when the camera capture a white pixel so:
1/ I create a Camera
this.cam = Camera.getCamera();
this.velocidad = 24; // I set up the fps in 24
this.cam.setMode(ancho,alto,velocidad);
vid = new Video(640,480);
vid.width = ancho;
vid.height = alto;
vid.attachCamera(cam);
addChild(vid);
2/ So now, when the pixel is recognized I need to change the current speed of the camera to 12 in order to slow down the user speed
I've tried with this code but the camera is frozen and nothing change.. I don't know if I have to delete the current instance of the camera and set up again with the disire fps
cam.setMode(640,480,12);
See Camera.setMode() to request a different frame rate, but note that what's available will depend on the camera.
I think this is not possible with just a config setting, property or method.
The possible solution would be to capture the cam and store its frames as bitmaps in and play (or render) them in sequence.
If this is not a commercial project, you can use this: http://code.google.com/p/flvrecorder/ to record and than load the video to play as you want.
Edit:
Here are some more links, since I can't code something for you now:
Post-processing captured video in AS3, creating slow motion
playing slow motion, fast forward , rewind in a video player in flash video player
Also, you can search Google for "as3 video slow" and it will give you more reference material and some examples.
I'm on an AS3 project, playing a video (H264). I want, for some special reasons, to go to a certain position.
a) I try it with NetStream.seek(). There it only goes to keyframes. In my current setting, this means, i can find a position every 1 second. (for a better resolution, i'd have to encode the movie with as many keyframes as possible, aka every frame a keyframe)
this is definetly not my favourite way, because I don't want to reencode all the vids.
b) I try it with NetStream.step(). This should give me the opportunity to step slowly from frame to frame. But in the documentation it says:
This method is available only when data is streaming from Flash Media Server 3.5.3 or higher and when NetStream.inBufferSeek is true.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/NetStream.html#step()
Does this mean, it is not possible with Air for Desktop? When I try it, nothing works.
Any suggestions, how to solve this problem?
Greetings & Thank you!
Nicolas
Flash video can only be advanced by seconds unless you have Flash Media Server hosting your video. Technically, that means that you can have it working as intended in Air, however, the video would have to be streaming (silly adobe...).
You have two options:
1) Import the footage as a movieclip. The Flash IDE has a wizard for this, and if you're developing exclusively in non-FlashIDE environment, you can convert and export as an external asset such as an SWF or SWC. This would then be embedded or runtime loaded into your app giving you access to the per-frame steppable methods of MovieClip. This, however, does come with some audio syncing issues (iirc). Also, scrubbing backwards is not an MC's forté.
2) Write your own video object that loads an image sequence and displays each frame in order. You'd have to setup your own audio syncing abilities, but it might be the most direct solution apart from FLVComponent or NetStream.
I've noticed that flash player 9 scrubs nice and smooth but in players 10+ I get this no scrub problem.
My fix, was to limit frequency the calls to the seek function to <= 200ms. This fixed scrubbing but is much less smooth as player 9. Perhaps because of the "Flash video can only be advanced by seconds" limitation? I used a timer to tigger the function that calls seek() for the video.
private var scrubInterval:Timer = new Timer(200);
private function videoScrubberTouch():void {
_ns.pause();
var bounds:Rectangle = new Rectangle(0,0,340,0);
scrubInterval.addEventListener(TimerEvent.TIMER, scrubTimeline);
scrubInterval.start();
videoThumb.startDrag(false, bounds);
}
private function scrubTimeline(e:TimerEvent):void {
var amt:Number = Math.floor((videoThumb.x / 340) * duration);
trace("SCRUB duration: "+duration+" videoThumb.x: "+videoThumb.x+" amt "+amt);
_ns.seek(amt);
}
Please check this Demo link (or get the SWF file to test outside of browser via desktop Flash Player).
Note: Demo requires FLV with H.264 video codec and AAC or MP3 audio codec.
The source code for that is here: Github link
In the above demo there is (bytes-based) seeking and frame by frame stepping. The functions you want to study mainly are:
Append_SEEK ( position amount ) - This will got to the specified position in bytes and search for the nearest available keyframe.
get_frame_TAG - This will extract a tag holding one frame of data. Audio can be in frames too but lets assume you have video-only. That function is your opportunity to adjust timestamps. When it's run it will also append the tag (so each "get_frame_TAG" is also a "frame step").
For example : You have a 25fps video, you want the third-frame at 4 seconds into playback...
1000 milisecs / 25 fps = 40 units for each timestamp. So 4000 ms == 4 secs + add the 40 x 3rd frame == an expected timestamp of 4120.
So getting that frame means... First find a keyframe. Then step through each frame checking the timestamps that represent a frame you want. If it isnt then change it to the same as most recent keyframe timestamp (this forces Flash to fast-forward through the frames to keep things in sync as it assumes the frame [with smaller than expected timestamp] should have been played by that time). You can "hide" the video object during this process if you don't like the look of fast-forwarding.