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

Sam Dutton

השיטה 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 th<e sou>rce 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 th<e sou>rce 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() עם רכיב מדיה שמטמיע הגנה על תוכן באמצעות Encrypted Media Extensions יוביל להשלכת חריגה.

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

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

הדגמות

קנבס

• שידור מרכיב בד לרכיב וידאו
• שידור מרכיב בדף קנבס לחיבור בין שווים

וידאו

• שידור מרכיב וידאו לרכיב וידאו
• שידור מרכיב וידאו לחיבור עמית

תמיכה

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

למידע נוסף

• באג בהטמעה של Firefox
• סטטוס הפלטפורמה של Chrome