Воспроизведение видео, зашифрованного HLS, с помощью react - PullRequest
Новая
       49

Воспроизведение видео, зашифрованного HLS, с помощью react

0 голосов
/ 11 июля 2020

Я новичок в концепции интеграции HLS player с React. Из исследований и онлайн-статей я понял, что это основная c реализация HLS в React. И они достаточно хорошо работают на базовом уровне c. У меня есть URL-адрес hls, который находится в дешифрованном виде и с ним связан токен. Мне нужно расшифровать этот URL-адрес и передать его для игры с модулем hls player.

Вот как выглядит мой образец URL:

https://learnmedia-inwe.streaming.media.azure.net/5bac2481-d872-3708-a4b3-25b8819e627a/sample-mp4-file.ism/manifest(format=m3u8-aapl,encryption=cbc).m3u8

Token связанный: 'Bearer eyJhbGciOiJ .......... pXVCJ9.ey .......'.

Я использовал пакет HLS. js для потоковой передачи видео, и это это то, что достигнуто на данный момент:

Player. js

import React,{Component} from 'react'
import './responsive.css'
import styled from 'styled-components'
import Hls from 'hls.js'

const PlayerWrapper = styled.div `
    position : relative
`
const PlayerInner = styled.div `
`

class Player extends Component{
    constructor(props){
        super(props);
        this._onTouchInsidePlayer = this._onTouchInsidePlayer.bind(this);
    }
    componentDidMount(){
        if (Hls.isSupported() && this.player) {
            const videoSrc = "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8";
            const video = this.player;

            video.addEventListener('contextmenu',(e) =>{
                e.preventDefault();
                return false;
            })

            const hls = new Hls();
            hls.loadSource(videoSrc);
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, function() {
            video.play();
            });
        }
    }
    _onTouchInsidePlayer(){
        if(this.player.paused){
            this.player.play();
        }else{
            this.player.pause();
        }
    }
    render(){

        const style = {
            width:640,
            height:360,
            background:'#000',
        }
        return(
            <PlayerWrapper>
                <PlayerInner>
                    <video controls={true} onClick={this._onTouchInsidePlayer} style={style} ref={(player) => this.player = player} autoPlay={true}/>
                </PlayerInner>
            </PlayerWrapper>
        )
    }
}

export default Player

App. js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import styled from 'styled-components'
import Player from './component/videoPlayer'

const AppWrapper = styled.div ``;
const LiveVideo = styled.div `
  max-width : 640px;
  max-height : 480px;
  margin : 0 auto;
`;

class App extends Component{
  render(){
    return(
      <AppWrapper className="app">
          <LiveVideo>
            <Player/>
          </LiveVideo>
      </AppWrapper>
    )
  }
}

export default App;

Эта настройка отлично работает для обычных URL-адресов, таких как один в коде выше, но не для зашифрованного, как у меня. Я не уверен в методах шифрования, чтобы добиться того же. Доступные ресурсы SO не очень помогли или не описали этот конкретный вариант использования.

Приветствуется любая помощь, чтобы заставить зашифрованный URL-адрес с токеном работать с HLS-плеером в реакции.

Заранее спасибо .

...