1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
---
title: Manipular video por medio de canvas
slug: Web/API/Canvas_API/Manipulating_video_using_canvas
tags:
- Canvas
- Firefox 3.5
- Video
- para_revisar
translation_of: Web/API/Canvas_API/Manipulating_video_using_canvas
original_slug: Web/HTML/anipular_video_por_medio_de_canvas
---
<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Al combinar las capacidades del elemento </span></span><a class="internal" href="/En/HTML/Element/Video" title="En/HTML/Element/Video"><code>video</code></a><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""> introducido en Firefox 3.5 con un elemento </span></span><a class="internal" href="/en/HTML/Canvas" title="En/Canvas"><code>canvas</code></a><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""> , puedes manipular los datos de video en tiempo real para incorporar una variedad de efectos visuales que se mostrarán en el video.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este artículo, adaptado de <a class="external" href="http://blog.mozbox.org/post/2009/02/25/video-canvas%3A-special-effects">esta entrada del blog</a> de Paul Rouget, muestra cómo realizar una inserción croma (también conocida como el "efecto pantalla verde") utilizando el código JavaScript.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><a href="/samples/video/chroma-key/index.xhtml" title="samples/video/chroma-key/index.xhtml">Ver este ejemplo en vivo</a> .</span></span></p>
<h2 id="El_contenido_del_documento"><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El contenido del documento</span></span></h2>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El documento XHTML que se utiliza para representar este contenido se muestra a continuación.</span></span></p>
<pre class="brush: html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {
background: black;
color:#CCCCCC;
}
#c2 {
background-image: url(foo.png);
background-repeat: no-repeat;
}
div {
float: left;
border :1px solid #444444;
padding:10px;
margin: 10px;
background:#3B3B3B;
}
</style>
<script type="text/javascript;version=1.8" src="main.js"></script>
</head>
<body onload="processor.doLoad()">
<div>
<video id="video" src="video.ogv" controls="true"/>
</div>
<div>
<canvas id="c1" width="160" height="96"/>
<canvas id="c2" width="160" height="96"/>
</div>
</body>
</html>
</pre>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los puntos clave a tener en cuenta son:</span></span></p>
<ol>
<li><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este documento establece dos elemento <a class="internal"><code>canvas</code></a> , con los identificadores de <code>c1</code> y <code>c2</code> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Canvas <code>c1</code> se utiliza para mostrar la imagen actual del video original, mientras que <code>c2</code> se utiliza para mostrar el video después de realizar la manipulación con el efecto croma; <code>c2</code> se carga previamente con la imagen fija que se utilizará para sustituir el fondo verde en el video.</span></span></li>
<li><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El código JavaScript es importado de un script llamado <code>main.js</code> ; este script utiliza JavaScript 1.8 características, de modo que la versión se especifica en la línea 22 al importar la secuencia de comandos.</span></span></li>
<li><span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Cuando se carga el documento, se ejecuta el método <code>processor.doLoad()</code> de <code>main.js</code>.</span></span></li>
</ol>
<h2 id="El_código_JavaScript"><span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El código JavaScript</span></span></h2>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El código JavaScript en <code>main.js</code> consta de tres métodos.</span></span></p>
<h3 id="Inicializar_el_reproductor_de_croma"><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Inicializar el reproductor de croma</span></span></h3>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El método <code>doLoad()</code> se llama cuando el documento XHTML se carga inicialmente.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La función de este método es preparar las variables necesarias para el código de procesamiento del croma y la creación de un detector de eventos para que podamos detectar cuándo inicia el usuario la reproducción del video.</span></span></p>
<pre class="brush: js"> doLoad: function() {
this.video = document.getElementById("video");
this.c1 = document.getElementById("c1");
this.ctx1 = this.c1.getContext("2d");
this.c2 = document.getElementById("c2");
this.ctx2 = this.c2.getContext("2d");
let self = this;
this.video.addEventListener("play", function() {
self.width = self.video.videoWidth / 2;
self.height = self.video.videoHeight / 2;
self.timerCallback();
}, false);
},
</pre>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-65"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este código obtiene referencias a los elementos del documento XHTML que son de particular interés, a saber, el elemento <code>video</code> y los dos elementos <code>canvas</code>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-66"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">También recupera las referencias a los contextos gráficos para cada uno de los dos elementos canvas.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Estos serán utilizados cuando estamos haciendo de verdad el efecto croma.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-68"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Luego <code>addEventListener()</code> es llamado para empezar a ver el elemento <code>video</code> de forma que podamos obtener una notificación cuando el usuario presione el botón de reproducción en el video.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-69"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En respuesta al usuario que inicia la reproducción, el código obtiene la anchura y la altura de video, reduciendo a la mitad cada uno (vamos a reducir a la mitad el tamaño del video, cuando llevamos a cabo la manipulación efecto croma). A continuación, llama al método <code>timerCallback()</code> para iniciar el visionado del video y la computación del efecto visual.</span></span></p>
<h3 id="La_devolución_de_llamada_del_temporizador"><span class="goog-gtc-unit" id="goog-gtc-unit-70"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">La devolución de llamada del temporizador</span></span></h3>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La devolución de llamada del temporizador se llama inicialmente cuando el video comienza a reproducirse (cuando tiene lugar el evento "reproducir"), a continuación, toma la responsabilidad por la que se establece a sí mismo para ser llamado periódicamente, a fin de poner en marcha el efecto croma para cada imagen.</span></span></p>
<pre class="brush: js"> timerCallback: function() {
if (this.video.paused || this.video.ended) {
return;
}
this.computeFrame();
let self = this;
setTimeout(function () {
self.timerCallback();
}, 0);
},
</pre>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-82"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Lo primero que la devolución de llamada hace es comprobar si el video se está aún reproduciendo, y si no lo está, la devolución de llamada regresa inmediatamente sin hacer nada.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-83"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">A continuación, llama al método <code>computeFrame()</code>, que lleva a cabo la manipulación del efecto croma en la imagen de video actual.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-84"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Lo último que la devolución de llamada hace es llamar a <code>setTimeout()</code> para programarse para ser llamado lo más pronto posible.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-85"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En el mundo real, es probable que programes esto en función de la velocidad de fotogramas del video.</span></span></p>
<h3 id="Manipulación_de_los_datos_de_la_imagen_del_video"><span class="goog-gtc-unit" id="goog-gtc-unit-86"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Manipulación de los datos de la imagen del video</span></span></h3>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-87"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El método <code>computeFrame()</code>, que se muestra a continuación, se encarga de ir a buscar realmente un fotograma de datos y realizar el efecto croma.</span></span></p>
<pre class="brush: js"> computeFrame: function() {
this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
let l = frame.data.length / 4;
for (let i = 0; i < l; i++) {
let r = frame.data[i * 4 + 0];
let g = frame.data[i * 4 + 1];
let b = frame.data[i * 4 + 2];
if (g > 100 && r > 100 && b < 43)
frame.data[i * 4 + 3] = 0;
}
this.ctx2.putImageData(frame, 0, 0);
return;
}
</pre>
<p>Cuando esta rutina es llamada, el elemento video muestra el fotograma de datos de video más reciente, que tiene este aspecto:</p>
<p><img alt="video.png" class="internal default" src="/@api/deki/files/3282/=video.png" style="width: 320px; height: 192px;"></p>
<p>En la línea 2, ese fotograma de video se copia al contexto gráfico <code>ctx1</code> del primer lienzo, especificando como alto y ancho los valores que previamente guardamos para dibujar el fotograma a mitad de tamaño. <span class="goog-gtc-unit" id="goog-gtc-unit-104"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Ten en cuenta que puedes pasar simplemente el elemento de video al método <code>drawImage()</code> del contexto para dibujar el fotograma de video actual en dicho contexto.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-105"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">El resultado es:</span></span></p>
<p><img alt="sourcectx.png" class="internal default" src="/@api/deki/files/3284/=sourcectx.png" style="width: 160px; height: 96px;"></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-106"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Línea 3 obtiene una copia de los datos gráficos del actual fotograma de video llamando al método <code>getImageData()</code> en el primer contexto.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-107"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esto proporciona los datos de imagen en píxeles de 32 bits sin procesar que podemos después manipular.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-108"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Línea 4 calcula el número de píxeles de la imagen al dividir entre cuatro el tamaño total de los datos de la imagen del fotograma.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-109"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El bucle <code>for</code> que comienza en la línea 6 explora a través de los píxeles del fotograma, extrayendo los valores rojo, verde y azul para cada píxel, y compara los valores frente a números predeterminados que se utilizan para detectar la pantalla verde que se reemplazará por la imagen de fondo fija importada de <code>foo.png</code> .</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-110"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Cada píxel de datos de imagen del fotograma que se encuentra que está dentro de los parámetros que se consideran parte de la pantalla verde tiene su valor alfa reemplazado por un cero, lo que indica que el píxel es totalmente transparente.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-111"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Como resultado, la imagen final tiene toda el área de pantalla verde 100% transparente, de modo que cuando se dibuja en el contexto de destino en la línea 13, el resultado es una superposición sobre el fondo estático.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-112"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">La imagen resultante tiene este aspecto:</span></span></p>
<p><img alt="output.png" class="internal default" src="/@api/deki/files/3283/=output.png" style="width: 161px; height: 96px;"></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-113"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esto se hace en varias ocasiones mientras el video se reproduce, de manera que fotograma tras fotograma se procesa y se muestra con el efecto de croma.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-114"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><a href="/samples/video/chroma-key/index.xhtml" title="samples/video/chroma-key/index.xhtml">Ver este ejemplo en vivo</a> .</span></span></p>
<h2 id="Consulta_también"><span class="goog-gtc-unit" id="goog-gtc-unit-115"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Consulta también</span></span></h2>
<ul>
<li><a class="internal" href="/es/Usando_audio_y_video_en_Firefox" title="es/Usando audio y video en Firefox"><span class="goog-gtc-unit" id="goog-gtc-unit-116"><span class="goog-gtc-translatable goog-gtc-from-tm goog-gtc-from-tm-score-100" dir="ltr" style="">Usar audio y video en Firefox</span></span></a></li>
</ul>
<p>{{ languages ( { "en": "En/Manipulating_video_using_canvas" } ) }}</p>
|
