 |
|
Você está aqui: HTML5 ::: HTML5 + JavaScript ::: Video - HTMLVideoElement |
|
Como acessar sua webcam, retornar o MediaStream retornado e usá-lo na propriedade srcObject do elemento video do HTML5Quantidade de visualizações: 1837 vezes |
|
|
Nesta dica vou mostrar como é possível acessar sua webcam (câmera) usando o método getUserMedia() do objeto mediaDevices. Se o usuário concordar em permitir o acesso, nós vamos obter o objeto MediaStream retornado e vamos usá-lo para exibir a imagem da câmera em um elemento video. O código ficará mais fácil de ser entendido se você ler as outras dicas na seção dedicada ao HTML5. Veja o código completo: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Acessando sua webcam</title>
</head>
<body>
<video id="video" autoplay="true">
Seu browser não dá suporte ao elemento video do HTML5.
</video>
<script type="text/javascript">
async function exibirWebCam(){
// vamos obter uma referência ao elemento video
var video = document.getElementById("video");
// vamos obter o stream da webcam
var stream = null;
try{
stream = await navigator.mediaDevices.getUserMedia({video: true});
// atribui o MediaStream à propriedade srcObject do HTMLMediaElement
video.srcObject = stream;
}
catch(erro){
// o usuário não autorizou ou a webcam não está disponível
window.alert("Houve um erro: " + erro);
}
}
// o browser suporta o MediaDevices?
if(navigator.mediaDevices){
exibirWebCam();
}
else{
window.alert("O navegador não suporta o MediaDevices");
}
</script>
</body>
</html>
Veja que aqui nós não nos preocupamos com as dimensões do vídeo. Em outras dicas dessa seção você aprenderá a fazer isso sem muitas dificuldades. |
|
 Link para compartilhar na Internet ou com seus amigos: |
|
HTML5 ::: HTML5 + JavaScript ::: Geolocation API |
Como usar a API Geolocation do HTML5Quantidade de visualizações: 1686 vezes |
|
A API Geolocation foi uma das adições mais importantes ao HTML5. Por meio desta API, os usuários podem compartilhar sua localização com seus sites favoritos. Um código JavaScript pode, por exemplo, capturar sua latitude e longitude, enviar para o backend de um servidor web e permitir que algumas aplicações façam coisas tais como encontrar lojas e locais mais próximos de você ou até mesmo mostrar sua localização em um mapa. Nos dias atuais (março de 2020), a maioria dos navegadores web e dispositivos móveis (celulares, computadores de bordo de veículos, etc) dão suporte à API Geolocation. É claro que, antes de usá-la, temos que estar atentos à algumas considerações: 1) A localização mais precisa é aquela fornecida por um GPS, e este geralmente não está presente em laptops ou desktop. No entanto, alguns sistemas operacionais possuem a capacidade de obter tal localização se você estiver usando posicionamento de WI-FI e também por meio do seu endereço IP (Internet Protocol). 2) O usuário poderá se recusar a fornecer sua localização. Assim, fique atento a este fato e teste sempre a existência da API Geolocation e também a concordância do usuário antes de efetuar alguma ação crucial nas suas aplicações. 3) Alguns navegadores web restringem o acesso à API Geolocation somente em ambiente HTTPs. Fique atento a este detalhe também. Vamos agora ver um trecho de código JavaScript que verifica a existência da API Geolocation no navegador: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<title>Testando a existência da API Geolocation</title>
</head>
<body>
<script type="text/javascript">
if(window.navigator.geolocation) {
window.alert("A API Geolocation foi encontrada.");
}
else{
window.alert("A API Geolocation não foi encontrada neste navegador.");
}
</script>
</body>
</html>
Notem que o novo objeto geolocation foi adicionado ao objeto navigator, já existente nos navegadores desde suas primeiras versões, e tudo que fizemos foi testar a existência de tal objeto. Pronto! Agora que já sabemos para que serve a API Geolocation e como verificar a existência do objeto geolocation, o passo seguinte é aprender como detectar a latitude e longitude do usuário. Nesta seção você encontrará mais dicas relacionadas a isso. |
HTML5 ::: HTML5 + JavaScript ::: Geolocation API |
Como retornar a localização do usuário usando o método getCurrentPosition() da API Geolocation do HTML5Quantidade de visualizações: 2311 vezes |
O método getCurrentPosition() da API Geolocation do HTML5 nos permite obter tanto a latitude quanto a longitude do usuário que está acessando nossas páginas web. A forma mais simples deste método requer apenas uma função JavaScript que receberá o objeto de coordenadas. Veja o trecho de código a seguir: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<title>Obtendo a latitude e longitude usando a API
Geolocation</title>
</head>
<body>
<script type="text/javascript">
function mostrarPosicao(posicao) {
document.writeln("<h1>Latitude: " + posicao.coords.latitude +
"; Longitude: " + posicao.coords.longitude + "</h1>");
}
// não se esqueça de testar se o navegador web suporta a API
// Geolocation do HTML5
if(window.navigator.geolocation) {
// chamamos o método getCurrentPosition() fornecendo a função
// JavaScript que receberá o objeto de coordenadas
navigator.geolocation.getCurrentPosition(mostrarPosicao);
}
else{
document.writeln("A API Geolocation foi encontrada.");
}
</script>
</body>
</html>
Ao executar este trecho de código, a primeira coisa que você verá é uma mensagem do navegador avisando que o site a partir do qual o código está sendo executado quer saber sua localização. A mensagem exibirá os botões Permitir ou Bloquear. Se você clicar no botão Permitir, a latitude e longitude serão escritas no navegador: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- Latitude: -16.7143838; Longitude: -49.2327622 É claro que, se você estiver executando o código em um laptop ou desktop, o resultado será muito diferente daquele mostrado no seu celular. O motivo é que, em geral, um GPS não está disponível nos laptops e desktops. Por essa razão, o navegador vai obter sua localização usando posicionamento de WI-FI e também por meio do seu endereço IP (Internet Protocol). |
HTML5 ::: Dicas & Truques ::: Meta Tags |
HTML5 para iniciantes - Como usar a meta tag viewport para controlar o layout de suas páginas HTMLQuantidade de visualizações: 5493 vezes |
|
Quando estamos aprendendo HTML5 e queremos desenvolver páginas web responsivas, ou design responsivo, uma das primeiras tags que temos que entender e dominar bem, é a tag viewport, incluinda com a especificação do HTML5. Mas o que é a tag viewport? Esta meta tag foi originalmente apresentada no navegador Safari Mobile, e é usada para definir a largura e escala de apresentação do conteúdo da página HTML. Dessa forma, viewport é a área da página web na qual o conteúdo é exibido para o usuário. Como sabemos, uma página web pode ser acessada por dispositivos variados. A tela do laptop é muito maior se comparada à tela de um smartphone ou tablet. A meta tag viewport é adicionada na seção <head> da página HTML e pode conter os seguintes elementos: width: É a largura do viewport virtual no dispositivo. height: É a altura do viewport virtual do dispositivo. initial-scale: É o nível de zoom quando a página é acessada. maximum-scale: É o limite máximo de zoom que pode ser aplicado à página. user-scalable: Uma flag que indica se o usuário pode ou não aplicar zoom à página. Os valores permitidos são yes ou no. Veja, por exemplo, como definir um viewport de 980px e escala inicial de zoom de 1: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- <meta name="viewport" content="width=980, initial-scale=1"> No entanto, se nossa intenção é desenvolver um design responsivo, devemos passar o valor device-width para o atributo width do viewport. Isso faz com que a largura do viewport seja igual à largura do dispositivo que está acessando a página. Veja uma página HTML completa usando esta abordagem: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- <html> <head> <title>Estudando HTML5</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h1>Java Avançado - Como obter a largura e altura da tela do seu computador em pixels usando o método getScreenSize() da classe Toolkit do Java</h1> <p>A classe Toolkit da linguagem Java nos fornece o método getScreenSize(), que retorna um objeto da classe Dimension contendo a largura e a altura da tela do nosso computador, em pixels. Veja o código Java completo para o exemplo:</p> </body> </html> Note que o elementos dentro do atributo content são separados por vírgulas, juntamente com seus valores individuais. |
Vamos testar seus conhecimentos em Fundações |
| Fundações diretas ou rasas As fundações rasas ou diretas apresentam como características a transmissão da carga ao terreno, predominantemente pelas pressões distribuídas sob a base da fundação, e a profundidade de assentamento em relação ao terreno inferior a duas vezes a menor dimensão da fundação. Sobre as fundações superficiais rasas ou diretas, assinale a alternativa correta. A) A sapata associada pode ser definida como a sapata sujeita à ação de uma carga distribuída linearmente ou de pilares ao longo de um mesmo alinhamento. B) O radier é o elemento de fundação superficial que abrange parte ou todos os pilares de uma estrutura, distribuindo os carregamentos. C) A sapata corrida é definida como a sapata comum a mais de um pilar. Devido a essa particularidade, para sua execução é necessário o uso de máquinas. D) A sapata é dimensionada de modo que as tensões de tração nela resultantes sejam resistidas pelo concreto, sem necessidade de armadura. E) O bloco é dimensionado de modo que as tensões de tração nele resultantes sejam resistidas pelo emprego de armadura disposta para esse fim. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Fenômeno de Transportes e Hidráulica |
| Fenômeno de Transportes De uma grande barragem, parte uma canalização de 250mm de diâmetro, de onde a água passa para a atmosfera sob a forma de jato. A vazão deste jato é 360L/s. Calcular a velocidade Vj do jato e a altura (H) na barragem. Considere que não há perda de energia no processo e que a velocidade de decaimento do nível da barragem é nula.  A) Vj = 7,33m/s e H = 2,74m. B) Vj = 1,83m/s e H = 0,17m. C) Vj = 2,46m/s e H = 0,31m. D) Vj = 7,33m/s e H = 0,37m, E) Vj =7,33 X 10-3m/s e H = 2,74 X 10-6m. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Ética e Legislação Profissional |
| Postura ética profissional A maioria das sociedades profissionais preparou um código de ética para seus membros. O objetivo do código de ética dos engenheiros é guiá-los a um comportamento ético. Uma análise desses códigos fornece algumas orientações. A esse respeito, assinale a alternativa que apresenta uma conduta ética aceitável em um ambiente de trabalho: A) Promover trabalho honesto e árduo aos clientes. B) Promover conflitos de interesse. C) Aceitar benefício próprio para promover uma vantagem a uma empresa. D) Preterir a segurança, a saúde e o bem-estar. E) Ser ilusório e objetivo. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Fundações |
| Fundações diretas: tipos, características, métodos construtivos e cálculo das tensões no solo Um engenheiro verificou um problema de projeto na planta em uma edificação de grande porte: os pilares estavam muito próximos entre si. Desta forma, ele precisaria indicar ao mestre de obra um tipo de fundação mais apropriado, para não acarretar um problema estrutural devido à aproximidade dos pilares. A partir desta informação, assinale a alternativa correta: A) Radier. B) Sapata associada. C) Bloco. D) Sapata de divisa. E) Sapata corrida. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Instalações Hidráulicas Prediais |
| O projeto de instalação hidrossanitária Em relação ao histograma, considere as seguintes sentenças: I - Histograma consiste em um gráfico que apresenta a distribuição de frequências de uma variável por meio de retângulos justapostos, feitos sobre as classes dessa variável, sendo que a área de cada retângulo é proporcional à frequência observada da correspondente classe. II - Histogramas são obrigatórios em todos os projetos civis, sendo, inclusive, exigidos pelos órgãos para liberação do habite-se; III - Histogramas são recomendáveis apenas em projetos muito grandes ou de grande complexidade. Assinale a alternativa correta: A) Apenas as sentenças I e II estão corretas. B) Apenas as sentenças II e III estão corretas. C) Apenas a sentença I está correta. D) Apenas a sentença III está correta. E) Todas as sentenças estão corretas. Verificar Resposta Estudar Cards Todas as Questões |
Veja mais Dicas e truques de HTML5 |
Dicas e truques de outras linguagens |
|
Java - Como transformar um StringBuffer em uma String usando o método toString() da classe StringBuffer JavaScript - JavaScript para iniciantes - Como usar o método escape() para codificar uma frase em JavaScript |
Códigos Fonte |
 Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimentoDiga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais |
 Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesTenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
Linguagens Mais Populares |
|
1º lugar: Java |
