Add web HTTP-FLV playback path
This commit is contained in:
@@ -1,20 +1,21 @@
|
||||
import 'dart:async';
|
||||
import 'package:flutter/foundation.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:video_player/video_player.dart';
|
||||
import '../providers/auth_provider.dart';
|
||||
import '../providers/settings_provider.dart';
|
||||
import '../services/chat_service.dart';
|
||||
import '../widgets/web_stream_player.dart';
|
||||
|
||||
class PlayerPage extends StatefulWidget {
|
||||
final String title;
|
||||
final String rtmpUrl;
|
||||
final String playbackUrl;
|
||||
final String roomId;
|
||||
|
||||
const PlayerPage({
|
||||
Key? key,
|
||||
required this.title,
|
||||
required this.rtmpUrl,
|
||||
required this.playbackUrl,
|
||||
required this.roomId,
|
||||
}) : super(key: key);
|
||||
|
||||
@@ -23,37 +24,45 @@ class PlayerPage extends StatefulWidget {
|
||||
}
|
||||
|
||||
class _PlayerPageState extends State<PlayerPage> {
|
||||
late VideoPlayerController _controller;
|
||||
VideoPlayerController? _controller;
|
||||
final ChatService _chatService = ChatService();
|
||||
final TextEditingController _msgController = TextEditingController();
|
||||
final List<ChatMessage> _messages = [];
|
||||
final List<Widget> _danmakus = [];
|
||||
|
||||
|
||||
bool _isError = false;
|
||||
String? _errorMessage;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_initializePlayer();
|
||||
if (!kIsWeb) {
|
||||
_initializePlayer();
|
||||
}
|
||||
_initializeChat();
|
||||
}
|
||||
|
||||
void _initializePlayer() async {
|
||||
_controller = VideoPlayerController.networkUrl(Uri.parse(widget.rtmpUrl));
|
||||
_controller = VideoPlayerController.networkUrl(
|
||||
Uri.parse(widget.playbackUrl),
|
||||
);
|
||||
try {
|
||||
await _controller.initialize();
|
||||
_controller.play();
|
||||
await _controller!.initialize();
|
||||
_controller!.play();
|
||||
if (mounted) setState(() {});
|
||||
} catch (e) {
|
||||
if (mounted) setState(() { _isError = true; _errorMessage = e.toString(); });
|
||||
if (mounted)
|
||||
setState(() {
|
||||
_isError = true;
|
||||
_errorMessage = e.toString();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
void _initializeChat() {
|
||||
final settings = context.read<SettingsProvider>();
|
||||
final auth = context.read<AuthProvider>();
|
||||
|
||||
|
||||
// 使用真实用户名建立连接
|
||||
final currentUsername = auth.username ?? "Guest_${widget.roomId}";
|
||||
_chatService.connect(settings.baseUrl, widget.roomId, currentUsername);
|
||||
@@ -72,8 +81,8 @@ class _PlayerPageState extends State<PlayerPage> {
|
||||
|
||||
void _addDanmaku(String text) {
|
||||
final key = UniqueKey();
|
||||
final top = 20.0 + (DateTime.now().millisecondsSinceEpoch % 6) * 30.0;
|
||||
|
||||
final top = 20.0 + (DateTime.now().millisecondsSinceEpoch % 6) * 30.0;
|
||||
|
||||
final danmaku = _DanmakuItem(
|
||||
key: key,
|
||||
text: text,
|
||||
@@ -89,14 +98,18 @@ class _PlayerPageState extends State<PlayerPage> {
|
||||
void _sendMsg() {
|
||||
if (_msgController.text.isNotEmpty) {
|
||||
final auth = context.read<AuthProvider>();
|
||||
_chatService.sendMessage(_msgController.text, auth.username ?? "Anonymous", widget.roomId);
|
||||
_chatService.sendMessage(
|
||||
_msgController.text,
|
||||
auth.username ?? "Anonymous",
|
||||
widget.roomId,
|
||||
);
|
||||
_msgController.clear();
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
_controller?.dispose();
|
||||
_chatService.dispose();
|
||||
_msgController.dispose();
|
||||
super.dispose();
|
||||
@@ -129,7 +142,9 @@ class _PlayerPageState extends State<PlayerPage> {
|
||||
Container(
|
||||
width: 350,
|
||||
decoration: BoxDecoration(
|
||||
border: Border(left: BorderSide(color: Theme.of(context).dividerColor)),
|
||||
border: Border(
|
||||
left: BorderSide(color: Theme.of(context).dividerColor),
|
||||
),
|
||||
),
|
||||
child: _buildChatSection(),
|
||||
),
|
||||
@@ -160,18 +175,21 @@ class _PlayerPageState extends State<PlayerPage> {
|
||||
children: [
|
||||
Center(
|
||||
child: _isError
|
||||
? Text("Error: $_errorMessage", style: TextStyle(color: Colors.white))
|
||||
: _controller.value.isInitialized
|
||||
? AspectRatio(
|
||||
aspectRatio: _controller.value.aspectRatio,
|
||||
child: VideoPlayer(_controller),
|
||||
)
|
||||
: CircularProgressIndicator(),
|
||||
? Text(
|
||||
"Error: $_errorMessage",
|
||||
style: TextStyle(color: Colors.white),
|
||||
)
|
||||
: kIsWeb
|
||||
? WebStreamPlayer(streamUrl: widget.playbackUrl)
|
||||
: _controller != null && _controller!.value.isInitialized
|
||||
? AspectRatio(
|
||||
aspectRatio: _controller!.value.aspectRatio,
|
||||
child: VideoPlayer(_controller!),
|
||||
)
|
||||
: CircularProgressIndicator(),
|
||||
),
|
||||
// 弹幕层使用 ClipRect 裁剪，防止飘出视频区域
|
||||
ClipRect(
|
||||
child: Stack(children: _danmakus),
|
||||
),
|
||||
ClipRect(child: Stack(children: _danmakus)),
|
||||
],
|
||||
);
|
||||
}
|
||||
@@ -202,11 +220,18 @@ class _PlayerPageState extends State<PlayerPage> {
|
||||
padding: const EdgeInsets.symmetric(vertical: 4.0),
|
||||
child: RichText(
|
||||
text: TextSpan(
|
||||
style: TextStyle(color: Theme.of(context).textTheme.bodyMedium?.color),
|
||||
style: TextStyle(
|
||||
color: Theme.of(context).textTheme.bodyMedium?.color,
|
||||
),
|
||||
children: [
|
||||
TextSpan(
|
||||
text: "${m.username}: ",
|
||||
style: TextStyle(fontWeight: FontWeight.bold, color: m.type == "system" ? Colors.blue : Theme.of(context).colorScheme.primary),
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: m.type == "system"
|
||||
? Colors.blue
|
||||
: Theme.of(context).colorScheme.primary,
|
||||
),
|
||||
),
|
||||
TextSpan(text: m.content),
|
||||
],
|
||||
@@ -226,13 +251,24 @@ class _PlayerPageState extends State<PlayerPage> {
|
||||
controller: _msgController,
|
||||
decoration: InputDecoration(
|
||||
hintText: "Send a message...",
|
||||
border: OutlineInputBorder(borderRadius: BorderRadius.circular(20)),
|
||||
contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
contentPadding: EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
vertical: 8,
|
||||
),
|
||||
),
|
||||
onSubmitted: (_) => _sendMsg(),
|
||||
),
|
||||
),
|
||||
IconButton(icon: Icon(Icons.send, color: Theme.of(context).colorScheme.primary), onPressed: _sendMsg),
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
Icons.send,
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
),
|
||||
onPressed: _sendMsg,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
@@ -246,24 +282,36 @@ class _DanmakuItem extends StatefulWidget {
|
||||
final double top;
|
||||
final VoidCallback onFinished;
|
||||
|
||||
const _DanmakuItem({Key? key, required this.text, required this.top, required this.onFinished}) : super(key: key);
|
||||
const _DanmakuItem({
|
||||
Key? key,
|
||||
required this.text,
|
||||
required this.top,
|
||||
required this.onFinished,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
__DanmakuItemState createState() => __DanmakuItemState();
|
||||
}
|
||||
|
||||
class __DanmakuItemState extends State<_DanmakuItem> with SingleTickerProviderStateMixin {
|
||||
class __DanmakuItemState extends State<_DanmakuItem>
|
||||
with SingleTickerProviderStateMixin {
|
||||
late AnimationController _animationController;
|
||||
late Animation<double> _animation;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_animationController = AnimationController(duration: const Duration(seconds: 10), vsync: this);
|
||||
|
||||
_animationController = AnimationController(
|
||||
duration: const Duration(seconds: 10),
|
||||
vsync: this,
|
||||
);
|
||||
|
||||
// 使用相对位置：从右向左
|
||||
_animation = Tween<double>(begin: 1.0, end: -0.5).animate(_animationController);
|
||||
|
||||
_animation = Tween<double>(
|
||||
begin: 1.0,
|
||||
end: -0.5,
|
||||
).animate(_animationController);
|
||||
|
||||
_animationController.forward().then((_) => widget.onFinished());
|
||||
}
|
||||
|
||||
@@ -288,7 +336,13 @@ class __DanmakuItemState extends State<_DanmakuItem> with SingleTickerProviderSt
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 18,
|
||||
shadows: [Shadow(blurRadius: 4, color: Colors.black, offset: Offset(1, 1))],
|
||||
shadows: [
|
||||
Shadow(
|
||||
blurRadius: 4,
|
||||
color: Colors.black,
|
||||
offset: Offset(1, 1),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user