Diferenças

Aqui você vê as diferenças entre duas revisões dessa página.

--- camdesktop [28/04/2025 - 14:12:10]
Thalles Lázaro
+++ camdesktop [02/05/2025 - 15:17:16] (atual)
Thalles Lázaro
@@ Linha 1: / Linha 1: @@
+====== CamDesktop WebCam Flutuante Online ======
 <html>
-<script>
-document.addEventListener('DOMContentLoaded', () => {
-if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
-if (/Chrome/.test(navigator.userAgent) || /Edg/.test(navigator.userAgent)) {
-fetch("chrome-extension://fpbdkgbdodcinnndaigolincodkjkkjp/icon-512.png")
-.then(() => {
-})
-.catch(() => {
-document.getElementById("extensaoChrome").style.display = "block";
-});
-}
-}
-});
-</script>
-<div class="webcamContainer p-4 text-center container mx-auto">
-<a href="https://chromewebstore.google.com/detail/camdesk-camdesktop-webcam/fpbdkgbdodcinnndaigolincodkjkkjp" target="_blank" title="CamDesk CamDesktop WebCam Flutuante">
-<div id="extensaoChrome" class="card-title text-xl mb-4" style="display:none;background:#FFA500!important;text-shadow: 1px 1px 5px black;">
-Clique aqui e instale nossa extensão CamDesktop para Chrome ou Edge agora mesmo!
-</div>
-</a>
-<div class="row-item flex max-md:flex-col gap-4 max-md:gap-2">
-<div class="w-full">
-<div id="webcam">
-<video id="video" muted autoplay></video>
-<div class="tips" data-action="toggle">
-<div>
-<div class="tipsText p-2">
-<p> [Enter] para Abrir WebCam Flutuante <br> [Espaço] para Foto Instantânea <br> [Tab] para Abrir e Fechar esse Texto <br> [F11] para Tela Cheia </p>
-</div>
-</div>
-</div>
-<div class="select centa" data-action="toggle">
-<select id="videoSource"></select>
-<select id="videoSize">
-<option value="null">Tamanho (Padrão da WebCam)</option>
-<option value="1/1">1/1</option>
-<option value="1/2">1/2</option>
-<option value="2/1">2/1</option>
-<option value="4/3">4/3</option>
-<option value="9/16">9/16</option>
-<option value="16/9">16/9</option>
-<option value="21/9">21/9</option>
-</select>
-<a id="save" data-action="toggle" class="hide" href="#">Salvar Foto</a>
-</div>
-<canvas class="hide" id="canvas"></canvas>
-<img class="hide" id="theimage">
-</div>
-</div>
-<div class="w-full p-3">
-<div id="textoPermissaoConcedida" class="hide2">
-<div><button type="button" class="" id="pip">Ativar WebCam Flutuante</button></div>
-<div><button type="button" class="" id="desconectar">Desconectar WebCam</button></div>
-</div>
-<p class="mb-4">O site de "webcam" mais simples, mas também um dos mais práticos, perfeito para espelhar a sua webcam flutuante em um canto da tela.</p>
-<p class="mb-4">Não precisa baixar nem instalar... É só <b>apertar Enter</b> ou tocar no botão <b>Ativar WebCam Flutuante</b> e sua webcam vai ficar flutuando, você poderá minimizar o navegador sem problemas.</p>
-</div>
-</div>
-</div>
 <style>
-#webcam{
+h1{display:none!important;}
--webkit-user-select:
+</style>
--ms-user-select: none;
-user-select: none;
-}
-#webcam .view, .tips > div {
+<iframe allowtransparency="true" allowfullscreen="true" allow-downloads="true" width="100%" height="500px" src="/camdesktop-iframe.html" id="iframe" style="overflow:hidden" scrolling="no"></iframe>
-width: 100%;
-height: 100%;
-}
-#webcam .view[data-active="false"] > video,
-#webcam .view[data-active="true"] > button,
-.hide2{
-display: none;
-}
-.hide {
-display: none!important;
-}
-#webcam{
-position: relative;
-}
-#webcam video {
-display: block;
-width: 100%;
-height: auto;
-background: #000;
--webkit-app-region: drag;
-aspect-ratio: 16 / 9;
-}
-#webcam .tips > div {
-display: table;
-position: absolute;
-top: 0;
-left: 0;
-background: #000;
-background: rgba(0, 0, 0, 0.5);
-color: #fff;
-text-align: center;
-overflow: hidden;
-font-size: 16px;
-}
-#webcam .tips > div a {
-color: #fff;
-font-size: 3em;
-}
-#webcam .tips .tipsText {
-color: #fff;
-display: table-cell;
-vertical-align: middle;
-z-index: 1;
-text-shadow: 2px 2px 5px #000000;
-}
-#webcam .select {
-position: absolute;
-top: 0;
-left: 0;
-right: 0;
-}
-#webcam .select, .select option {
--webkit-app-region: no-drag;
-}
-#webcam .centa {
-text-align: center;
-}
-#webcam #videoSource, #webcam #videoSize{
-width: 48%;
-border: 0;
-border-radius: 0;
-padding: 5px;
-text-align: center;
-margin: 5px 0;
-display: inline-block;
-}
-@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
-#webcam .tips{display:none}
-}
-</style>
+<video id="video" style="position:fixed;bottom:0;left:0;width:100px;height:auto;margin-left:-99px;opacity:0.01;" muted autoplay></video>
 <script>
+iframe = document.getElementById("iframe");
-function setCookie(cname, cvalue, exdays) {
+iframe.onload = function(){
-var d = new Date();
+iframe.contentWindow.document.body.style.background = window.getComputedStyle(document.body, null).getPropertyValue('background-color');
-d.setTime(d.getTime() + 10000 + (exdays * 24 * 60 * 60 * 1000));
-var expires = "expires=" + d.toUTCString();
-document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
 }
+window.onresize = function(){
-function getCookie(cname) {
+iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
-var name = cname + "=";
-var decodedCookie = decodeURIComponent(document.cookie);
-var ca = decodedCookie.split(';');
-for (var i = 0; i < ca.length; i++) {
-var c = ca[i];
-while (c.charAt(0) === ' ') {
-c = c.substring(1);
-}
-if (c.indexOf(name) === 0) {
-return c.substring(name.length, c.length);
-}
-}
-return "";
 }
+setInterval(function(){
+iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
+}, 500);
+</script>
+</html>
-var videoElement = document.querySelector("video"),
+===== Entenda um pouco sobre o CamDesktop =====
-videoSelect = document.querySelector("#videoSource"),
+O CamDeskop é uma ferramenta útil para várias ocasiões. Sua função se resume a mostrar sua própria webcam na sua tela de um modo que possa ficar flutuante acima de outras janelas e programas no seu computador, sem qualquer opção de gravação, edição ou efeitos especiais. Ou seja: ele apenas abre uma janela flutuante na sua tela mostrando sua webcam como se fosse um espelho.
-videoSize = document.querySelector("#videoSize"),
-canvas = document.getElementById("canvas"),
-ctx = canvas.getContext("2d"),
-snapshot = document.getElementById("theimage"),
-selectors = [videoSelect];
+Suas melhores características, são o redimensionamento e poder movimentar a janela para qualquer parte da sua tela, aumentar o tamanho da janela da webcam deixa tudo melhor, por que é você decide o tamanho da janela da webcam, a função de mover a janela para qualquer lugar é a melhor parte, por que caso você tenha algo para ver ou ler exatamente onde está a janela da webcam, você pode simplesmente move-lá.
-videoElement.addEventListener('enterpictureinpicture', () => {
+A opção "Tela Cheia com F11" é bem útil, pois caso você queira deixar a sua webcam espelhada na tela toda você pode.
-document.querySelector("#pip").innerText = 'Desativar WebCam Flutuante';
+O CamDesktop tem função que parece boba, mais em muitos caso é bem útil. Imagine poder gravar a tela do seu computador mostrando sua webcam de um modo que você pode move-la para onde quiser, a melhor vantagem de todas é que você não precisa instalar nenhum outro software de webcam, é só acessar o site, dar a permissão para o navegador acessar sua webcam, apertar Enter e pronto, lá está sua webcam em janela flutuante.
-document.querySelector('.webcamContainer').scrollIntoView({
+{{ :inicio:camdesktop.webp }}
-behavior: 'smooth'
-});
-});
+===== O que eu posso fazer com o CamDesktop? =====
+Você pode manter sua webcam em filmagem constante e sobre todos os outros programas, de forma que você consiga assistir o tempo todo ao que está sendo capturado na câmera.
-videoElement.addEventListener('leavepictureinpicture', () => {
+===== O CamDesktop está disponível para quais plataformas? =====
+CamDesktop está disponível para Windows, Linux, MacOS, ChromeOS, Android e iOS. Você não precisa instalar nada, basta acessar o site CamDesktop e usar a ferramenta direto do site.
-document.querySelector("#pip").innerText = 'Ativar WebCam Flutuante';
+===== Como o CamDesktop funciona? =====
+O CamDesktop utiliza a função (PIP) Picture in Picture para deixar a imagem da sua webcam flutuante na tela do seu computador, notebook, celular ou tablet.
-document.querySelector('.webcamContainer').scrollIntoView({
-behavior: 'smooth'
-});
-});
-navigator.getUserMedia = navigator.getUserMedia ||
-navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
-window.URL = window.URL || window.webkitURL;
-function gotSources(deviceInfos) {
-// Handles being called several times to update labels. Preserve values.
-var values = selectors.map(function(select) {
-return select.value;
-});
-selectors.forEach(function(select) {
-while (select.firstChild) {
-select.removeChild(select.firstChild);
-}
-});
-for (var i = 0; i !== deviceInfos.length; ++i) {
-var deviceInfo = deviceInfos[i];
-var option = document.createElement('option');
-option.value = deviceInfo.deviceId;
-if (deviceInfo.kind === 'videoinput') {
-option.text = deviceInfo.label || 'WebCam ' + (videoSelect.length + 1);
-videoSelect.appendChild(option);
-} else {
-//console.log('Some other kind of source/device: ', deviceInfo);
-}
-}
-selectors.forEach(function(select, selectorIndex) {
-if (Array.prototype.slice.call(select.childNodes).some(function(n) {
-return n.value === values[selectorIndex];
-})) {
-select.value = values[selectorIndex];
-}
-});
-}
-navigator.mediaDevices.enumerateDevices().then(gotSources).catch(handleError);
-if (typeof MediaStreamTrack === "undefined" ||
-typeof MediaStreamTrack.getSources === "undefined") {
-// alert("This browser does not support MediaStreamTrack.\n\nTry Chrome.");
-} else {
-MediaStreamTrack.getSources(gotSources);
-}
-function successCallback(stream) {
-window.stream = stream; // make stream available to console
-videoElement.src = window.URL.createObjectURL(stream);
-videoElement.play();
-}
-function errorCallback(error) {
-console.log("navigator.getUserMedia error: ", error);
-}
-function gotStream(stream) {
-window.stream = stream; // make stream available to console
-videoElement.srcObject = stream;
-// Refresh button list in case labels have become available
-return navigator.mediaDevices.enumerateDevices();
-}
-function start() {
-document.querySelector("#webcam").style.background = '#000000';
-if (window.stream) {
-window.stream.getTracks().forEach(function(track) {
-track.stop();
-});
-}
-videoSizeAspectRatio = null;
-if(videoSize.value == '1/1'){
-videoSizeAspectRatio = 1/1;
-} else if(videoSize.value == '1/2'){
-videoSizeAspectRatio = 1/2;
-} else if(videoSize.value == '2/1'){
-videoSizeAspectRatio = 2/1;
-} else if(videoSize.value == '4/3'){
-videoSizeAspectRatio = 4/3;
-} else if(videoSize.value == '9/16'){
-videoSizeAspectRatio = 9/16;
-} else if(videoSize.value == '16/9'){
-videoSizeAspectRatio = 16/9;
-} else if(videoSize.value == '21/9'){
-videoSizeAspectRatio = 21/9;
-}
-var videoSource = videoSelect.value;
-var constraints = {
-video: {
-deviceId: videoSource ? {exact: videoSource} : undefined,
-aspectRatio: videoSizeAspectRatio
-}
-};
-navigator.mediaDevices.getUserMedia(constraints).
-then(gotStream).then(gotSources).catch(handleError);
-}
-function handleError(error) {
-console.log('navigator.getUserMedia error: ', error);
-}
-videoSelect.onchange = start;
-videoSize.onchange = start;
-document.addEventListener('DOMContentLoaded', () => {
-if(document.body.contains(videoElement) == true){
-console.log("existe");
-document.onkeydown = function(e) {
-//alert(e.which);
-if (e.which == 9) {
-document.querySelector("[data-action=toggle]").classList.toggle('hide');
-e.preventDefault();
-} else if ( e.which == 32) {
-document.querySelector("#save").click();
-e.preventDefault();
-} else if (e.which == 13) {
-document.querySelector("#pip").click();
-e.preventDefault();
-} else if (e.which == 122) {
-if (videoElement.requestFullscreen) {
-videoElement.requestFullscreen();
-} else if (videoElement.webkitRequestFullscreen) { /* Safari */
-videoElement.webkitRequestFullscreen();
-} else if (videoElement.msRequestFullscreen) { /* IE11 */
-videoElement.msRequestFullscreen();
-}
-e.preventDefault();
-}
-}
-}
-});
-function detectBrowser(){
-var userAgent = navigator.userAgent;
-var browserName = "";
-if(userAgent.match(/chrome|chromium|crios/i)){
-browserName = "chrome";
-} else if(userAgent.match(/firefox|fxios/i)){
-browserName = "firefox";
-} else if(userAgent.match(/safari/i)){
-browserName = "safari";
-} else if(userAgent.match(/opr\//i)){
-browserName = "opera";
-} else if(userAgent.match(/edg/i)){
-browserName = "edge";
-}
-return browserName;
-}
-function mobileCheck(){
-var check = "";
-(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = "mobile";})(navigator.userAgent||navigator.vendor||window.opera);
-return check;
-}
-document.querySelector(".tipsText p, #video").onclick = function(){
-document.querySelector("[data-action=toggle]").classList.toggle('hide');
-}
-// Take and Save Snapshot
-document.querySelector("#save").onclick = function() {
-canvas.width = document.querySelector("video").videoWidth;
-canvas.height = document.querySelector("video").videoHeight;
-ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
-snapshot.src = canvas.toDataURL("image/png");
-var iframe = Object.assign(document.createElement('iframe'), {
-onload() {
-var doc = this.contentDocument;
-var a = Object.assign(doc.createElement('a'), {
-href: canvas.toDataURL("image/png"),
-download: 'Ferramentas.Gratis - CamDesktop Foto ' + Math.floor(Date.now() / 1000) + '.png',
-});
-doc.body.appendChild(a);
-a.dispatchEvent(new MouseEvent('click'));
-setTimeout(() => this.remove());
-},
-style: 'display: none',
-});
-document.body.appendChild(iframe);
-};
-// Detect what operating system the user is using.
-if ( navigator.platform.toLowerCase() === "macintosh" || "macintel" || "macppc" || "mac68k" ) {
-window.onkeydown = function(e) {
-if ( e.metaKey && e.which == 82 ) {
-location.reload(true);
-}
-};
-} else {
-location.reload(true);
-}
-pip.addEventListener('click', function() {
-var permission_camera = "";
-if(detectBrowser() != "firefox"){
-navigator.permissions.query({ name: "camera" }).then(res => {
-permission_camera = res.state;
-});
-}
-if(permission_camera == "denied"){
-alert("Você precisa dar a permissão de câmera ao site, se não souber como dar a permissão, click no botão abaixo!");
-}
-if (document.pictureInPictureEnabled) {
-if (document.pictureInPictureElement) {
-document.exitPictureInPicture();
-} else {
-if (document.pictureInPictureEnabled) {
-videoElement.requestPictureInPicture();
-}
-}
-} else {
-alert("Ops... Houve um erro ao tentar habilitar o Modo Janela Flutuante, volte ao site, click com o botão direito do mouse em cima do player e selecione a opção Picture-in-Picture.");
-}
-});
-document.addEventListener('DOMContentLoaded', () => {
-if (!getCookie("webcamTrue")) {
-document.querySelector("#webcam").innerHTML = "<a id='webcamTrue' class='inline-block ripple text-white text-decoration-none' href='" + location.href.split("#")[0] + "'><div class='text-white card-title p-4 rounded-md shadow'><div class='text-xl p-4' style='text-shadow: 2px 2px 5px #555;'>Toque aqui para ativar o espelhamento da WebCam!</div><span class='mb-4 inline-flex items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm inline-flex items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm-lg inline-flex items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm-outline-dark' style='background: #1e293b;'><b>📷 Ativar WebCam</b></span></div></a>";
-document.querySelector("#webcamTrue").onclick = function() {
-setCookie("webcamTrue", true, 0);
-};
-} else {
-urlTutorialDarPermissoes = "/t104";
-if(mobileCheck()){
-urlTutorialDarPermissoes = "/t101";
-}
-if(detectBrowser() != "firefox"){
-navigator.permissions.query({ name: "camera" }).then(res => {
-if(res.state == "denied"){
-document.querySelector("#webcam").innerHTML = "<div class='text-xl inline-block text-white bg-red-500 p-4 rounded-md shadow'><div class='h5 mb-4' style='text-shadow: 2px 2px 5px #333;'>Você precisa dar a permissão de câmera ao site, se não souber como dar a pemissão, click no botão abaixo!</div><a class='inline-flex items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm inline-flex items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm-lg inline-flex items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm-outline-dark' href='" + urlTutorialDarPermissoes + "' target='_blank' rel='noopener' style='background: #1e293b;'>Tutorial de como dar Permissão de Câmera</a></div>";
-} else {
-document.querySelector("#textoPermissaoConcedida").style.display = "block";
-}
-});
-} else {
-document.querySelector("#textoPermissaoConcedida").style.display = "block";
-}
-start();
-}
-});
-document.querySelector("#desconectar").onclick = function() {
-setCookie("webcamTrue", "", -9999999);
-location.href = location.href.split("#")[0];
-};
-</script>
+===== O CamDesktop armazena alguma gravação da WebCam? =====
+NÃO! O CamDesktop apenas reproduz para você mesmo sua WebCam, é como se fosse um espelho, nunca iremos armazenar nenhuma gravação sua, NUNCA!
+==== Deixe um Comentário ====
+<html>
+<div class="disqus"></div>
 </html>