@@ -29,6 +29,7 @@ function StreamVisualizer(remoteStream, canvas) {
29
29
console . log ( 'Creating StreamVisualizer with remoteStream and canvas: ' ,
30
30
remoteStream , canvas ) ;
31
31
this . canvas = canvas ;
32
+ this . drawContext = this . canvas . getContext ( '2d' ) ;
32
33
33
34
// cope with browser differences
34
35
if ( typeof AudioContext === 'function' ) {
@@ -68,9 +69,7 @@ StreamVisualizer.prototype.draw = function() {
68
69
this . analyser . getByteFrequencyData ( this . freqs ) ;
69
70
this . analyser . getByteTimeDomainData ( this . times ) ;
70
71
71
- // var width = Math.floor(1/this.freqs.length, 10);
72
72
73
- var drawContext = this . canvas . getContext ( '2d' ) ;
74
73
this . canvas . width = WIDTH ;
75
74
this . canvas . height = HEIGHT ;
76
75
// Draw the frequency domain chart.
@@ -81,8 +80,8 @@ StreamVisualizer.prototype.draw = function() {
81
80
var offset = HEIGHT - height - 1 ;
82
81
var barWidth = WIDTH / this . analyser . frequencyBinCount ;
83
82
var hue = i / this . analyser . frequencyBinCount * 360 ;
84
- drawContext . fillStyle = 'hsl(' + hue + ', 100%, 50%)' ;
85
- drawContext . fillRect ( i * barWidth , offset , barWidth , height ) ;
83
+ this . drawContext . fillStyle = 'hsl(' + hue + ', 100%, 50%)' ;
84
+ this . drawContext . fillRect ( i * barWidth , offset , barWidth , height ) ;
86
85
}
87
86
88
87
// Draw the time domain chart.
@@ -92,8 +91,8 @@ StreamVisualizer.prototype.draw = function() {
92
91
height = HEIGHT * percent ;
93
92
offset = HEIGHT - height - 1 ;
94
93
barWidth = WIDTH / this . analyser . frequencyBinCount ;
95
- drawContext . fillStyle = 'white' ;
96
- drawContext . fillRect ( i * barWidth , offset , 1 , 2 ) ;
94
+ this . drawContext . fillStyle = 'white' ;
95
+ this . drawContext . fillRect ( i * barWidth , offset , 1 , 2 ) ;
97
96
}
98
97
99
98
requestAnimationFrame ( this . draw . bind ( this ) ) ;
0 commit comments