לכוד MediaStream מתוך רכיב בד ציור, וידאו או אודיו

סם דוטון

השיטה captureStream() מאפשרת לתעד MediaStream מהרכיב <canvas>, <audio> או <video>.

כך אפשר להקליט שידור וידאו או אודיו מכל אחד מהרכיבים האלה, לשדר בסטרימינג בשידור חי דרך WebRTC או לשלב עם אפקטים או קטעי MediaStream אחרים ב-<canvas>. במילים אחרות, captureStream() מאפשר ל-MediaStream להעביר מדיה הלוך ושוב בין רכיבי בד ציור, רכיבי אודיו או וידאו, או אל RTCPeerConnection או MediaRecorder.

בהדגמה הבאה (זמינה מהדגימות של WebRTC) , MediaStream שצולם מרכיב בד ציור בצד שמאל, מועבר דרך חיבור בין רשתות שכנות באמצעות WebRTC לרכיב הווידאו בצד ימין:

(בהמשך יש קישורים לדוגמאות נוספות לסרטונים והדפסות על קנבס.)

הקוד captureStream() פשוט.

עבור <canvas>:

var canvas = document.querySelector('canvas');
var video = document.querySelector('video');

// Optional frames per second argument.
var stream = canvas.captureStream(25);
// Set the source of the <video> element to be the stream from the <canvas>.
video.srcObject = stream;

עבור <video>:

var leftVideo = document.getElementById('leftVideo');
var rightVideo = document.getElementById('rightVideo');

leftVideo.onplay = function() {
    // Set the source of one <video> element to be a stream from another.
    var stream = leftVideo.captureStream();
    rightVideo.srcObject = stream;
};

אבל למה?

השיטה captureStream() מאפשרת להקליט או לשדר בשידור חי מרכיבי קנבס או מרכיבי מדיה:

  • הקלטה של משחק ושידור חי מ-<canvas>
  • מצלמים סרטון במצלמה ומוסיפים תוכן או אפקטים
  • יצירת אפקטים של תמונה בתוך תמונה ממספר סרטונים באמצעות <canvas>
  • שילוב בין וידאו ותמונות (מקבצים, ממצלמה או משניהם) ב-<canvas>
  • סרטון בשידור חי שהופעל מקובץ
  • שימוש בהודעת אודיו או וידאו מוקלטת עבור הודעת וידאו או דואר קולי

בעיקרון, captureStream() מאפשר ל-JavaScript ליצור ו "להכניס דברים" ל-MediaStream.

האותיות הקטנה

  • ניסיון להשתמש ב-captureStream() עם רכיב מדיה שמטמיע הגנה על תוכן באמצעות תוספי מדיה מוצפנים יגרום לחריגה.

  • כשמצלמים מ-<canvas>, קצב הפריימים המקסימלי מוגדר כשהמתבצעת קריאה ל-captureStream(). לדוגמה, הפירוש של canvas.captureStream(10) הוא שגודל הפלט של קנבס הוא בין 0 ל-10FPS. שום דבר לא מוקלט אם לא מצולמת שום דבר ב-<canvas>, וצולם צילום של 10fps גם אם ה-<canvas> מצולמת במהירות של 30fps. במפרט של captureStream קיים באג עם דיון נוסף.

  • המימדים של סרטון captureStream() תואמים ל-<canvas> שבו הוא הופעל.

הדגמות

אזור עריכה

וידאו

תמיכה

  • לוח הציור captureStream(): Firefox 43 ואילך, Chrome בגרסה 50 ואילך עם chrome://flags/#activate-EXPERIMENTal-web-platform-features מופעלת, או Chrome בגרסה 52 ומעלה כברירת מחדל.
  • וידאו ואודיו captureStream(): Firefox 47, Chrome 52 ואילך עם chrome://flags/#activate-EXPERIMENTal-web-platform-features מופעלת, או Chrome בגרסה 53 ומעלה כברירת מחדל.

למידע נוסף