未加星标

Amazing UWP with dreadful YouTube experience

字体大小 | |
[系统(windows) 所属分类 系统(windows) | 发布者 店小二05 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

I publish this article to forewarn any developer before making and app with YouTube videos (which in UWP is extremely easy) and detail my experience.

NOTE: I assume and respect every YouTube consumer client want to earn money with the videos they publish.

Purpose

I treat with many ‘personas’ (designers will know the term) and in many situations I decided to make easy to use apps from elder to toddlers, because I consider many sites are getting confusing for many groups.

I began several days ago with an app using YouTube videos. I made some WPF apps to get the Video Ids I need in order to do not overload YouTube with unnecessary calls and store them in SQLite.

Getting Ids for Images and Videos
Amazing UWP with dreadful YouTube experience

Using different ‘user agents’ makes Google work in the old fashioned style with pagination, that will make your logic faster, so for instance you can use in WPF:

public static async Task<List<string>> LargeImagesSearch(string query,
WebBrowser client, int limit = 10, Sizes size = Sizes.Medium)
{
HideScriptErrors(client, true);
result = null;
maxlimit = limit;
string uri = string.Format(@"https://www.google.es/search?q={0}&tbm=isch&{1}", query.Replace(" ", "+"), GetSize(size));
client.LoadCompleted -= LargeImages_Client_LoadCompleted;
client.LoadCompleted += LargeImages_Client_LoadCompleted;
var agent = "Mozilla/5.0 (BlackBerry; U; BlackBerry 9900; en) AppleWebKit/534.11+ (KHTML, like Gecko) Version/7.1.0.346 Mobile Safari/534.11+";
client.Navigate(new Uri(uri), null, null, $"User-Agent: {agent}\r\n");
while (result == null)
{
await Task.Delay(100);
}
return result;
}
private static void LargeImages_Client_LoadCompleted(object sender, NavigationEventArgs e)
{
var client = sender as WebBrowser;
var content = (string)client.InvokeScript("eval", new string[] { "document.documentElement.outerHTML;" });
var startpattern = "var u='";
var endpattern = "';var";
var idx = content.IndexOf(startpattern) + startpattern.Length;
List<string> s = new List<string>();
while (idx > -1 && s.Count < maxlimit)
{
var endidx = content.IndexOf(endpattern, idx + 1);
var text = content.Substring(idx, endidx - idx);
s.Add(text);
idx = content.IndexOf(startpattern, idx) + startpattern.Length;
}
result = s;
}

If you want to run it faster, in the Internet Explorer Options Settings you can disable Images in the Multimedia section. It is only to get the data just for creating data not for the app, so it is a logic step to do. In my case setting the captcha once, it make restarting the app work for all the searching.

In theory you can do the same using the YouTube data api. but it requires authentication and more lines code than this. So just for once I think it does not worth for it. (Implementing an API that gives you a token for few hours with calls per second restriction would be serious implementation).

For the videos part the query is similar but in my case I have to set a captcha logic to fill up it and continue:

public static async Task<List<string>> SearchVideos(string query, WebBrowser client, int limit = 10, Sizes size = Sizes.Medium)
{
HideScriptErrors(client, true);
result = null;
maxlimit = limit;
string uri = string.Format(@"https://www.google.es/search?q={0}&tbm=vid", query.Replace(" ", "+"));
client.LoadCompleted -= VideosClient_LoadCompleted;
client.LoadCompleted += VideosClient_LoadCompleted;
var agent = "Lynx/2.8.8dev.3 libwww-FM/2.14 SSL-MM/1.4.1";
client.Navigate(new Uri(uri), null, null, $"User-Agent: {agent}\r\n");
while (result == null)
{
await Task.Delay(100);
}
return result;
}
private static void VideosClient_LoadCompleted(object sender, NavigationEventArgs e)
{
var client = sender as WebBrowser;
var content = (string)client.InvokeScript("eval", new string[] { "document.documentElement.outerHTML;" });
if (content.Contains("CaptchaRedirect") ||content.Contains("To continue, please type the characters below:"))
{
result = new List<string>() { "error" };
return;
}
var startpattern = "href=\"/url?q=";
var endpattern = "\">";
var idx = content.IndexOf(startpattern) + startpattern.Length;
List<string> s = new List<string>();
while (idx > -1 && s.Count < maxlimit)
{
var endidx = content.IndexOf(endpattern, idx + 1);
var text = content.Substring(idx, endidx - idx);
s.Add(text);
idx = content.IndexOf(startpattern, idx) + startpattern.Length;
}
result = s;
} Showing video

I have to say that now it is possible to mix Portable, WPF and UWP about SQLite without having headaches (with specific settings in each project).

Well I began just to experiment using libraries like MyToolkit that includes all necessary to embed a video from an YouTube video id, and works pretty fast.

Then I am using the MediaPlayerElement which internally includes the SystemMediaTransportControls to make it work minimized and makes appear the volume bar and the task bar player options, also plays sound minimized. So UWP is working great in every place I tested. I could also tested the resolution, pause the video, full screen, and I am sure that you can download the source files pretty easy and it worked with every video id I tested.

Now comes the second part, being polite with YouTube. And here comes all my complains. Of course I take for granted that the YouTube clients post videos in order to earn money with each view or ads.

YouTube has not a native library for UWP in order to make it compatible with the MediaPlayer so I decided to use a WebView and the javascript snippets to follow the terms of service (ToS) of YouTube. (You cannot use the wonderful libraries and UWP polished controls)

The only thing I have to do is follow the snippets from Youtube . Well you know, for ten lines of code, it does not work the event when it finish loading and not just for the UWP Webview, it simply does not work in any browser.

events:
{
"onReady":onPlayerReady,
}
Amazing UWP with dreadful YouTube experience

So I have to make a delay in order to wait until is loaded to make it fullscreen, because the logic of code is instead create html is replace html. I assume for people of Wonderland is the way to do the things.

Well you cannot make the IFrame that creates full sized. So after wasting more time finally I was able to make it 100% width and height, which is not obvious at all.

After solving these issues I began to test with the Ids I got from the previous section, well that’s my surprise:


Amazing UWP with dreadful YouTube experience

Cool, isn’t it? After being polite and making the effort you cannot show the videos. I do not mind if they show the ads in order to make their business but why they offer all this stuff without warning about these situation.

After seeking a bit there is no way to know if a video is filtered to work just in youtube.com (More great news).

Conclusions

I would make a fantastic app that will make life easier and safer for elder and toddlers with just using the fantastic libraries and UWP controls avoiding the ToS of YouTube. Or make an app that plenty of times will give errors and limitations and would work different in different devices.

At the moment I do not know what is happening with the several YouTube app developers that allow to download content from YouTube (that is out of the ToS) and avoid the webplayer. It would be great if someone knows a solution on how to proceed.

本文系统(windows)相关术语:三级网络技术 计算机三级网络技术 网络技术基础 计算机网络技术

主题: WPFHTMLUWSQLAppleJavaScriptJava
分页:12
转载请注明
本文标题:Amazing UWP with dreadful YouTube experience
本站链接:http://www.codesec.net/view/480943.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 系统(windows) | 评论(0) | 阅读(40)