Bạn không còn cần cài phần mềm để quay một video hướng dẫn ngắn, một báo lỗi hay một đoạn hướng dẫn gửi đồng nghiệp. Trình duyệt trên máy tính có thể ghi lại một tab, một cửa sổ hoặc cả màn hình thành tệp video, nhờ hai API chuẩn: getDisplayMedia, mở hộp thoại "chọn nội dung chia sẻ" của chính trình duyệt, và MediaRecorder, mã hóa kết quả thành video. Công cụ quay màn hình chỉ là một lớp mỏng bên trên hai API đó. Bài này giải thích từng lựa chọn thực sự ghi lại gì, vì sao âm thanh là phần hay bị thiếu nhất, và cách đoán trước dung lượng tệp.
Trình duyệt quyết định, không phải trang web
Trang web không thể tự chụp màn hình của bạn. Nó chỉ có thể xin; trình duyệt hiện hộp thoại và bạn quyết định chia sẻ gì. Từ đó có hai quy tắc, đều được nêu trong tài liệu getDisplayMedia của MDN:
- Yêu cầu phải đến ngay sau một cú bấm chuột hoặc phím (MDN gọi là "transient user activation"). Vì thế công cụ quay không thể tự bắt đầu khi trang vừa tải.
- Chỉ hoạt động trên trang an toàn (https, hoặc localhost khi phát triển).
Hộp thoại có ba loại nội dung. Bạn chọn loại nào sẽ quyết định video chứa gì:
| Bạn chia sẻ | Được ghi lại | Cần để ý |
|---|---|---|
| Một tab trình duyệt | Trang trong tab đó, kể cả khi bạn chuyển sang tab khác | Không có gì ngoài tab: không ứng dụng khác, không menu trình duyệt |
| Một cửa sổ | Cửa sổ ứng dụng đó | Menu, hộp thoại mở thành cửa sổ riêng có thể bị thiếu |
| Toàn màn hình | Mọi thứ trên màn hình đó, cả con trỏ chuột | Thông báo, cửa sổ chat bật lên, mật khẩu bạn gõ ở nơi khác |
Với video hướng dẫn về một trang web, tab thường là lựa chọn tốt nhất: nó bỏ qua mọi thứ khác trên màn hình, và trên trình duyệt Chromium có thể kèm tiếng của tab. Chỉ chọn toàn màn hình khi cần chuyển qua lại nhiều ứng dụng, và hãy bật chế độ không làm phiền trước, vì mọi thông báo trượt vào đều bị quay lại.
Công cụ yêu cầu trình duyệt ẩn chính tab của nó khỏi danh sách. Quay chính trình quay tạo ra hình ảnh "gương lồng gương" vô tận, và MDN có hẳn tùy chọn selfBrowserSurface vì lý do này.
Vì sao hay thiếu tiếng
Hình ảnh luôn được ghi. Âm thanh chỉ có trong một số trường hợp, và trình duyệt quyết định mà không báo:
- Tiếng của tab: Chrome và Edge có công tắc "Chia sẻ cả âm thanh của thẻ" khi bạn chọn một tab, trên Windows, macOS, Linux và ChromeOS.
- Tiếng cả màn hình (hệ thống): trình duyệt Chromium cho phép khi chia sẻ toàn màn hình trên Windows và ChromeOS. Trên macOS thì tùy phiên bản trình duyệt: theo báo cáo của các lập trình viên, các bản Chrome gần đây đã thêm tính năng này, nên hãy xem hộp thoại trên máy của bạn thay vì đoán.
- Firefox và Safari: theo thử nghiệm của các lập trình viên, luồng chia sẻ không có âm thanh, kể cả khi trang yêu cầu.
MDN nói rõ cài đặt systemAudio chỉ là gợi ý: luồng trả về có thể không có rãnh âm thanh dù trang đã xin âm thanh. Vì vậy trong lúc quay, công cụ cho bạn biết âm thanh tab hay hệ thống và micro có thực sự nằm trong bản quay hay không. Nếu không có tiếng chia sẻ, hãy thêm micro; công cụ trộn micro với tiếng chia sẻ (nếu có) thành một rãnh âm thanh duy nhất mà bản quay chứa được.
Ví dụ cụ thể: tệp sẽ nặng bao nhiêu?
Công cụ yêu cầu một mức bit rate mục tiêu cho hình và 128 kbit/s cho tiếng. Nội dung màn hình được mã hóa với bit rate thay đổi, nên mức mục tiêu đóng vai trò mức trần: một slide đứng yên tốn rất ít, còn cuộn trang hay phát video thì gần chạm trần. Mức trần cho bản quay 10 phút:
- Tiêu chuẩn (hình 2,5 Mbit/s + tiếng 128 kbit/s): 2.628.000 bit × 600 giây ÷ 8 = 197.100.000 byte, khoảng 197 MB.
- Tệp nhẹ (1 Mbit/s, không tiếng): 1.000.000 × 600 ÷ 8 = 75.000.000 byte, 75 MB.
- Chữ sắc nét (5 Mbit/s + tiếng): 5.128.000 × 600 ÷ 8 = 384.600.000 byte, khoảng 385 MB.
Một bài trình chiếu 10 phút ở mức tiêu chuẩn thường nhẹ hơn 197 MB rất nhiều, vì phần lớn khung hình giống khung trước. Chọn "chữ sắc nét" khi người xem phải đọc mã nguồn nhỏ hay ô bảng tính; với video thuyết minh qua slide, "tệp nhẹ" là đủ.
Cả bản quay nằm trong bộ nhớ trình duyệt cho tới khi bạn tải về, nên công cụ tự dừng sau 60 phút. Buổi dài hơn thì hãy quay thành nhiều phần.
Định dạng bạn nhận được
Chrome, Edge và Firefox tạo WebM (hình VP9 hoặc VP8, tiếng Opus); Safari tạo MP4 với H.264. Tên tệp khớp với định dạng. Mọi trình duyệt hiện nay và VLC đều phát được WebM. Nếu phần mềm dựng video không nhận, hãy chuyển đổi trong phần mềm đó hoặc bằng công cụ chuyển đổi trên máy.
Trên điện thoại và máy tính bảng
Theo dữ liệu tương thích trên caniuse.com, getDisplayMedia không có trên Chrome cho Android, Firefox cho Android hay Safari trên iOS. Không trang web nào quay được màn hình điện thoại. Hãy dùng tính năng có sẵn của hệ điều hành: ô Quay màn hình trong cài đặt nhanh của Android, hoặc Ghi màn hình trong Trung tâm điều khiển của iPhone, iPad. Công cụ sẽ báo rõ điều này thay vì im lặng thất bại khi nhận ra bạn dùng điện thoại.
Những lỗi thường gặp
- Chia sẻ toàn màn hình cho một bản demo chỉ cần một tab. Thông báo, các tab khác và tài liệu riêng tư lọt vào video.
- Tưởng là có tiếng. Hãy xem dòng "âm thanh tab hoặc hệ thống" trong bảng ở mấy giây đầu, hoặc quay thử năm giây rồi xem lại.
- Video đen trên máy Mac. macOS phải cho phép trình duyệt ghi màn hình (Quyền riêng tư và bảo mật, Ghi màn hình và âm thanh hệ thống), sau đó khởi động lại trình duyệt.
- Quên thanh "Dừng chia sẻ" của trình duyệt. Bấm vào đó cũng kết thúc bản quay; công cụ hoàn tất tệp chứ không làm mất, nhưng lần quay dừng ở đó.
- Đóng tab trước khi tải về. Video chỉ tồn tại trong bộ nhớ của trang.
- Để loa ngoài khi thuyết minh. Nếu tiếng tab phát ra loa trong lúc micro đang bật, nó bị ghi hai lần. Hãy dùng tai nghe.
Dọn dẹp trước khi chia sẻ
Một bản quay màn hình thường lộ nhiều hơn bạn định. Hãy chụp lại khung hình có thông tin nhạy cảm và làm mờ bằng công cụ làm mờ ảnh trước khi đăng ảnh, và nếu quạt laptop ồn, hãy ghi lời thuyết minh riêng bằng công cụ ghi âm. Gửi nhiều đoạn một lúc thì công cụ ZIP gom chúng thành một tệp.