I'm trying to integrate 360 videos in WebGL, using the HTML5 video player and a flat video it does work, but when I use this video by example :
http://video.airpano.com/Video-Porto/portu_fin3_ir2048_5mbs.mp4
all I get is a black screen.
I use the chromium version 44.0.2383.0 for WebVR (http://blog.tojicode.com/2014/07/bringing-vr-to-chrome.html).
Does anyone experimented this problem before, or managed to play 360 videos ? thank you for your help !
EDIT
Here's the function I use to stream a videotexture :
that.loadVideoTexture = function(){
// create the video element
this.video = document.createElement("video");
this.video.src = "http://video.airpano.com/Video-Porto/portu_fin3_ir2048_5mbs.mp4";
this.video.crossOrigin = "anonymous";
this.video.crossorigin = "anonymous";
this.video.load(); // must call after setting/changing source
this.videoTexture = new THREE.VideoTexture(this.video);
this.videoTexture.minFilter = THREE.LinearFilter;
this.videoTexture.magFilter = THREE.LinearFilter;
this.mesh.material.materials[1] = new THREE.MeshPhongMaterial( { map: this.videoTexture, color:"white", side:THREE.DoubleSide } );
}
But apparently it would be coming from the non support of .mp4 by Chrome, so I guess the code isn't involved in this problem.
Since Chromium is an open-source distribution, it does not include support for proprietary, licensed formats like MP4 (H.264). You'll either need to convert the video to WebM or use WebVR in Firefox Nightly instead.
Related
Goal: use MediaRecorder (or else) api to produce video files that are viewable cross platforms.
Fail: current api falls back to container/codec on google chrome which is only viewable on chrome and advanced desktop media players but not on Safari or mobile devices.
! Same code when running on safari generates a working video file on all platforms.
const mimeType = 'video/webm;codecs=H264'
rec = new MediaRecorder(stream.current, { mimeType })
rec.ondataavailable = e => blobs.push(e.data)
rec.onstop = async () => {
saveToFile(new Blob(blobs, { type: mimeType }))
}
Tried all different combinations of containers and codecs.
also tried to override the mimeType of the Blob with MP4 file container.
No success what so ever.
also tried:
https://github.com/streamproc/MediaStreamRecorder
https://github.com/muaz-khan/RecordRTC
Same issues. iI seems like chrome's container/codec combinations always fall back to a format that is only viewable out of the box on chrome or a powerful desktop video player like vlc.
The only cross platform working video for me is the one taken from safari browser and is the 5th from left in the picture above.
What is the correct container/codac to be used in MediaCapture api to make the output file playable cross platform.
Edit -
We ended up building a transcoding pipeline with AWS ElasticTranscoder, which takes the uploaded video and transcodes it with a general preset that is playable on all platforms thus creating a converted video file.
unfortunately the bounty I offered expired, but if someone answers the original question I would gladly reward him with the bounty again.
I think your problem may be in the first line:
const mimeType = 'video/webm;codecs=H264'
The container you are using is webm, which typically uses codecs VP8, VP9. H264 is a codec used in the mp4 container.
Chrome supports webm. Safari does not (and all iOS browsers are based on Safari - hence your mobile issue).
You say that run on Safari, this outputs a playable video. use ffprobe to see what codec/containers are outputted on Safari - I am guessing that there is a change in container/codec.
Since your video is h264, you must simply change the container to mp4, and it will play everywhere. This is a 'copy' from one container to the other, not a transcoding, but you'll still need ffmpeg :)
Here's a post that might help: Recording cross-platform (H.264?) videos using WebRTC MediaRecorder
I am trying to record video using HTML5 API. I want this solution to be cross platform and it should atleast work on Chrome, Firefox and Edge browser. I tried with following code
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
}).then((mediaStream) => {
const video = document.querySelector('video');
const url = window.URL.createObjectURL(mediaStream);
video.src = url;
});
Above code displays video in Chrome and Edge. When I try to capture bytes using MediaRecorder API, it only works in Chrome and not in Edge. Please suggest what can be done.
const recorder = new MediaRecorder(mediaStream);
recorder.ondataavailable = onDataAvailable
...
function onDataAvailable(d){
//d.data is populated in Chrome but not in Edge.
}
Please suggest, how can I capture bytes so that it can be saved on server.
I tried MediaStreamRecorder but that too didn't work with Edge.
Update : I found few approaches which indicate use of Canvas as an option to render frames and capture the bytes. Then use requestAnimationFrame to continue capturing video. While this might work, I am still open to any other better suggestions.
The MediaRecorder API seem to be only implemented in FireFox & Chrome
https://caniuse.com/#search=MediaRecorder
I'd always check caniuse.com for browser support for new APIs!
I am creating a web-based mobile app where it should be possible to upload video-recordings.
There are two ways to achieve this:
Use input:
<input type="file" name="video" accept="video/*" capture></input>
Use RTC MediaRecorder:
var recordedBlobs = [];
function handleDataAvailable(event) {
if (event.data && event.data.size > 0) {
recordedBlobs.push(event.data);
}
}
var options = {
mimeType: 'video/webm',
audioBitsPerSecond : 128000,
videoBitsPerSecond : 2500000
}
mediaRecorder = new MediaRecorder(window.stream, options);
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start(10);
While the first option always works the main problem is that it uses the build-in mobile camera application leaving us no control over quality, which again leads to potentially very large files (especially on android)
Second version gives us full control over quality and lets os create moderate file sizes that are size-wise acceptable as content in the application. iOS/Safari does not support this feature yet, but this is ok since iPhones record small files by default when started from the browser. So I can activate option 1 when the user-agent is iOS.
Now the problems:
First option would be fine if I could:
Control the video recording quality of the mobile application
Post-elaborate the recording to change the resolution before upload
The problem with option 2 is that only the .webm container type is supported, and Safari does not support this type.
So I'm a little stuck - right now it seems like my only option is to post-convert the incoming .webm files to .mp4 on the server as they are uploaded. But it seems to be a very CPU costly process on the server.
Any good ideas?
You can record as H.264 into a webm container. This is supported by Chrome.
var options = {mimeType: 'video/webm;codecs=h264'};
media_recorder = new MediaRecorder(stream, options);
Although it is an usual combination of video format and container - it is valid.
Now you could change H.264/webm into H.264/mp4 without transcoding the video stream using ffmepg (-vcodec copy).
You could also try re-wrapping from webm to mp4 client side in JavaScript using ffmpeg.js.
I am using video element of html5 for displaying video and audio streaming.
In older version of systems (laptops, pcs, etc), somtimes volume level is not good. so i want to amplify stream audio volume .
I made some hunt but didn't find any feasible solution.
Please provide me some links or some solution so that i can integrate that in my app
you can use timbre.js to add compression ( with gain, ie. amplification ) to the audio of your video track. Something like this:
// the source of your video file
var src = document.getElementById('video').firstElementChild.src;
// this will play and loop the audio with increased gain
var video = T("audio", {loop:true}).load(src, function(res) {
T("comp", {thresh:-48, knee:30, ratio:24, gain:18}, this).play();
});
I am building an iPad app using Flash CS6 to compile to AIR 3.3 on a PC.
One of the app requirements is a video player which can be overlaid with other display element - primarily for subtitles.
I am using Netstream to play MP4 video (have also tried FLVPlayer with same results).
Everything works fine when compiled to run in the emulator, but the video doesn't play once installed on my test device - iPad 3.
(I did a simple test a few months ago and got video playing correctly with audio, but that was CS5.5, AIR 3.1, iPad 2. I will return to this setup, but I obviously do also need to support iPad3...)
So, a couple of quick questions first...
Anyone with the same problems?
Do you know if anything has changed recently on iOS that blocks AIR playing video?
I do the usual netstream / netconnection stuff then pass a File.url to netstream.play().
Here are the guts of the code:
var nc:NetConnection = new NetConnection();
var ns:NetStream;
var vid:Video = new Video();
var videoFile:File;
videoFile = File.applicationDirectory;
videoFile = videoFile.resolvePath(Config.VIDEO_DIRECTORY + 'myVideo.mp4');
nc.connect(null);
ns = new NetStream(nc);
ns.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus, false, 0, true);
ns.client = this; // To handle onMetaData & onXMPData
vid.attachNetStream(ns);
vid.smoothing = true;
addChild(vid);
ns.play(videoFile.url);
Publish settings are:
Hardware acceleration :: Level 2 - GPU (have also tried Direct)
Render Mode :: GPU (have also tried Direct)
Device :: iPad
Resolution :: High (have also tried Standard)
Included files :: app.swf, app.xml, assets directory with video / images (images load fine) (tried including .mp4 directly rather than in directory, no difference)
Can any of you help?
I am experiencing the same issue when I started using AIR 3.3. When I attempt to play a video, the app would crash.
When I went back to AIR 3.1, the problem went away and was again able to play the h.264 MP4 video with no problem.
According to the following link, there appears to be a bug in AIR 3.3, which supposedly will be fixed when 3.4 comes out. #See https://bugbase.adobe.com/index.cfm?event=bug&id=3210031
Ok, fixed.
The above code is all correct (works perfectly), but the video file was wrong.
I still don't understand why, and would welcome some response, but I have switched to .flv formatted video and it works fine.
The file I was testing was encoded for iPad and ran fine when played in AIR on the desktop, and when imported to the iPad and played natively.
Any insight to encoding presets (I am running Adobe Media Encoder) for mp4 would be interesting.
i had the same solution, it works with videos included in the build. But if I stream the flv from my server (http) nothing happens...