blog

Video streaming autentifikatsiya tuzilmasini loyihalash

NEXTREE.

19 5월 2026 • 5 min read

- ReactPlayer asosidagi video qo'llanma xizmati yaratish tajribasi-

1. Loyihaning ta'rifi

Ushbu misol mavjud PDF asosidagi foydalanuvchi qo'llanmasi tizimini video kontent asosidagi xizmatga o'tkazish uchun amalga oshirilgan loyiha hisoblanadi. Mavjud tizimda foydalanuvchi qo'llanma tugmasini bosganda Frontend to'g'ridan-to'g'ri AWS S3 ga kirishib, PDF faylini yuklab olish tuzilmasidan foydalanardi. Ushbu usulni amalga oshirish oddiy bo'lsa-da, foydalanuvchilarga haqiqiy ish ekranini va qo'llanmani bir vaqtda ko'rish qiyinligi va murakkab jarayonlarni intuitiv ravishda etkazish imkoniyatini taqdim etish imkoniyatlari cheklangan edi.

Mijoz foydalanuvchilarga ish ekranini saqlagan holda qo'llanma videolarini birga ko'rish imkoniyatini berish uchun PIP (Rasmda Rasm) funksiyasini talab qildi. Bir vaqtning o'zida xavfsizlik siyosati jihatidan AWS S3 ga to'g'ridan-to'g'ri kirishni cheklash zarurati tug'ildi va URL parametrlarida sezgir autentifikatsiya ma'lumotlarini o'z ichiga olish mumkin emasligi cheklovlari mavjud edi. Shuning uchun, ushbu loyiha asosiy vazifasi oddiy video ijro etish funksiyasini amalga oshirish emas, balki brauzer asosidagi video ijro tuzilmasi va xavfsizlik talablarini birgalikda qondirishga qaratilgan autentifikatsiya va streaming tuzilmasini loyihalash edi.

2. Texnologiyani tanlash va loyihalash yo'nalishi

Frontend sohasida React asosida video o'ynatuvchi kutubxona bo'lgan ReactPlayer joriy qilindi. ReactPlayer HTML5 video tegiga asoslangan holda ishlaydi va React muhitiga mosligi yuqori, PIP funksiyasi va ijro holatini boshqarish nisbatan osonlik bilan bajariladi.

Biroq, ReactPlayer ichki jihatdan video tagining so'rov usulini ishlatadi, shuning uchun video faylini so'rash asosan GET usuli bilan amalga oshiriladi. Oddiy API chaqiruvi kabi so'rov tanasida autentifikatsiya ma'lumotlarini joylashtirish yoki erkin tarzda sarlavhalarni tuzish qiyin, shuning uchun autentifikatsiya jarayoni va haqiqiy video o'ynatish so'rovini ajratish dizayni zarur edi.

Namuna kod 1. ReactPlayer qo'ng'iroq misoli

url={videoEndpoint}
boshqaruvlar
pip
oynayotgan={false}
width="100%"
height="100%"
/>

Ushbu misol ReactPlayer-ning serverdan olgan video ijro etish uchun mo'ljallangan endpoint asosida video ijro etish tuzilishini ifodalaydi. Akkreditiv ma'lumotlar URLga kiritilmaydi va oldin tasdiqlash bosqichida berilgan vaqtinchalik token Cookie orqali uzatiladi.

3. Arxitektura qayta loyihalash

Avvalgi tuzilma Frontend AWS S3 ga to'g'ridan-to'g'ri kirish usuli edi. Biroq, video kontent taqdim etishda bir xil tuzilmani saqlab qolsa, saqlash yo'li ochilishi, URLlarni qayta ishlatish, kirish nazoratini chetlab o'tish ehtimolliklari paydo bo'lishi mumkin edi. Shuning uchun quyidagicha server rollari ajratildi.

Frontend
-> Server A (foydalanuvchilarni tasdiqlash va oqim so'rovlarini o'tkazish)
-> Server B (faylni ko'rish uchun mo'ljallangan server)
-> AWS S3

Server A foydalanuvchi autentifikatsiyasi, ruxsatni tasdiqlash, vaqtinchalik token berish va oqim so'rovlarini o'rnatish uchun javobgardir. Server B esa haqiqiy video fayllarini ko'rish va AWS S3 ga kirishni ta'minlash uchun ajratilgan. Bu orqali mijozning saqlash yo'lini bevosita bilishini to'sib, barcha videoga oid so'rovlarning serverning autentifikatsiya tasdiqlashidan o'tishini ta'minladik.

4. Autentifikatsiya va ijro oqimi

Foydalanuvchi qo‘llanma tugmasini bosganda, video pleerni darhol chaqirmasdan avval Server A ga foydalanuvchini tekshirish API ga so‘rov yuboradi. Tekshirish tugallangach, Server A video o‘ynatish uchun endpoint va amal qilish muddati cheklangan vaqtinchalik tokenni chiqaradi. Vaqtinchalik token brauzer Cookie’sida saqlanadi va keyinchalik ReactPlayer video endpointni chaqirganda birga uzatiladi.

Namuna kod 2. Video o‘ynatish ma’lumotlarini so‘rash

const openManualVideo = async (manualId: string) => {
const response = await api.get(`/api/videos/${manualId}/authorize`);
setVideoEndpoint(response.data.videoEndpoint);
setManualModalOpen(true);
};

Ushbu kod qoʻllanma tugmasi bosilganda video reproduktsiyasi endpointini birinchi soʻrov qilish misolidir. Ushbu bosqichda server foydalanuvchi huquqlarini tasdiqlaydi va vaqtincha tokenni cookie'ga saqlashni javob beradi.

Namuna kodi 3. Vaqtinchalik token Cookie berish misoli

ResponseCookie cookie = ResponseCookie.from("VIDEO_ACCESS_TOKEN", token)
.httpOnly(true)
.secure(true)
.yo'l("/api/videos/")
.maksimalYoshi(Davomiy.ofDaqiqa(30))
.sameSite("Strict")
.build();

ResponseEntity.ok()ni qaytarish
.header(HttpHeaders.SET_COOKIE, cookie.toString())
.body(new VideoAuthorizeResponse(videoEndpoint));

Cookie'lar HttpOnly, Secure, SameSite opsiyalari bilan belgilangan bo'lib, skriptga kirishga va keraksiz tashqi uzatilishga cheklov qo'yilgan. Shuningdek, path va maxAge belgilangan bo'lib, faqat video so'rovlariga cheklangan tarzda foydalanish uchun mo'ljallangan.

5. Streaming uzatish jarayoni

Video uzatish oddiy faylni yuklab olishdan farqli o'laroq, katta hajmdagi ma'lumotlarni uzluksiz yetkazib beradi va foydalanuvchi ijro joyini o'zgartirganda Range Header asosidagi qism so'rovi yuzaga kelishi mumkin. Shuning uchun Server A mijozning Range Header'ini Server B'ga uzatishi va Server B'ning javob holati va asosiy sarlavhalarini qayta mijozga uzatishi kerak.

Namuna kod 4. Range Header asosida striming o‘tkazish

@GetMapping("/api/videos/{manualId}/stream")
jamoa Mono >> oqim(
@PathVariable String manualId,
@RequestHeader(value = HttpHeaders.RANGE, required = false) String range
) {
webClient.get() qaytaradi
.uri("/internal/files/{manualId}", manualId)
.headers(headers -> {
agar (diapazon != null) sarlavhalar.set(HttpHeaders.RANGE, diapazon);
})
.exchangeToMono(response -> {
Flux body = response.bodyToFlux(DataBuffer.class);
ResponseEntity.BodyBuilder builder = ResponseEntity.status(response.statusCode());
response.headers().asHttpHeaders().forEach((name, values) -> {
if (isStreamingHeader(name)) builder.header(name, values.toArray(String[]::new));
});
Mono.just(builder.body(body)). qaytaradi;
});
}

Bu usulning asosi shundaki, bodyToMono(Resource.class) yoki bodyToMono(byte[].class) kabi butun faylni xotiraga yuklamaydi. bodyToFlux(DataBuffer.class) dan foydalangan holda, video ma'lumotlarini chunk (bo'lak) shaklida uzatish mumkin, bu esa yirik video qayta ishlash uchun mos keladi.

Namuna kodi 5. Asosiy oqim sarlavha filtrlash

private boolean isStreamingHeader(String name) {
return HttpHeaders.CONTENT_TYPE.equalsIgnoreCase(name)
|| HttpHeaders.CONTENT_LENGTH.equalsIgnoreCase(name)
|| HttpHeaders.CONTENT_RANGE.equalsIgnoreCase(name)
|| HttpHeaders.ACCEPT_RANGES.equalsIgnoreCase(ism)
|| HttpHeaders.CACHE_CONTROL.equalsIgnoreCase(ism);
}

Content-Range, Accept-Ranges, Content-Length kabi sarlavhalar brauzerga videoning uzunligini va qism javob oralig'ini aniqlash uchun zarur. Ayniqsa, navigatsiya funksiyasi va ishonchli ijro uchun ushbu sarlavhalarni saqlab qolish muhimdir.

6. Natija va ta'sir

Ishlab chiqish natijalariga ko'ra, foydalanuvchilar brauzerda darhol videoni joylashtirish imkoniga ega bo'lishdi va PIP funksiyasi orqali haqiqiy ish ekrani va video qo'llanmasini bir vaqtning o'zida ishlatish imkoniyatiga ega bo'lishdi. Shuningdek, AWS S3 ga to'g'ridan-to'g'ri kirishni olib tashlab, server asosidagi kirish nazoratini qo'llash orqali xavfsizlik talablariga javob bera oldik.

• AWS S3 to'g'ridan-to'g'ri ko'rsatishni olib tashlash

• URL asosida sezgir ma'lumotlarni uzatishni olib tashlash

• Foydalanuvchi tekshirilgandan so'ng video endpointga kirishga ruxsat berish

• Vaqtinchalik token asosida cheklangan kirish nazorati

• Range Header asosida video o'ynatish va navigatsiya yordam beradi

7. Xulosa

Ushbu misolda shunchaki video pleerni qo'shish emas, balki ReactPlayer va HTML5 video tegining ish tartibini, mijoz kompaniyasining xavfsizlik siyosatini, serverlar o'rtasida rollarni ajratishni, va streamingni qayta ishlash usulini umumiy ravishda hisobga olgan holda loyihalash misolini boshdan kechirdik. Taqiqlash va qayta ijro etish jarayonlarini ajratish va Server A bilan Server B ning mas'uliyatlarini aniq belgilash orqali foydalanuvchi tajribasi va xavfsizlikni bir vaqtning o'zida ta'minlashga erishdik.

Xususan, amaliy muhitda funksional ishlanmalar o'z-o'zidan xavfsizlik siyosati va brauzer ish tarzidagi cheklovlarni tushunish muhimligini his qildim. Ushbu loyiha orqali video asosidagi qo'llanmalar xizmatida ham qonuniylik tuzilishi, ma'lumot oqimi, streaming sarlavhalarini qayta ishlash va operatsion xavfsizlik siyosatini hisobga olish barqaror xizmat ko'rsatishni ta'minlash uchun zarur ekanini tasdiqlash imkonini berdi.