抽搐视频

编程问答 2022-08-15

问题描述

我想创建一个动荡的网站，其中包含抽搐和YouTube视频的集合。我尝试使用video_player插件，但为此我可以使用youtube_player插件，也必须使用API​​将所有链接转换为它们的源文件。但是我在制作一些嵌入抽搐视频的过程中遇到了麻烦。没事与youtube相同的页面将是完美的，但是，单独的抽搐播放器也将是不错的选择。也许Twitch API可以提供帮助，但是我不知道如何使用它，也无法理解它。 这是我发现可以使用的插件\

1> Video_Player
2> Youtube_Player_plugin
请帮助

编辑
这是我用来使用ext_video_player制作youtube视频的代码，因为它可以在网络上运行。

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,),)
    );
  }
}

编辑
我想出了一种使用iFrame制作视频的新方法。使用这个我可以添加抽搐流，但是我只想要视频，而不是聊天和其他东西。怎么做？这是我现在正在使用的coe 

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,child: HtmlElementView(
            key:UniqueKey(),viewType:'i'+Video
        ),) ;
  }
}

解决方法

更新

向Twitch API发出HTTP请求非常容易。您必须在Twitch开发人员控制台上注册您的应用程序。这将授予您访问client id和client secret的权限。请参阅documentation，以获取详细指南。

使用这两个，您可以发出一个生成app access token的请求。获得视频ID 只是在碰到另一个端点。根据{{​​3}}

，它需要一个游戏ID和/或用户ID。

URL

获取documentation

必需的查询参数

每个请求必须指定一个或多个视频ID，一个user_id或一个 game_id。

在下面的示例中，我使用自己的客户端ID 和秘密生成了应用访问令牌。从另一个端点获取了游戏ID ，最后从游戏ID中检索了视频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,'Authorization': 'Bearer $token','Client-id': twitchClientID,'/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,'Authorization': 'Bearer 4aq6y8pqjyw7cc9x4o8el7zha1ua8u',};
    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开发人员帐户https://api.twitch.tv/helix/videos。

注意： 关于您的问题，您不必具有有效的开发人员帐户。尽管如果您想使用上述其他服务，则需要一种身份验证形式，因此需要一个Twitch开发人员帐户。

先决条件

  1. 最好是here的WebView软件包。
  2. Twitch频道名称或视频ID。可以使用Twitch API对其进行硬编码或动态获取。获得它的空闲方法应该是后者。为了这个答案，我在下面有一个随机视频ID。
  3. 与ssl证书捆绑在一起的已部署网站（可选）。

请要点3 。通常，大多数开发人员只是将html内容直接本地保存在html文件中，甚至直接将其写到dart文件中。

根据Flutter Inappwebview，这将不起作用。嵌入式Twitch播放器只能在本地主机和/或带有ssl证书的网站上工作。一些托管服务会自动将所有已部署的网站与ssl证书捆绑在一起。我非常确定Firebase Hosting可以做到这一点。 您可以跳过此部分，因为支持本地测试。

其他注意事项

本地发展

使用“ localhost”或“ 127.0.0.1/8”范围内的任何IP地址作为 父值以在本地开发中使用HTTP或HTTPS。任何 可以使用端口，尽管不需要在任何地方指定 （80、3000、8100等）在其他IP范围内进行本地开发（例如 192.1.1.1）必须遵守HTTPS要求，尽管不需要有效的证书

现在进入代码库。

  • 创建一个index.html文件，其中应包含Iframe官方播放器。

     <!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>

要重点关注的是脚本块。它包含Interactive iframe播放器。它还接受可以自定义的 options 对象。可以找到更多的参数this thread。您只需将该代码段移至编辑器中，然后在实时服务器上将其打开即可确保其正常工作。

  • 飞镖面。

基本上，我们使用某种WebView来打开部署的网站，该网站包含在第1点中提到的html内容。我们还必须对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文件的真实域名代替。
  • here将会更深入。
  • 某些链接可能会随着时间的流逝而中断。

缺点

  • 该解决方案会将流量吸引到您自己的托管网站。
  • 这可能相对较慢，具体取决于您如何优化已部署的网站。

上升空间

  • 这是Twitch支持移动嵌入的唯一方法，因为它们没有本地sdk。
,

我们尝试在 flutter web 平台上播放视频，但只有这个东西对我有用。要使用文档中的嵌入式脚本和 HTML：

所以添加这个库或任何其他可能与 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) {});

在这种情况下，您仍然可以使用一些变量，例如高度和宽度

flutter-video-playertwitchtwitch-api

相关问答

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起...
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct...