网络电视
简介
实现的功能就是在电脑上看电视,如下面两张图,可以看电视直播 ,并且有个侧边栏可以选台,还可以登陆客户端,再在网站上用手机登登陆就可以实现用手机遥控电脑看电视了。
因为服务器是队友搭的,现在是期末了,也不好再叫别人来搞,所以这里是没有遥控的截图,但我的代码有与服务器交互的部分。
涉及的难点:
1.侧边栏的实现
使用一个控件splitView来展开和收起.splitView内有一个border,通过监听鼠标进入与移出,改变splitView的状态,从而实现打开和关闭。
2.登陆框的实现
其实就是一个ContentDialog控件,嵌套了密码框,账号框,跟两个按钮。点击侧边栏的“登陆”的时候,让这个ContentDialog的visibility设为true就好了。
<!-- 登陆界面 -->
<ContentDialog x:Name="loginDialog">
<StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<TextBox x:Name="accountBox" Header="Account"/>
<PasswordBox x:Name="passwordBox" Header="Password"/>
<Grid HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button x:Name="loginButton" Grid.Column="0" Content="登陆" Click="clickToLogin"/>
<Button x:Name="cancel" Grid.Column="1" Content ="取消" Click="clickToCancelLogin"/>
</Grid>
</StackPanel>
</ContentDialog>
3.播放网络视频
这里用的是MediaPlayerElement 控件,可以播放HLS格式的播放源,使用方法见MSDN文档: MediaPlayerElement的自适应流式处理
https://docs.microsoft.com/zh-cn/windows/uwp/audio-video-camera/adaptive-streaming
<!-- 播放器 -->
<MediaPlayerElement x:Name="mediaPlayerElement" HorizontalAlignment="Stretch" AreTransportControlsEnabled="True" />
![这里写图片描述](https://img-blog.csdn.net/20170705221605098?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTG9IaWF1RnVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
4.播放源哪里来?
MediaPlayerElement只支持HLS流媒体协议,所以我们要找HLS协议的播放源。播放源全靠自己到网上搜索,而且有时效性,下面是我用的,不一定读者看的是后还能用。
public channelList()
{
cLists.Add(new TVchannel(0, "CCTV风云音乐", "http://222.191.24.6:6610/2/2/ch00000090990000001214/index.m3u8?ispcode=3"));
cLists.Add(new TVchannel(1, "CCTV西部旅游", "http://livertmp2-cnc.wasu.cn/zhibo/scgx_xbly/playlist.m3u8"));
// cLists.Add(new TVchannel(2, "CCTV大众生活", "http://livertmp2-cnc.wasu.cn/zhibo/scgx_dzsh/playlist.m3u8"));
cLists.Add(new TVchannel(2, "CCTV国防军事", "http://222.191.24.6:6610/2/2/ch00000090990000001205/playlist.m3u8?ispcode=3"));
cLists.Add(new TVchannel(3, "CCTV-1高清", "http://183.251.61.207/PLTV/88888888/224/3221225812/index.m3u8"));
cLists.Add(new TVchannel(4, "CCTV-7高清", "http://120.87.4.5/PLTV/88888894/224/3221225492/index.m3u8"));
cLists.Add(new TVchannel(5, "CCTV-12", "http://183.207.249.15/PLTV/2/224/3221226019/index.m3u8"));
cLists.Add(new TVchannel(6, "CCTV-14", "http://183.207.249.15/PLTV/2/224/3221226023/index.m3u8"));
cLists.Add(new TVchannel(7, "CCTV 5+", "http://222.191.24.7:6610/2/2/ch00000090990000001297/index.m3u8?ispcode=3"));
cLists.Add(new TVchannel(8, "香港31台", "http://rthklive1-lh.akamaihd.net/i/rthk31_1@167495/index_1296_av-p.m3u8"));
cLists.Add(new TVchannel(9, "香港32台", "http://rthklive2-lh.akamaihd.net/i/rthk32_1@168450/index_1296_av-b.m3u8"));
cLists.Add(new TVchannel(10, "香港卫视", "http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8"));
cLists.Add(new TVchannel(11, "凤凰中文", "http://119.167.138.7/live/zhongwen.m3u8"));
cLists.Add(new TVchannel(12, "凤凰资讯", "http://119.167.138.7/live/zixun.m3u8"));
}
5.怎样用手机遥控?
这就涉及到一个实时通信协议,webSocket,这个协议允许服务器向客户端发送协议,避免了客户端无限request造成的带宽浪费。
webSocket客户端写法可以参考官方文档
https://docs.microsoft.com/zh-cn/windows/uwp/networking/websockets
下面是登陆的代码,由”登陆”按钮的clicked事件来创建一个新线程来向服务器发送登陆消息。
private async System.Threading.Tasks.Task verifyUserAsync()
{
// 登陆
// target url
Uri serverUri = new Uri("ws://123.207.78.54:8001/");
string userName = accountBox.Text;
string password = passwordBox.Password;
// string userName = "r1VgfuVg-";
// string password = "123";
// login
try
{
//Connect to the server.
await webSock.ConnectAsync(serverUri);
//Send a message to the server.
await WebSock_SendMessageAsync(webSock, "{\"id\":\"" + userName + "\",\"password\":\"" + password + "\"}");
}
catch (Exception ex)
{
//Add code here to handle any exceptions
}
// loginDialog.Hide();
}
下面是就收服务器信号,根据收到的不同信号来决定换台还是关电视。
private void WebSock_MessageReceived(MessageWebSocket sender, MessageWebSocketMessageReceivedEventArgs args)
{
DataReader messageReader = args.GetDataReader();
messageReader.UnicodeEncoding = UnicodeEncoding.Utf8;
string messageString = messageReader.ReadString(messageReader.UnconsumedBufferLength);
//Add code here to do something with the string that is received.
JObject jo = JObject.Parse(messageString);
// login, get userName
if (userName == null && Boolean.Parse(jo["success"].ToString()) == true)
{
userName = jo["username"].ToString();
// 改状态为已登陆
shellForchangeToLoginedStateAsync();
// loginDialog.Hide();
}
// change channel
else
{
// 如果换台信号就换,否则收到shutdown,关电视
try
{
int cid = int.Parse(jo["myNum"].ToString());
ShellToChangeChannelInUIAsync(cid);
} catch
{
App.Current.Exit();
}
}
}
关闭连接
private void WebSock_Closed(IWebSocket sender, WebSocketClosedEventArgs args)
{
//Add code here to do something when the connection is closed locally or by the server
// 改登陆状态为未登录
ShellTochangeToNotLoginedStateAsync();
}
项目文件
难点主要是这些,要下载整个项目可以到https://github.com/LoHiaufung/Interesting下载midTermPro.zip就是