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

Sam Dutton

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

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

בדמו הבא (שזמין בדוגמאות ל-WebRTC), תמונה MediaStream שצולמה מרכיב canvas בצד שמאל מועברת בסטרימינג דרך חיבור עמית לעמית ב-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() עם רכיב מדיה שמטמיע הגנה על תוכן באמצעות Encrypted Media Extensions יגרום להצגת חריגה.

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

  • המידות של סרטון captureStream() תואמות למידות של <canvas> שבו הוא מוצג.

הדגמות

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 ומעלה כברירת מחדל.

למידע נוסף