סטרימינג של סרט מאתר ב-NodeJS
iframe לתוך ה-HTML. זה עובד גם בלי Node.js, כי הסרטון יושב בשרתים של YouTube.video עם מקור משלנו: משתמשים בתג video עם controls ובתוכו תג source שה-src שלו הוא ראוט בשרת (myVideo) והסוג הוא video/mp4.app.js עם Express, ייבוא fs והגשה סטטית של קובץ ה-HTML. מוסיפים תיקיית assets/videos ומניחים בה את קובץ ה-mp4.server.get('/myVideo', ...) קוראים ל-fs.stat על הקובץ. אם התקבלה שגיאה מחזירים סטטוס 500, כי זו שגיאת שרת. אם לא, גודל הסרטון הוא stat.size.Content-Type בערך video/mp4, Content-Length לפי הגודל, Content-Range בפורמט bytes 0-(גודל פחות 1)/גודל, ו-Accept-Ranges בערך bytes. הסטטוס הוא 206, שפירושו תוכן חלקי.fs.createReadStream עם נתיב הסרטון ואובייקט הגדרות עם start: 0 ו-end לפי האורך. כשהסטרים נפתח (אירוע open) מבצעים pipe אל ה-response.node app מציגה את שני הסרטונים, ומתברר ששגיאה קטנה בשם המשתנה (let במקום len) גרמה לכשל עד שתוקנה.פרקי ההרצאה: סטרימינג של סרט מאתר ב-NodeJS
תמלול ההרצאה: סטרימינג של סרט מאתר ב-NodeJS
הטקסט המלא של הדקות הראשונות בהרצאה «סטרימינג של סרט מאתר ב-NodeJS» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הדבר הבא שאנחנו רוצים לראות זה איך אנחנו יכולים לבצע סטרימינג של וידאו ללקוח. יכול להיות שיש לכם איזשהו סרטון מסוים שאתם רוצים לשים אצלכם באתר ושהלקוח יראה אותו. אז שיטה ראשונה היא פשוט לבצע סטרימינג ישירות מיוטיוב לדוגמה או מאתרים אחרים שהם אתרי וידאו.
זה לא באמת קשור ל-Node.js כי הסרטון עצמו יושב בשרתים של יוטיוב, בואו נניח, וכל מה שאתם רוצים לעשות זה רק להציג ליוזר באתר שלכם את הסרטון עצמו. אני אולי אראה את זה רק בכדי שתראו שיש איזושהי דרך לבצע את זה.
בואו ניקח כאן איזשהו אינדקס html, נבנה לנו איזה html, נציג וידאו, והכי פשוט לעשות את זה אם אני רוצה להציג סרטון של יוטיוב, זה נניח להיכנס ליוטיוב, לבצע איזשהו חיפוש של איזשהו סרטון Cute Kittens והנה יש לנו איזה שהוא סרטון נחמד אנחנו נכנסים אליו ושנייה
יעצור אותו ואנחנו יכולים ללכת ל-share ואז לראות את הסמל הזה של html embed ואנחנו רואים שיש לנו כאן תגית iframe של html בואו נעשה לה copy אנחנו רואים פה לינק קופי טוק ליבורד כל מה שאנחנו צריכים לעשות זה לחזור ופשוט פייסט להדביק אותה ואם אנחנו כרגע נריץ את הדף הזה, בואו רגע נריץ אותו עם,
ננסה להריץ אותו עם איזה Live Server, אפילו בלי קשר ל-Node.js, אז הנה אנחנו רואים את הסרטון אצלנו באתר ואנחנו יכולים לנגן אותו. אין פה שום נגיעה ל-Node.js שלנו, זה ממש הכנסת איי פריים שפשוט מציגה ישירות את הסרטון מיוטיוב.
אז זה בסדר גמור לבצע, אבל מה קורה אם אתם לא רוצים תלות ביוטיוב, או אתם רוצים מאיזושהי סיבה סרטון שהוא שלכם והוא לא נמצא ביוטיוב, ואתם רוצים להריץ אותו מהאתר שלכם?
אז את זה אנחנו רוצים לראות איך ניתן לבצע. בואו רגע נעשה פה איזה קו הפרדה כזה. ולצורך כך, מה שאנחנו צריכים לשים זה תגית וידאו. בואו נגדיר לה Controls בכדי שיהיה לה את הפקדים של סטארט וסטופ וכדומה.
ואנחנו רוצים תגית Source שיש לה src ופה נמצא הראוט שאנחנו רוצים לגלוש אליו. אוקיי, בואו נגדירה לראוט הזה וידאו סטרימי או בגלל שזה וידאו ספציפי, או נקרא לו מיי וידאו.
אנחנו צריכים להגדיר לו מה הסוג של הוידאו, וזה כמובן תלוי בסוג הוידאו שאנחנו רוצים להציג. יש כל מיני סוגי וידאו, סוגי פורמטים, סיומות של קבצים.
הוידאו שאנחנו הולכים להציג הוא mp4, זה הוידאו שהכנתי מקודם. אז התגית הזאת זאת לא תגית של יוטיוב וזה לא איי פריים, זאת תגית שאומרת לכם, אני גולשת לאתר שלכם, לראוט הזה, אתם צריכים להזרים לי איזשהו סטרימינג של וידאו אליי.
כמובן שיש יתרונות בזה ויש יתרונות בזה. היתרונות של שימוש ביוטיוב זה שאנחנו בעצם משחררים את הרוחב פאס של האתר שלנו. אנחנו לא מעיקים עם רוחב פאס ותעבורה גדולה לאתר שלנו.
והיתרונות של שימוש בוידאו שלנו זה שאנחנו לא תלויים במקור חיצוני. אולי הוידאו לא גדול, אולי אנחנו בעצם רוצים להציג אותו כן עם הוידאו, היא תגיד וידאו של html 5, זאת תגיד וידאו של html 5.
אז בואו נראה מה אנחנו צריכים לעשות בצד של השרת בכדי להצליח להציג את זה. בצד של השרת אנחנו צריכים ראוט כזה. אז הכנתי מקודם תוכנית קטנה שיש בה כבר את אקספרס, כלומר קובץ app.js שיש לו כבר את אקספרס, ובנינו פה את הסרבר, ויש לנו כאן את ה-listen.
אנחנו רוצים עכשיו גם, בואו נעשה את זה פה, את File System. אנחנו רוצים גם להנגיש את קובץ ה-HTML שלנו, סרבר, לא סרבר, סליחה, express.static ולתת לו את ה-Dear Name, ששם יושב קובץ ה-HTML.
ומכאן, מה שאנחנו רוצים לעשות זה לבנות את ה-Route עצמו. אז יש לנו server.get, ה-Route קראנו לו מיי וידאו, אם יש גלישה על הראוט הזה אז אנחנו רוצים request response ופה מתחיל קוד שהוא לא הכי פשוט בעולם בכדי לבצע סטרימינג.
מה שמיוחד בסטרימינג זה שלמרות שהיוזר לא באמת סיים להוריד אליו את כל הקובץ הוא עדיין יכול לראות אותו בדיוק כמו בסרטון של יוטיוב, לפעמים אתם רואים שעדיין כל הסרטון לא ירד, אבל אתם כן יכולים להתחיל לראות את הסרטון.
בניגוד למצב של בוא תוריד לי קובץ לגמרי, ורק אז אני יכול לצפות בו או לפתוח אותו. אז סטרימינג מתבצע בצורה הבאה. אנחנו הולכים לפייל סיסטם וקוראים לפונקציה שנקראת סטאט.
קיצור של סטטיסטיקס. ואנחנו רוצים כאילו סטטיסטיקות על הוידאו שלנו, אבל אני רואה שבכלל אין לי וידאו. אז בואו שנייה נעצור, נבנה ה-sets, תיקייה, בתוכה נבנה videos ואליה אני רוצה לגרור את קובץ ה-video שהכנתי.
יש לנו פה את ה-video הזה, בואו נגרור אותו לתיקיית ה-videos, נסגור את הכרטיסייה שלו ועכשיו אנחנו כאילו מחפשים סטטיסטיקות על ה-video הזה, רוצים לקרוא את הסטטיסטיקות על ה-video הזה.