Girişimcilik ve Mühendislik Zirvesi - ODTU, Nisan 2016

23 Nisan 2016

ODTÜ Üniversitesi Kültür ve Kongre Merkezinde, 20 Nisan 2016, 21 Nisan 2016 ve 22 Nisan 2016 tarihlerinde Girişimcilik ve Mühendislik Zirvesi gerçekleştirildi.

Ben de 22 Nisan 2016 tarihinde Azure App Services konulu bir hands-on (uygulamalı) oturum ile katılımcılara Azure platformunun yazılım geliştiriciler için kolaylıklarını anlattım.

Etkinliğe katılan herkese teşekkür ederim.

HTML5 video element ile cihazın Camera görüntüsünü göstermek

20 Nisan 2016

HTML5 ile birlikte gelen video element içerisinde navigator.getUserMedia API method’u sayesinde Javascript aracılığı ile cihazın Camera görüntüsünü gösterebiliyoruz.

Bu makale ile adım adım ilerleyerek, cihazın Camera gösüntüsünü video element içerisinde gösteren bir sayfa oluşturacağız, hemen yeni bir html dosyası oluşturalım ve içine aşağıdaki kodları yazalım;

Sayfaya bir video element ekleyeceğiz, Javascript aracılığı ile cihazın Camera görüntüsünü alacak, video element içerisinde göstereceğiz. Bunun için aşağıdaki kodları <body></body> element içerisine ekleyelim;

Böylece, sayfa açıldığında navigator nesnesinin getUserMedia method’unu kullanarak cihazın Camera görüntüsüne ulaşmayı deniyoruz.

Not : Eğer audio filtresine false değeri yerine true değeri verirsek sesleri de almaya başlarız.

Eğer camera‘ya başarılı bir şekilde erişebilirsek, window.URL.createObjectURL() methodu ile Camera‘nın görüntüsünü istediğimiz video element içerisinde oynatmaya başlayabiliyoruz.

Sayfa ilk açıldığında kullanıcıdan Camera‘ya erişmek için izin istenir.

Gerekli izin verildikten sonra Camera görüntüsü, ilgili video element içerisinde oynatılmaya başlanır.

Eğer Camera görüntüsünü durdurmak istiyorsak, stream‘in stop() methodunu çağırmamız yeterli.

Ayrıca, CSS3 stillerini kullanarak Camera görüntüsü üzerine efekt‘ler de uygulayabiliriz. Bakınız, HTML5 video element CSS3 ile efekt uygulamak

Eğer Camera görüntüsünün çözünürlüğünü değiştirmek istersek, navigator.getUserMedia() methodunun ilk parametresinde basitçe video: true yazmak yerine, istediğimiz çözünürlüğü aşağıdaki gibi belirtiyoruz;

Global Azure Bootcamp Nisan 2016

17 Nisan 2016

İlki Nisan 2013 tarihinde yapılmaya başlanan Global Azure Bootcamp, 16 Nisan 2016 tarihinde tüm dünyada eş zamanlı olarak 129 lokasyonda gerçekleştirildi.

Türkiye‘de İstanbul ve Ankara‘da bir tam gün boyunca sektör tecrübesi olan uzmanlarca gerçekleştirilen Global Azure Bootcamp içerisinde ben de Asp.Net Core 1.0 ile Yüksek Performanslı Web Uygulamaları konulu oturum gerçekleştirdim.

Etkinliğe katılan herkese teşekkür ederim, etkinlik duyuru görselini aşağıda bulabilirsiniz.

HTML5 video element CSS3 ile efekt uygulamak

15 Nisan 2016

HTML5 ile gelen <video></video> elementine CSS3 ile stil uygulayarak efekt uygulayabiliyoruz. Örneğin, video element içerisinde oynayan videoyu siyah-beyaz yapmak, renk doygunluğu ile oynamak, flu hale getirmek, renkleri ters çevirmek, vs gibi efektler rahatlıkla programlanabiliyor.

Bu makalede yeni bir HTML5 sayfası oluşturarak, oynayan video’ya nasıl efekt verebileceğimizi göreceğiz.

Öncelikle yeni bir html sayfası oluşturalım;

Sayfanın <body></body> taglarının arasına video elementimizi ekleyelim;

Şimdi, <head></head> taglarının arasına yeni bir <style></style> element ekleyelim ve içerisine aşağıdaki stilleri yazalım;

Artık video elementine hangi efekti uygulamak istiyorsak, ilgili css class‘ını uygulamamız yeterli, örneğin;

Web Dev Camp Etkinliği, Nisan 2016

14 Nisan 2016

ITU Teknokent içerisinde 13 Nisan 2016 tarihinde gerçekleşen Web Dev Camp etkinliğinde Asp.Net Core 1.0, MVC 6, Typescript, Angular 2 ve ionicframework konularını içeren oturumlar gerçekleştirdim.

Etkinliğe katılan herkese teşekkür ederim.

Engin Polat hakkında

Senior Software Engineer, @Microsoft

Ada ve Ege'nin babası ;)

Seriler

Kategoriler

Arşiv

İstatistik

Makale Adedi: 484

Creative Commons Lisansı