HTML5 record moderate video quality for upload to be playable by Safari -
i creating web-based mobile app should possible upload video-recordings. there 2 ways 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 first option works main problem uses build-in mobile camera application leaving no control on quality, again leads potentially large files (especially on android)
second version gives full control on quality , lets os create moderate file sizes size-wise acceptable content in application. ios/safari not support feature yet, ok since iphones record small files default when started browser. can activate option 1 when user-agent ios.
now problems:
first option fine if could:
- control video recording quality of mobile application
- post-elaborate recording change resolution before upload
the problem option 2 .webm container type supported, , safari not support type.
so i'm little stuck - right seems option post-convert incoming .webm files .mp4 on server uploaded. seems cpu costly process on server.
any ideas?
you can record h.264 webm container. supported chrome.
var options = {mimetype: 'video/webm;codecs=h264'}; media_recorder = new mediarecorder(stream, options);
although usual combination of video format , container - valid.
now change h.264/webm h.264/mp4 without transcoding video stream using ffmepg (-vcodec copy).
you try re-wrapping webm mp4 client side in javascript using ffmpeg.js.
Comments
Post a Comment