Recentemente comecei alguns estudos em uma nova tecnologia da google chamada Dart. Uma linguagem orientada a objetos e com recursos funcionais concebida para criar aplicativos para a web. Dart oferece uma ide onde é possível depurar código, ter recursos como refatoração, code completion, etc..
O interessante dessa nova aposta é que as aplicações web executam nativamente dentro de uma vm chamada dart vm. É possível construir aplicações cliente e também servidor. O compilador de dart pode gerar código para dartvm ou javascript para fazer cross browser.
O código dart pode mapear quase totalmente o html5(ou totalmente) e css3.
Escrevi uma pequena aplicação de captura de vídeo em um dos estudos, quem que utiliza a webcam como fonte de mídia, aplica efeitos e o mais importante, "faz a captura" de um snapshot:
import 'dart:html';
var filtros = ['sepia', 'invert', 'contrast'];
bool hasCamSupport(){
return MediaStream.supported;
}
void main() {
//recupera componentes das tags html5 por meio do css selector #
var cmdStart = query("#cmdStart");
var cmdStop = query("#cmdStop");
var cmdSnapshot = query("#cmdSnapshot");
var cmdSepia = query("#cmdSepia");
var cmdInvert = query("#cmdInvert");
InputElement rgContrast = query("#rgContrast");
InputElement rgBrilho = query("#rgBrilho");
CanvasElement canvas = query("#screenshot");
ImageElement imagem = query("#imagem");
//esconde a tag da imagem
imagem.hidden = true;
//verifica se o browser oferece suporte para WebRTC
if(hasCamSupport()){
print("Api de vídeo suportada");
VideoElement video = query("#vid");
CanvasRenderingContext2D ctx = canvas.getContext("2d");
window.navigator.getUserMedia(audio:false, video: true).then((stream) {
video.src = Url.createObjectUrl(stream);
//inicia preview
cmdStart.onClick.listen((event){
video.classes.removeAll(filtros);
video.play();
});
//pausa preview
cmdStop.onClick.listen((event){
video.pause();
});
//adiciona o filtro sepia
cmdSepia.onClick.listen((event){
video.style.filter = "";
video.classes.removeAll(filtros);
video.classes.add(filtros[0]);
});
//adiciona o filtro invert
cmdInvert.onClick.listen((event){
video.style.filter = "";
video.classes.removeAll(filtros);
video.classes.add(filtros[1]);
});
rgContrast.onChange.listen((event){
String val = event.target.value;
video.classes.removeAll(filtros);
String contraste = "contrast(${val}%)";
video.style.filter = contraste;
print(contraste);
});
rgBrilho.onChange.listen((event){
String val = event.target.value;
video.classes.removeAll(filtros);
String brilho = "brightness(${val}%)";
video.style.filter = brilho;
print(brilho);
});
//captura snapshot do preview
cmdSnapshot.onClick.listen((event){
if(stream != null){
ctx.drawImage(video, 0, 0, 300, 150);
imagem.src = canvas.toDataUrl("image/webp");
}
});
});
}else{
print("Api de vídeo não suportada");
}
}
Dart é uma tecnologia recente mas já concebeu o google plus e vários webapps da chrome store.
Código fonte em anexo.
