आप ब्राउज़र में बस वेब का उपयोग करके वीडियो बनाने और संपादित करने में सक्षम होना चाहिए। स्क्रीनफ्लो के समान उपयोगकर्ता-इंटरफ़ेस प्रदान करना संभव होना चाहिए जो आपको एक आउटपुट वीडियो बनाने देता है जो एकाधिक वीडियो, छवियों और ऑडियो को एक वीडियो में जोड़ता है जिसे YouTube जैसी सेवाओं पर अपलोड किया जा सकता है।

यह पोस्ट वास्तव में सिर्फ इरादे का बयान है। मैं प्लेटफार्म पर क्या उपलब्ध है और उपलब्ध नहीं है यह देखने की लंबी प्रक्रिया शुरू करने जा रहा हूं और देख रहा हूं कि आज हम कितना दूर कर सकते हैं।

इस परियोजना के कुछ विचारों के दौरान, मेरे पास कार्ल सागन पल था - इसलिए एक सेब पाई बनाने के लिए ब्रह्मांड का आविष्कार करने की बजाय, मुझे कम से कम एक वीडियो संपादक बनाने के लिए आवश्यक सभी टूल्स बनाना होगा, खासकर अगर मैं रिकॉर्ड करना चाहता हूं इसे करने की प्रक्रिया। तथ्य यह है कि यह पोस्ट मौजूद है क्योंकि मुझे पता है कि मेरे पास कुछ टुकड़े हैं और जाने के लिए तैयार हैं।

मुझे नहीं लगता कि मैं एक बड़े पैमाने पर मोनोलिथिक ‘वीडियो एडिटर’ बनाने जा रहा हूं, जो कि किसी और के लिए एक व्यवसाय हो सकता है, लेकिन मैं आवश्यक सभी टुकड़ों को काम करने की कोशिश करने की योजना बना रहा हूं ताकि मैं इसे आसान बना सकूं वेब पर शानदार वीडियो बनाएं और आशा है कि वेब पर संभवतः बहुत से लोगों को दिखाएं।

नीचे मेरी मोटा वन-पेज परियोजना योजना है:

** मेरे पास मौजूद मामलों का उपयोग करें: **

• मुझे आमतौर पर Google I / O और क्रोम DevSummit के लिए सभी डिवाइस डेमो रिकॉर्ड करना होगा और ओवरले में जोड़ना होगा। टीम पर हर कोई ऐसा करने में सक्षम होना चाहिए।
• टीम अक्सर स्क्रीनकास्ट रिकॉर्ड करती है और मैं उन्हें एक साधारण वेबसाइट से जल्दी से करने में सक्षम बनाना चाहता हूं और अंतिम आउटपुट को साफ करने में सक्षम हूं।
• मुझे तेज रखने के लिए कुछ उत्पादों को बनाने की जरूरत है। ;)

** इनपुट: **

• [पी 0] एक माइक्रोफोन से ऑडियो रिकॉर्ड करें
• [पी 0] एक वेब कैमरा से वीडियो रिकॉर्ड करें [किया - नीचे देखें]
• [पी 0] वेब पर होस्ट किए गए बाहरी वीडियो एम्बेड करें
• [पी 0] डेस्कटॉप रिकॉर्ड करें
• [पी 1] एक रिमोट स्ट्रीम रिकॉर्ड करें
• [पी 1] एक & lt; कैनवास & gt; तत्त्व
• [पी 0] स्थानीय डिवाइस से एक फाइल लोड करें
• [पी 1] स्थानीय डिवाइस से एक फ़ाइल साझा करें (एंड्रॉइड शेयर इरादा)

** हेरफेर: **

• [पी 1] वॉटरमार्क जोड़ें
• [पी 1] छवि पर फिल्टर प्रभाव में जोड़ें
• [पी 0] परतों के रूप में कस्टम छवियों में जोड़ें
• [पी 0] कतार वीडियो और ओवरले
• [पी 0] ऑडियो और वीडियो के ओवरले अलग ट्रैक
• [पी 1] विशिष्ट समय पर ओवरले पाठ
• [पी 0] आकार के लिए वीडियो फसल
• [पी 0] वीडियो की स्थिति और आकार बदलने सक्षम करें
• [पी 0] वीडियो / ऑडियो ट्रिम करें
• [पी 0] वीडियो / ऑडियो splice

** आउटपुट: **

• [पी 0] वेबएम प्रारूप में वीडियो फ़ाइल
• [पी 1] एमटीबी सूचना
• [पी 1] xyz प्रारूप में वीडियो फ़ाइल

इस वीडियो के लिए कोड डेमो

const init = () => {  
  let blobs;  
  let rec;  
  let stream;  
    
  captureBtn.onclick = async () => {  
    stream = await navigator.mediaDevices.getUserMedia({video: { width: 1280, 
height: 720 }, audio: true});

    videoElement.srcObject = stream;  
    let opts = {mimeType: 'video/webm; codecs=vp9,opus'};  
    blobs = [];  
    download.style.display = 'none'

    rec = new MediaRecorder(stream, opts);  
    rec.ondataavailable = (e) => blobs.push(e.data);  
    rec.onstop = async () => {  
      let blob = new Blob(blobs, {type: 'video/webm'});  
      let url = window.URL.createObjectURL(blob);  
      download.href = url;  
      download.download = 'test.webm';  
      download.style.display = 'block';  
    };  
    startBtn.disabled = false;  
    captureBtn.disabled = true;  
  };

  startBtn.onclick = () => {  
    startBtn.disabled = true;  
    stopBtn.disabled = false;  
    rec.start();  
  };

  stopBtn.onclick = () => {  
    captureBtn.disabled = false;  
    startBtn.disabled = true;  
    stopBtn.disabled = true;

    rec.stop();  
    stream.getTracks().forEach(s=>s.stop())  
    videoElement.srcObject = null  
    stream = null;  
  };  
};

window.addEventListener('load', init);  

Paul Kinlan

Trying to make the web and developers better.