Видео Twitch в трепете

Question

Видео Twitch в трепете

Я хочу создать веб-сайт флаттера, на котором есть коллекция видеороликов с Twitch и YouTube. Я пробовал использовать плагин video_player, но для этого я могу либо использовать плагин youtube_player, либо мне нужно использовать API для преобразования всех ссылок на их исходные файлы. Но у меня возникли проблемы с созданием чего-либо для встраивания видео с Twitch. Что-нибудь. Та же страница с youtube была бы идеальной, но также подойдет отдельный проигрыватель Twitch. Может быть, Twitch API может помочь, но я понятия не имею, как его использовать, и не могу этого понять. Вот найденные мной плагины, которые можно использовать \

1> Video_Player
2> Youtube_Player_plugin
Пожалуйста, помогите

ИЗМЕНИТЬ
Это код, который я использую для создания видеороликов на YouTube с ext_video_player, потому что он работает в Интернете.

class videoBox extends StatefulWidget {
  String Video;
  videoBox(this.Video);
  @override
  _videoBoxState createState() => _videoBoxState(Video);
}

class _videoBoxState extends State<videoBox> {
  String Video;
  bool error = false;
  _videoBoxState(this.Video);
  VideoPlayerController _controller;
  @override
  void dispose(){
    super.dispose();
    _controller.dispose();
  }
  @override
  void initState(){
    super.initState();
      _controller = VideoPlayerController.network(
        Video,
      );

      _controller.initialize().then((value) {
        setState(() {
          print("Initialized");
        });
      });
      _controller.addListener(() {
        if (_controller.value.hasError) {
          print(_controller.value.errorDescription);
          setState(() {
            error = true;
            print(Video);
          });
        }
    });
        }
  @override
  Widget build(BuildContext context) {
    return error?Container(
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(15))
      ),
      child: Image(fit:BoxFit.cover,image:NetworkImage("https://hiapseng-thailand.com/wp-content/themes/skywalker/facilities/video-placeholder.jpg"))
    ):GestureDetector(
      onTap:(){
        _controller.value.isPlaying?
        _controller.pause()
            :_controller.play();
      },
      child: Container(
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(15))
        ),
        child:  VideoPlayer(_controller,),
    )
    );
  }
}

РЕДАКТИРОВАТЬ
Я придумал новый способ создания видео с помощью iFrames. Используя это, я могу добавить потоки twitch, но мне просто нужно видео, а не все это с чатом и прочим. Как это сделать? Вот коэффициент, который я использую сейчас

class videoBox extends StatefulWidget {
  String Video;
  videoBox(this.Video);
  @override
  _videoBoxState createState() => _videoBoxState(Video);
}

class _videoBoxState extends State<videoBox> {
  String Video;
  IFrameElement iFrame = IFrameElement();
  _videoBoxState(this.Video);

  @override
  Widget build(BuildContext context) {
    iFrame.width = (MediaQuery.of(context).size.width*0.32).toString();
    iFrame.height = (MediaQuery.of(context).size.width*0.27).toString();
    iFrame.src = "https://www.youtube.com/embed/"+Video;
    iFrame.allowFullscreen =true;
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      'i'+Video,
          (int viewId) =>iFrame,
    );
    return Container(
        height:MediaQuery.of(context).size.height *0.27,
        width:MediaQuery.of(context).size.width *0.32,
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(15))
        ),
        child: HtmlElementView(
            key:UniqueKey(),
            viewType:'i'+Video
        ),
    ) ;
  }
}

2

flutter youtube twitch flutter-video-player twitch-api

Источник

user13858991 24 авг '20 в 09:29

2 ответа

Другие вопросы по тегам flutter youtube twitch flutter-video-player twitch-api

user10304564 16 дек '20 в 17:28 2020-12-16 17:28 · Answer 1 · 2020-12-16 17:28

Обновлять

Выполнение HTTP-запросов к Twitch API довольно просто. Вы должны зарегистрировать свое приложение на консоли Twitch dev. Это предоставит вам доступ как к client id и client secret. Обратитесь к документации за подробным руководством.

С этими двумя вы можете сделать запрос, который генерирует app access token. Получение идентификатора видео просто попадает в другую конечную точку. Требуется идентификатор игры и / или идентификатор пользователя в соответствии с документацией.

URL

ПОЛУЧИТЬ https://api.twitch.tv/helix/videos

Обязательные параметры запроса

Каждый запрос должен указывать один или несколько идентификаторов видео, один user_id или один game_id.

В приведенном ниже примере я сгенерировал токен доступа к приложению , используя свой собственный идентификатор клиента и секрет . Получил идентификатор игры с другой конечной точки и, наконец, получил идентификатор видео из идентификатора игры.

      class TwitchAPIService {
  // Making a singleton pattern ensures only one instance of a class is ever created

  TwitchAPIService._internal();

  static final TwitchAPIService _twitchAPIService = TwitchAPIService._internal();

  static TwitchAPIService get twitchAPIService => _twitchAPIService;

  String twitchClientID, twitchClientSecret; // This are to be gotten from the Twitch developer console

  Future<String> fetchAppAccessToken() async {
    final baseUrl = 'id.twitch.tv';
    Map<String, String> parameters = {
      'client_id': twitchClientID,
      'client_secret': twitchClientSecret,
      'grant_type': 'client_credentials',
    };

    Map<String, String> headers = {
      'Accept': 'application/json',
    };

    Uri uri = Uri.https(baseUrl, '/oauth2/token', parameters);

    var token;
    try {
      token = await http.post(uri, headers: headers);
      if (token.statusCode == 200) {
        // Make secure requests with the token.
        return token.body;
      }
      return json.decode(token.body)['message'];
    } catch (e) {
      return json.decode(token.body)['message'];
    }
  }

  // This gets the game Id of any given game under Twitch's game library
  Future<String> fetchGameId(String token) async {
    final baseUrl = 'api.twitch.tv';
    Map<String, String> parameters = {
      'name': 'fortnite',
    };
    Map<String, String> headers = {
      'Accept': 'application/json',
      'Authorization': 'Bearer $token',
      'Client-id': twitchClientID,
    };

    Uri uri = Uri.https(baseUrl, '/helix/games', parameters);

    try {
      var gameId = await http.get(uri, headers: headers);
      return gameId.body;
    } catch (e) {
      return e.toString();
    }
  }
  // This retrieves videoId(s) under a particular gameId
  Future<dynamic> fetchVideoId(String gameId) async {
    final baseUrl = 'api.twitch.tv';
    Map<String, String> parameters = {
      'game_id': gameId,
    };
    Map<String, String> headers = {
      'Accept': 'application/json',
      'Authorization': 'Bearer 4aq6y8pqjyw7cc9x4o8el7zha1ua8u',
      'Client-id': twitchClientID,
    };
    Uri uri = Uri.https(baseUrl, '/helix/videos', parameters);
    try {
      var videoId = await http.get(uri, headers: headers);
      return videoId.body;
    } catch (e) {
      return e.toString();
    }
  }
}

Взломанное решение

Twitch API предлагает различные услуги, такие как получение потоков, сведений о каналах и многое другое. Я отрежу право на охоту и предположу , что вы уже настроили учетную запись разработчика дергаться здесь.

Примечание. Что касается вашего вопроса, вам не обязательно иметь активную учетную запись разработчика. Хотя, если вы хотите использовать другие сервисы, подобные упомянутым выше, вам понадобится форма аутентификации, следовательно, учетная запись разработчика Twitch.

Предварительное условие

Пакет WebView предпочтительно Flutter Inappwebview .
Название канала Twitch или идентификатор видео. Это можно жестко запрограммировать или получить динамически с помощью Twitch API. Бесполезным способом его получения должно быть второе. Для этого ответа у меня есть случайный идентификатор видео ниже.
Развернутый веб-сайт с сертификатом ssl (необязательно).

Пожалуйста , пункт 3 настоятельно требуется. Обычно большинство разработчиков просто напрямую сохраняют HTML-контент локально в HTML-файл или даже напрямую записывают его в файлы dart.

Согласно этой ветке , это не сработает. Встроенный проигрыватель Twitch будет работать только через локальный хост и / или веб-сайт с сертификатом ssl. Некоторые службы хостинга автоматически связывают любой развернутый веб-сайт с сертификатом ssl. Я очень уверен, что Firebase Hosting делает это. Вы можете пропустить эту часть, поскольку поддерживается локальное тестирование.

Другие вещи, о которых следует помнить

Местное развитие

Используйте «localhost» или любой IP-адрес в диапазоне «127.0.0.1/8» в качестве родительского значения для использования HTTP или HTTPS в локальной разработке. Можно использовать любой порт, хотя его нигде указывать не нужно (80, 3000, 8100 и т. Д.). Локальная разработка для других диапазонов IP (например, 192.1.1.1) должна соответствовать требованиям HTTPS, хотя действующий сертификат не требуется.

Теперь о кодовой базе.

Создайте файл index.html, который будет содержать официальный iframe Player.

         <!DOCTYPE html>
 <html>

 <head>
     <style>
         html,
         body {
             margin: 0;
             padding: 0;
             background-color: #000000;
             overflow: hidden;
             position: fixed;
             height: 100%;
             width: 100%;
         }
     </style>
     <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
 </head>

 <body>
     <div id="player"></div>
     <script src="https://player.twitch.tv/js/embed/v1.js"></script>
     <div id="<player div ID>"></div>
     <script type="text/javascript">
         var options = {
             width: window.innerWidth,
             height: window.innerHeight,
             video: "335180634",
             // This should be used locally.
             // If deployed, i.e not local then the parent should be the url of your website.
             // For example if the full url of our deployed website is https://www.flutterproject.com then the parent would be
             // parent: ["flutterproject.com"]
             parent: ["localhost"]
         };
         var player = new Twitch.Player("<player div ID>", options);
         player.setVolume(0.5);
     </script>
 </body>

 </html>

Главное, на что следует обратить внимание, - это блок скрипта . Он содержит интерактивный проигрыватель iframe. Он также принимает optionsобъект, который можно настроить. Гораздо больше параметров можно найти здесь . Вы можете просто переместить этот фрагмент кода в редактор и открыть его на работающем сервере, чтобы убедиться, что он работает.

Сторона дротика.

По сути, мы используем своего рода WebView, чтобы открыть наш развернутый веб-сайт, содержащий HTML-контент, упомянутый в пункте 1 . Мы также должны задать ограничения для WebView, чтобы разместить его рядом с другими виджетами. Простого соотношения сторон 16:9 должно быть достаточно.

Включение allowsInlineMediaPlayback: trueубедится, что у видеоплееров правильное соотношение сторон. Установка значения false приведет к переходу видео в полноэкранный режим на IOS.

      main(List<String> args) {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          title: Text('Twtich Embed'),
        ),
        body: AspectRatio(
          aspectRatio: 16 / 9,
          child: InAppWebView(
            key: UniqueKey(),
            initialUrl: 'flutterproject.com',
            initialOptions: InAppWebViewGroupOptions(
              ios: IOSInAppWebViewOptions(allowsInlineMediaPlayback: true),
              crossPlatform: InAppWebViewOptions(
                mediaPlaybackRequiresUserGesture: false,
                transparentBackground: true,
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

Заметки

'flutterproject.com' следует заменить реальным доменным именем, которое ссылается на файл index.html выше.
https://discuss.dev.twitch.tv/t/how-will-twitch-embed-updates-affect-mobile-app-embeds/26008/18 будет более подробным.
Некоторые ссылки со временем могут сломаться.

Минусы

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

Плюсы

Это единственный способ, которым Twitch поддерживает встраивание мобильных устройств, поскольку у них нет собственного sdk.

user3795785 17 июн '21 в 09:38 2021-06-17 09:38 · Answer 2 · 2021-06-17 09:38

Мы пытаемся воспроизводить видео на веб-платформе flutter, но у меня работает только эта штука. Чтобы использовать встроенный скрипт и HTML из документов:

поэтому добавьте эту библиотеку или любую другую, которая может работать с : webviewx: ^0.1.0

а затем вставьте HTML sritp:

      WebViewX(
        initialContent:
            """<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
                  <div id="${345}"></div>
                  <script type="text/javascript">
                  var options = {
                      width: "${300}",
                      height: "${300}",
                      channel: "icebergdoto",
                      parent: ["your.app","your.ext"]
                    };
                    var player = new Twitch.Player("345", options);
                    player.setVolume(0.5);
                  </script>""",
        initialSourceType: SourceType.HTML,
        onWebViewCreated: (controller) {});

в этом случае вы все равно можете использовать некоторые переменные, такие как высота и ширина