צילום וידאו ואודיו באמצעות MediaRecorder

Sam Dutton

תפסיקו את השמפניה והדונאטס! תכונת Chrome המסומנת ביותר בכוכב יושמה עכשיו.

תארו לעצמכם מכשיר הקלטת סקי שמסנכרן סרטונים עם נתוני GeoLocation, אפליקציית תזכורות קוליות פשוטה במיוחד או ווידג'ט שמאפשר לכם לצלם סרטון ולהעלות אותו ל-YouTube – והכול ללא יישומי פלאגין.

MediaRecorder API מאפשר לכם להקליט אודיו ווידאו מאפליקציית אינטרנט. הוא זמין עכשיו ב-Firefox וב-Chrome ל-Android ולמחשב.

אפשר לנסות זאת כאן.

ה-API פשוט וקל, ואציג אותו באמצעות קוד מהדגמת מאגר לדוגמה של WebRTC. שימו לב: ניתן להשתמש ב-API רק ממקורות מאובטחים: HTTPS או localhost.

קודם כל, יוצרים MediaRecorder עם MediaStream. אפשר להשתמש בפרמטר options כדי לציין את פורמט הפלט הרצוי:

var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);

ה-MediaStream יכול להיות מהמקורות הבאים:

• שיחת getUserMedia().
• סיום של קריאת WebRTC.
• הקלטת מסך.
• Web Audio, לאחר יישום הבעיה.

עבור options ניתן לציין את סוג ה-MIME, ובעתיד גם קצבי סיביות של אודיו ווידאו.

לסוגי MIME יש ערכים ספציפיים יותר או פחות, והם משלבים קונטיינרים ורכיבי Codec. למשל:

• audio/webm
• וידאו/אינטרנט
• וידאו/webm;codecs=vp8
• וידאו/webm;codecs=vp9

אפשר להשתמש בשיטה הסטטית MediaRecorder.isTypeSupported() כדי לבדוק אם סוג MIME נתמך, לדוגמה כשיוצרים מופע MediaRecorder:

var options;
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
    options = {mimeType: 'video/webm; codecs=vp9'};
} else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
    options = {mimeType: 'video/webm; codecs=vp8'};
} else {
    // ...
}

הרשימה המלאה של סוגי MIME שנתמכים על ידי MediaRecorder ב-Chrome זמינה כאן.

בשלב הבא, מוסיפים handler של נתונים ומפעילים את השיטה start() כדי להתחיל להקליט:

var recordedChunks = [];

var options = {mimeType: 'video/webm;codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();

function handleDataAvailable(event) {
    if (event.data.size > 0) {
    recordedChunks.push(event.data);
    } else {
    // ...
    }
}

בדוגמה הזו, הפונקציה מוסיפה Blob למערך recordedChunks בכל פעם שיש נתונים זמינים. אפשר לתת לשיטה start() ארגומנט timeSlice שמציין את אורך המדיה שרוצים לתעד עבור כל Blob.

בסיום ההקלטה, אומרים ל-MediaRecorder:

mediaRecorder.stop();

הפעל את ה-blobs שהוקלטו ברכיב וידאו על ידי יצירת 'סופר-בול' ממערך ה-blobs המוקלטים:

function play() {
    var superBuffer = new Blob(recordedChunks);
    videoElement.src =
    window.URL.createObjectURL(superBuffer);
}

לחלופין, אפשר להעלות לשרת באמצעות XHR או להשתמש בממשק API כמו YouTube (ראו הדגמה ניסיונית בהמשך).

ניתן להשיג את ההורדה באמצעות האקינג כלשהו באמצעות קישור:

function download() {
    var blob = new Blob(recordedChunks, {
    type: 'video/webm'
    });
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    document.body.appendChild(a);
    a.style = 'display: none';
    a.href = url;
    a.download = 'test.webm';
    a.click();
    window.URL.revokeObjectURL(url);
}

משוב על ממשקי API והדגמות

היכולת להקליט אודיו ווידאו ללא יישומי פלאגין היא חדשה יחסית באפליקציות אינטרנט, לכן אנחנו מעריכים במיוחד את המשוב שלכם על ממשקי ה-API.

• באג בהטמעה של MediaRecorder: crbug.com/262211
• Chrome: crbug.com/new
• Firefox: bugzil.la
• הדגמות: github.com/webrtc/samples

נשמח גם לדעת מהם תרחישי השימוש שהכי חשובים לך, ולאילו תכונות ברצונך לתת עדיפות. אפשר להגיב למאמר הזה או לעקוב אחר ההתקדמות בכתובת crbug.com/262211.

הדגמות

• webrtc.github.io/samples/src/content/getusermedia/record
• simpl.info/mr (אותו קוד, כתובת URL קלה יותר לנייד!)
• צילום סרטון והעלאתו ל-YouTube באמצעות רכיב <google-youtube-upload> מותאם אישית וניסיוני

אפליקציות

• האפליקציה Voice Memos של פול לואיס כוללת עכשיו תמיכה ב-MediaRecorder, למילוי פוליגוני לדפדפנים שלא תומכים באודיו של MediaRecorder.

פוליפילס

• MediaStreamRecorder של Muaz Khan היא ספריית JavaScript להקלטת אודיו ווידאו, שתואמת ל-MediaRecorder.
• Recorderjs מאפשר הקלטה מצומת של Web Audio API. אפשר לראות זאת בפעולה באפליקציה תזכורות קוליות של פול לואיס.

תמיכת דפדפן

• Chrome מגרסה 49 ואילך כברירת מחדל
• Chrome בגרסה 47 ו-48 עם תכונות ניסיוניות של פלטפורמת האינטרנט שהופעלו מהכתובת chrome://flags
• Firefox מגרסה 25
• Edge: 'בבדיקה'

המפרט

w3c.github.io/mediacapture-record/MediaRecorder.html

מידע על ה-API

developer.mozilla.org/en/docs/Web/API/MediaRecorder_API