לכוד 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 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>, ו-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 ואילך כברירת מחדל.

למידע נוסף