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

Sam Dutton

הגיע הזמן להוציא את השמפניה והדונאטס! התכונה של Chrome שהכי הרבה משתמשים הוסיפו לה סימניות הופעלה עכשיו.

נסו לדמיין מצלמה להקלטת ירידות במורד ההר שמסנכרנת את הסרטון עם נתוני המיקום הגיאוגרפי, או אפליקציה פשוטה במיוחד להקלטת הודעות קוליות, או ווידג'ט שמאפשר לכם לצלם סרטון ולהעלות אותו ל-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 יש ערכים ספציפיים יותר או פחות, שמשלבים קונטיינרים וקודקים. לדוגמה:

• audio/webm
• video/webm
• video/webm;codecs=vp8
• video/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 זמינה כאן.

בשלב הבא, מוסיפים בורר נתונים ומפעילים את השיטה 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 שהוקלטו ברכיב וידאו על ידי יצירת 'Super-Blob' ממערך ה-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/Sample

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

הדגמות

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

אפליקציות

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

פוליפילים

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

תמיכה בדפדפנים

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

המפרט

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

פרטי ה-API

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