WEBVTT 00:00:02.000 --> 00:00:05.000 The last day of build. We all made it. 00:00:05.000 --> 00:00:10.000 There is a secret i want to tell you. 00:00:10.000 --> 00:00:15.000 The vendors are going to give out all their swag. They are going to throw it at you. 00:00:15.000 --> 00:00:22.000 If you want anything, twice, three times, grab it. 00:00:22.000 --> 00:00:27.000 You heard it here first. All right. 00:00:27.000 --> 00:00:32.000 So today we are going to be talking about media streaming 00:00:32.000 --> 00:00:42.000 Ct-apps with damn damn run. 00:01:04.000 --> 00:01:10.000 This app right here has a review of walk around the yard. 00:01:10.000 --> 00:01:14.000 I can see various things in my yard. You can't see photos because 00:01:14.000 --> 00:01:19.000 Still media streaming apps. 00:01:19.000 --> 00:01:22.000 And it's going to come up. How about right there? 00:01:22.000 --> 00:01:36.000 All right. You can see various things such 00:01:36.000 --> 00:01:42.000 As photos of things we've taken. What we're all here for is videos. 00:01:42.000 --> 00:01:46.000 So it comes up and and you take videos of things you can see. 00:01:46.000 --> 00:01:52.000 It's streaming. I'm going to want to do one thing. 00:01:52.000 --> 00:02:00.000 Of course, it's we'll be taking a video. 00:02:00.000 --> 00:02:04.000 So it's a pretty decent crowd. A loud conference. 00:02:04.000 --> 00:02:06.000 I'm going to have to have you all be loud as we take a video 00:02:06.000 --> 00:02:11.000 Of everybody. One, two, three, we're 00:02:11.000 --> 00:02:14.000 Recording. Hey, yeah! 00:02:14.000 --> 00:02:18.000 All right. Be using that 00:02:18.000 --> 00:02:22.000 Later. We're back. 00:02:22.000 --> 00:02:30.000 Media streaming apps. How do we do it? 00:02:30.000 --> 00:02:33.000 The key stone to everything is azure media services. 00:02:33.000 --> 00:02:36.000 One thing is gives us is on demand and live video streaming. 00:02:36.000 --> 00:02:44.000 The difference between the two, live you can think of something like twitch. 00:02:44.000 --> 00:02:50.000 On demand is something like i just showed you where pure able 00:02:50.000 --> 00:02:59.000 To save it to the server and broadcast via mpg dash and tune 00:02:59.000 --> 00:03:05.000 In later but broadcast not all at once. 00:03:05.000 --> 00:03:11.000 It also offers in addition to the streaming studio grade encoding. 00:03:11.000 --> 00:03:14.000 When you upfrom a load an mp4 it's going to encode it, split 00:03:14.000 --> 00:03:19.000 It up and you can tell it how to encode it. 00:03:19.000 --> 00:03:23.000 I want this to do h264 at a certain frame rate and compress 00:03:23.000 --> 00:03:27.000 It to certain screen size. How to do audio. 00:03:27.000 --> 00:03:34.000 I want to take thumbnails out of it too. It gives you content protection 00:03:34.000 --> 00:03:38.000 And encryption when you encode it. It also gives you an ams 00:03:38.000 --> 00:03:46.000 Prayer, azure media services 00:03:46.000 --> 00:03:53.000 Player. Mobile app, using something different. 00:03:53.000 --> 00:03:56.000 We'll get into it later. There is something built in to 00:03:56.000 --> 00:03:58.000 Ams as well you can use. So how are we going to build 00:03:58.000 --> 00:04:04.000 This up? i'm using xamarin and xamarin 00:04:04.000 --> 00:04:10.000 Forms with the traditional bindings and such. 00:04:10.000 --> 00:04:14.000 On the azure side of things, i'm using azure functions in the 00:04:14.000 --> 00:04:24.000 Middle of everything. In addition, i'm using azure 00:04:24.000 --> 00:04:28.000 Blob storage, azure cosmos db, and also azure mess analytic 00:04:28.000 --> 00:04:36.000 Queues to go back and forth azure functions has neat things 00:04:36.000 --> 00:04:38.000 Such as input bindings. It can say, all right, when a 00:04:38.000 --> 00:04:43.000 Blob is ready to go, i can say here's the cosmos 00:04:43.000 --> 00:04:45.000 Db record ready for it. 00:04:45.000 --> 00:04:49.000 Or output bindings. I can write to a specific cosmos 00:04:49.000 --> 00:04:56.000 Dorks db record or write to a message queue. Also triggers. 00:04:56.000 --> 00:05:00.000 This is how you kick off an azure function. 00:05:00.000 --> 00:05:05.000 So a blob or message g queue gets written. 00:05:05.000 --> 00:05:07.000 We'll look at each as we build this up. 00:05:07.000 --> 00:05:14.000 We'll look at the xamarin forms app and how to do media coding 00:05:14.000 --> 00:05:19.000 And how to upload the blob storage and also the azure functions. 00:05:19.000 --> 00:05:27.000 We'll go from zero to a full media streaming on hand app. 00:05:27.000 --> 00:05:30.000 What's our workflow? how's it going to flow? 00:05:30.000 --> 00:05:34.000 We have to take the video. We did that. 00:05:34.000 --> 00:05:36.000 Then we're going to hit azure functions to get the key for 00:05:36.000 --> 00:05:41.000 Blob storage. Send it it up to blob storage. 00:05:41.000 --> 00:05:46.000 Then another function to that does the a machining s encoding 00:05:46.000 --> 00:05:50.000 And publishes it on ams to be consumed later. 00:05:50.000 --> 00:05:55.000 When it's done publishing to ams, we kick off a message queue 00:05:55.000 --> 00:06:04.000 That lets yet another know right to our back end azure cosmos so 00:06:04.000 --> 00:06:07.000 Everything is finally readable and streamable in our mobile 00:06:07.000 --> 00:06:15.000 App. So that's the workflow we're 00:06:15.000 --> 00:06:21.000 Going to take for this particular app. Let's get into it. 00:06:21.000 --> 00:06:23.000 The rest is going to be coding. First thing first. 00:06:23.000 --> 00:06:25.000 We are going to go into visual studio. I'm going to pump up the font size. 00:06:25.000 --> 00:06:38.000 Big enough? see it in back? 00:06:38.000 --> 00:06:44.000 I start debugging it on my nexus five. The first thing i'm going to do 00:06:44.000 --> 00:06:46.000 As it starts up i'll talk about the code. 00:06:46.000 --> 00:06:57.000 Is that i'm going to want to hit the, as soon as i hit, running 00:06:57.000 --> 00:07:02.000 All with mvvm so commanding. Execute take video command it 00:07:02.000 --> 00:07:07.000 Pops up and asks me using the cross media, there's a heedia 00:07:07.000 --> 00:07:13.000 Plugin that extracts how to do media files from android and ios. 00:07:13.000 --> 00:07:16.000 I don't have to worry about the exact implementation details. 00:07:16.000 --> 00:07:21.000 I'm going to say, hey, is my take video supported? 00:07:21.000 --> 00:07:26.000 All right, i'm going to ask the user, you want to take video or 00:07:26.000 --> 00:07:31.000 Do i want to pick the video if it's supported? 00:07:31.000 --> 00:07:37.000 I get into the way we handle the play 00:07:37.000 --> 00:07:41.000 The action sheet. Based on their answer within 00:07:41.000 --> 00:07:47.000 I'll say how to store the video, so compression quality, custom 00:07:47.000 --> 00:07:53.000 Size were or just pick it. Take video 00:07:53.000 --> 00:07:57.000 Async. That's taking, going into the 00:07:57.000 --> 00:08:01.000 Platform-specific side and doing what it node needs to do on ios 00:08:01.000 --> 00:08:15.000 Or android. 00:08:15.000 --> 00:08:19.000 Let's run it. Bring it back up. 00:08:19.000 --> 00:08:24.000 Go into this build. Right here there's already a 00:08:24.000 --> 00:08:31.000 Media streaming apps with azure and xamarin, review by this cda 00:08:31.000 --> 00:08:40.000 Person i put that in this morning. 00:08:40.000 --> 00:08:45.000 Anyways, i'm going to go through and edit it. 00:08:45.000 --> 00:08:51.000 And down below, i have a video. Going to click it with&start breaking in. 00:08:51.000 --> 00:08:56.000 I'm going to put a set of brake point down here where i actually 00:08:56.000 --> 00:09:03.000 Do the uploading. 00:09:03.000 --> 00:09:08.000 Then jump back out here. Continue running 00:09:08.000 --> 00:09:12.000 It. Pick the video. 00:09:12.000 --> 00:09:20.000 Go to camera. 00:09:20.000 --> 00:09:24.000 And we are at, i believe this is the one we want. 00:09:24.000 --> 00:09:28.000 It says, all right, we picked it. Come down here. 00:09:28.000 --> 00:09:33.000 We have a media stream. Upload to blob storage. 00:09:33.000 --> 00:09:35.000 Which is right here. This is how i'm going to upload 00:09:35.000 --> 00:09:37.000 To blob storage. First, obtain the blob storage 00:09:37.000 --> 00:09:46.000 Credentials which is going to go up and hit a azure function. 00:09:46.000 --> 00:09:51.000 I'll show it when we go up into the azure function whorl. I have another computer here on 00:09:51.000 --> 00:09:54.000 Windows side which i'm going in the demo terrible territory by 00:09:54.000 --> 00:09:58.000 Switching back and forth between computers. 00:09:58.000 --> 00:10:05.000 Anyways, we get the credentials then i'm using on the client 00:10:05.000 --> 00:10:14.000 Side there is a storage nuget. Once i get to here, it's 00:10:14.000 --> 00:10:19.000 Uploading for me. You can see we're spinning. 00:10:19.000 --> 00:10:26.000 I'm hoping by wi-fi sticks in. 00:10:26.000 --> 00:10:31.000 Cross your fingers, otherwise have to be talking through the code. 00:10:31.000 --> 00:10:35.000 We get here. Storage credentials. 00:10:35.000 --> 00:10:39.000 The function probably had to wake up at this point. 00:10:39.000 --> 00:10:44.000 I'm using nuget to create a blob client and so other ever on to 00:10:44.000 --> 00:10:49.000 Put it up there. Now the nuget is up there. 00:10:49.000 --> 00:10:55.000 I'm going to switch to windows. Here we go. 00:10:55.000 --> 00:11:00.000 Up here for windows. Azure function called ams ingest. 00:11:00.000 --> 00:11:06.000 What i was talking about here is i have a blob trigger. 00:11:06.000 --> 00:11:11.000 This trigger is looking for just file names that end with mp4. 00:11:11.000 --> 00:11:15.000 It's looking in this review photos contaper which is nothing 00:11:15.000 --> 00:11:18.000 Like, think of a review photos as a folder. 00:11:18.000 --> 00:11:24.000 It found it and is putting the file name into this file name variable. 00:11:24.000 --> 00:11:28.000 So just the way i defined the azure function, i am setting it 00:11:28.000 --> 00:11:31.000 Up so i can pull things out of azure storage and use them 00:11:31.000 --> 00:11:43.000 Later. So my file name once i will f10 00:11:43.000 --> 00:11:47.000 Down, i have it. This guyity do the mp4. 00:11:47.000 --> 00:11:51.000 Once i gave it the id of that review for the session then i'm 00:11:51.000 --> 00:11:55.000 Doing a bunch of ad token credentials so i can 00:11:55.000 --> 00:12:00.000 Authenticate to media services. That's boilerplate stuff and documented. 00:12:00.000 --> 00:12:22.000 We'll have links to the documentation to see this. 00:12:22.000 --> 00:12:25.000 It goes and gets a processor to do the encoding. 00:12:25.000 --> 00:12:29.000 This is what i want to show you. This is the thing that's going 00:12:29.000 --> 00:12:33.000 To do the encoding. All right. 00:12:33.000 --> 00:12:40.000 I want an h264 video. Key frame at two seconds, this 00:12:40.000 --> 00:12:43.000 H264 layers, the width, height, and i'm going to create a new 00:12:43.000 --> 00:12:48.000 Ping image for the thumbnail. This, again, is all documented out there. 00:12:48.000 --> 00:12:52.000 I can set this for anything i want and that's how i'm doing 00:12:52.000 --> 00:12:56.000 The encoding for the video that gets up there. 00:12:56.000 --> 00:13:02.000 And then. What does it all doing? 00:13:02.000 --> 00:13:07.000 Taking the blob and encoding it to azure media services format 00:13:07.000 --> 00:13:10.000 And moving the blob from where i put it into an azure services 00:13:10.000 --> 00:13:14.000 Blob as well. Eventually i'll get down to job, 00:13:14.000 --> 00:13:19.000 Submit to kick it off. Disable it that break point so 00:13:19.000 --> 00:13:25.000 It goes through right away. Seems like it's taking a little bit. 00:13:25.000 --> 00:13:28.000 All right. We got it copied and moving through. 00:13:28.000 --> 00:13:36.000 All right. Job submit. What happens, i'm 00:13:36.000 --> 00:13:47.000 Going to bob into media services and i can go through and see the 00:13:47.000 --> 00:13:49.000 Come on. Wi-fi. I can see the one is processing. 00:13:49.000 --> 00:13:55.000 I jump in and can see the progress as it goes. 00:13:55.000 --> 00:14:00.000 It's processing. I can see what the output assets will be. 00:14:00.000 --> 00:14:04.000 I can click that as well. As soon as they're finished, it 00:14:04.000 --> 00:14:08.000 Takes a little to go through all the processing. 00:14:08.000 --> 00:14:13.000 Once they're done, i would be able to click on a publish urls 00:14:13.000 --> 00:14:19.000 And use the azure media services player to view the video from 00:14:19.000 --> 00:14:24.000 Here as well. So we're still processing. 00:14:24.000 --> 00:14:27.000 It takes a little bit to hit this up. 00:14:27.000 --> 00:14:31.000 That's why i'm doing it asychronously on the client. 00:14:31.000 --> 00:14:34.000 I popped up an alerts thing saying we'll let you know when 00:14:34.000 --> 00:14:42.000 It's all finished. When it does finish, i can show 00:14:42.000 --> 00:14:46.000 You how getting the key for the token worked, the right to blob 00:14:46.000 --> 00:14:50.000 Storage. It 00:14:50.000 --> 00:14:54.000 Was a http trigger. I want to get the review 00:14:54.000 --> 00:14:59.000 Photoed, that the folder i hit before, and it's saying, all 00:14:59.000 --> 00:15:03.000 Right, i'm sending in what kind of permissions i want oaf here 00:15:03.000 --> 00:15:08.000 And asked for write permissions. It starts talking to azure 00:15:08.000 --> 00:15:11.000 Storage services, gets me write permissions and allows me to get 00:15:11.000 --> 00:15:16.000 A unique key or token to write to it, which returns. 00:15:16.000 --> 00:15:19.000 Here we go. This is the next trigger. 00:15:19.000 --> 00:15:22.000 Once everything's finished, i wrote to a queue. 00:15:22.000 --> 00:15:30.000 This queue here has a message that's of this format. 00:15:30.000 --> 00:15:32.000 It has an hlsuri, review id, 00:15:32.000 --> 00:15:37.000 Which i sent along for the ride with everything. These are the ur ikes of the 00:15:37.000 --> 00:15:42.000 Versions i encoded for from before. 00:15:42.000 --> 00:15:52.000 And you'll notice i had the review id in there and i also 00:15:52.000 --> 00:15:56.000 Have over here a document db. 00:15:56.000 --> 00:16:02.000 With this review id nn there. Because i had a review id coming 00:16:02.000 --> 00:16:09.000 In in my message queue, i had automatically tied upped real 00:16:09.000 --> 00:16:12.000 Review record that was in azure or azure cosmos. 00:16:12.000 --> 00:16:16.000 All i'm doing the declare tiffly setting up up through attributes. 00:16:16.000 --> 00:16:19.000 I don't have to mess around creating the document context or anything like that. 00:16:19.000 --> 00:16:26.000 I have it. Azure functions takes care of it 00:16:26.000 --> 00:16:28.000 All for me, which is neat. A final one is for me, an output binding. 00:16:28.000 --> 00:16:34.000 All right. I have another document db, and 00:16:34.000 --> 00:16:38.000 I'm going to write to it. All it's doing is taking that 00:16:38.000 --> 00:16:43.000 Review, creating a new videos collection and writing the 00:16:43.000 --> 00:16:47.000 Various urls to it. It's going to follow through 00:16:47.000 --> 00:16:54.000 Really quick and i can go out to here and i close it to refresh it. 00:16:54.000 --> 00:16:56.000 Hit my output assets. This is an ams. 00:16:56.000 --> 00:17:01.000 Everything should be here now. I can go down to the streaming. 00:17:01.000 --> 00:17:07.000 And hit play. So this is the ams player when 00:17:07.000 --> 00:17:12.000 It comes up. 00:17:12.000 --> 00:17:17.000 Wonderful conference wi-fi. 00:17:17.000 --> 00:17:22.000 That's what it looks like. We have it up in ams now. 00:17:22.000 --> 00:17:26.000 Able to view it over azure media services. All right. 00:17:26.000 --> 00:17:37.000 Let's get that into our app. Back to number six. 00:17:37.000 --> 00:17:40.000 All right. Now our app is back here or back 00:17:40.000 --> 00:17:45.000 To the beginning. I'll click in it here, click 00:17:45.000 --> 00:17:49.000 Down into the build, back into the media streaming one. 00:17:49.000 --> 00:17:54.000 See it came back now. I was looking for the reviews. 00:17:54.000 --> 00:17:57.000 Or reviews i had, now the videos in there. 00:17:57.000 --> 00:18:00.000 That got pulled down. Now i have it here. 00:18:00.000 --> 00:18:06.000 So how do i display it? zoom out a bit. 00:18:06.000 --> 00:18:09.000 I have a individual very player page. This video player page has a web 00:18:09.000 --> 00:18:11.000 View in it. The web view is bound to a video 00:18:11.000 --> 00:18:20.000 Url. That video you can rl in the 00:18:20.000 --> 00:18:33.000 View model is looking at the hls 00:18:33.000 --> 00:18:45.000 Url click that. 00:18:45.000 --> 00:18:51.000 Clear break point. Click this. And we have it running. 00:18:51.000 --> 00:18:56.000 Strepping over that way. Really, all i'm doing is, 00:18:56.000 --> 00:18:58.000 There's a bunch of function work to set it up. 00:18:58.000 --> 00:19:00.000 Writing to the initial blob storage. 00:19:00.000 --> 00:19:06.000 That initial blob storage kicked off with a blob trigger with a 00:19:06.000 --> 00:19:15.000 Function to say, all right azure media services, do your thing. 00:19:15.000 --> 00:19:17.000 Create a new asset, encode it, ounce you're done encoding it, 00:19:17.000 --> 00:19:22.000 Send a message saying you're done, write it to cosmos db into 00:19:22.000 --> 00:19:25.000 The review record. It has a new url to it. 00:19:25.000 --> 00:19:31.000 I reloaded it back into the app. There's a lot of talking in the 00:19:31.000 --> 00:19:33.000 Middle with a fairly easy concept. But there we go. 00:19:33.000 --> 00:19:37.000 All right. We're just a bit over time. 00:19:37.000 --> 00:19:44.000 And lucky for us, all i have left is the url for that whole 00:19:44.000 --> 00:19:48.000 Demo app here. There we go. 00:19:48.000 --> 00:19:52.000 A whole demo app with step-by-step instructions, 00:19:52.000 --> 00:19:56.000 Including i link to g create a free azure account on it so you 00:19:56.000 --> 00:20:02.000 Can run everything we saw today. With that said, please leave a