- **1.1.0**

- Add new JavaScript function: <b>Webrtc::getScreenShot()</b>. This function converts the RGB32 raw image to bitmap then to base64. The process is instantaneous and the base64 image could be used in JavaScript like this: ``` var image = new Image(); image.onload = function () { document.getElementById("mycanvas").getContext("2d").drawImage(image, 0, 0, width, height); }; image.src = "data:image/png;base64," + base64; ``` - Bug fix: - [Issue #6](../../issues/6): The active element tag flashes when the window is resized or scrolled - [Issue #7](../../issues/7): drawImage() function is toooo slooow - [Issue #8](../../issues/8): Color alignment issue in drawImage()
sarandogou · Jul 27, 2014 · 42ac42e · 42ac42e
1 parent 2a26493
commit 42ac42e
Show file tree

Hide file tree

Showing 18 changed files with 1,402 additions and 1,005 deletions.
diff --git a/README.md b/README.md
@@ -11,6 +11,8 @@ The following samples use our <a href="https://github.com/sarandogou/webrtc/blob
  - <a href="https://ns313841.ovh.net/webrtc/samples/web/content/getusermedia-resolution" target="_blank">Choose camera resolution</a>
  - <a href="https://ns313841.ovh.net/webrtc/samples/web/content/getusermedia-source" target="_blank">Choose camera and microphone</a>
  - <a href="https://ns313841.ovh.net/webrtc/samples/web/content/getusermedia-audio" target="_blank">Audio-only getUserMedia() output to local audio element</a>
+ - <a href="https://ns313841.ovh.net/webrtc/samples/web/content/getusermedia-canvas" target="_blank">getUserMedia() + Canvas</a> (<font color="red">slowness issue fixed in 1.1.0</font>)
+ - <a href="https://ns313841.ovh.net/webrtc/samples/web/content/getusermedia-filter" target="_blank">getUserMedia() + Canvas + CSS filters</a> (<font color="red">slowness issue fixed in 1.1.0</font>)
  - <a href="https://ns313841.ovh.net/webrtc/samples/web/content/peerconnection" target="_blank">Peer connection</a>
  - <a href="https://ns313841.ovh.net/webrtc/samples/web/content/peerconnection-audio" target="_blank">Audio-only peer connection</a>
  - <a href="https://ns313841.ovh.net/webrtc/samples/web/content/multiple" target="_blank">Multiple peer connections</a>
@@ -22,9 +24,6 @@ The following samples use our <a href="https://github.com/sarandogou/webrtc/blob
  - <a href="https://ns313841.ovh.net/webrtc/samples/web/content/create-offer" target="_blank">Display createOffer output</a>
  - <a href="https://ns313841.ovh.net/webrtc/samples/web/content/trickle-ice" target="_blank">ICE candidate gathering</a>
 
-next #2 samples work but are toooo sloooow (to be fixed):
- - <a href="https://ns313841.ovh.net/webrtc/samples/web/content/getusermedia-canvas" target="_blank">getUserMedia() + Canvas</a>
- - <a href="https://ns313841.ovh.net/webrtc/samples/web/content/getusermedia-filter" target="_blank">getUserMedia() + Canvas + CSS filters</a>
 
 # Using our plugin in your own project
  - Download and install the plugin for <a href="https://ns313841.ovh.net/webrtc/webrtc-everywhere-i386-10.4.dmg" target="_blank">MAC OSX</a> or <a href="https://ns313841.ovh.net/webrtc/setup.exe" target="_blank">Windows</a>
@@ -46,6 +45,19 @@ To build the source code you'll need Visual Studio 2013 (Windows) or Xcode (MAC
 # Release notes
  - **1.0.1**
 	- Initial release **without** support for DataChannel
+ - **1.1.0**
+	- Add new JavaScript function: <b>Webrtc::getScreenShot()</b>. This function converts the RGB32 raw image to bitmap then to base64. The process is instantaneous and the base64 image could be used in JavaScript like this:
+  ```
+	var image = new Image();
+	image.onload = function () {
+		document.getElementById("mycanvas").getContext("2d").drawImage(image, 0, 0, width, height);
+	};
+	image.src = "data:image/png;base64," + base64;
+  ```
+   - Bug fix:
+    	- [Issue #6](../../issues/6): The active element tag flashes when the window is resized or scrolled
+    	- [Issue #7](../../issues/7): drawImage() function is toooo slooow
+    	- [Issue #8](../../issues/8): Color alignment issue in drawImage()
 
 # License
  - Binaries and installers: All binaries and installers **from us** are released under **BSD** terms to allow using the project in your commercial products.

diff --git a/WebRTC.htm b/WebRTC.htm
@@ -1,7 +1,14 @@
 <HTML>
 <HEAD>
 <TITLE>ATL 8.0 test page for object WebRTC</TITLE>
-    <meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1" />
+<meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1" />
+
+<style type="text/css">
+    .overlay {
+        position: absolute;
+        margin-top: -0px;
+    }
+</style>
 </HEAD>
 
 <script type="text/javascript">
@@ -154,6 +161,7 @@
             }
             element.pluginObj = _pluginObj;
             if (_isIE || 1) {
+                _pluginObj.style = element.style;
                 _pluginObj.setAttribute('className', element.className);
                 _pluginObj.setAttribute('innerHTML', element.innerHTML);
                 var width = element.getAttribute("width");
@@ -225,13 +233,13 @@
                 audio: true,
                 video: {
                     mandatory: {
-                        /*minFrameRate: 15,
-                        maxFrameRate: 25,
+                        minFrameRate: 15,
+                        maxFrameRate: 25.5,
 
                         minWidth: 1280,
                         minHeight: 720,
                         maxWidth: 1280,
-                        maxHeight: 720*/
+                        maxHeight: 720
                     },
 
                     optional: []
@@ -253,32 +261,33 @@
 }
 
 function _screenshot() {
-    var elVideo = document.getElementById("myvideo_local");
-    if (elVideo) {
-        var elCanvas = document.getElementById("mycanvas");
-        var ctx2d = elCanvas.getContext("2d");
-        if (elVideo.videoWidth > 0 && elVideo.videoHeight > 0) {
-            var imageData = ctx2d.createImageData(elVideo.videoWidth, elVideo.videoHeight);
-            if (imageData) {
-                elVideo.fillImageData(imageData);
-                ctx2d.putImageData(imageData, 0, 0); // at (0,0)
+    if (video) {
+        if (video.videoWidth > 0 && video.videoHeight > 0) {
+            var elCanvas = document.getElementById("mycanvas");
+            var ctx2d = elCanvas.getContext("2d");
+            if (typeof video.getScreenShot !== "undefined") {
+                var bmpBase64 = video.getScreenShot();
+                if (bmpBase64) {
+                    var image = new Image();
+                    image.onload = function () {
+                        ctx2d.drawImage(image, 0, 0, elCanvas.width, elCanvas.height);
+                    };
+                    image.src = "data:image/png;base64," + bmpBase64;
+                }
+            }
+            else {
+                var imageData = ctx2d.createImageData(video.videoWidth, video.videoHeight);
+                if (imageData) {
+                    video.fillImageData(imageData);
+                    ctx2d.putImageData(imageData, 0, 0); // at (0,0)
+                }
             }
         }
     }
 }
 
 window.onload = function () {
-
     var completeStyle = window.getComputedStyle(myvideo_local, null);
-    /*var eltDIV = document.createElement('div');
-    eltDIV.style.cssText = "width:100px; height:100px; visibility:visible;";
-    eltDIV.onload = function () { alert("OOO"); }
-    //eltDIV.addEventListener("load", function () { alert("OOO"); })
-    document.body.appendChild(eltDIV);
-    eltDIV.innerHTML = "<object id=\"WebrtcEverywhere\" "
-    + (((Object.getOwnPropertyDescriptor && Object.getOwnPropertyDescriptor(window, "ActiveXObject")) || ("ActiveXObject" in window))? "classid=\"clsid:7FD49E23-C8D7-4C4F-93A1-F7EACFA1EC53\"" : "type=\"application/webrtc-everywhere\"")
-    + " width=\"1px\" height=\"1px\" style=\"visibility:visible\"> </object>";
-    */
     // IE11: "window.ActiveXObject" not defined -> http://msdn.microsoft.com/en-us/library/ie/dn423948%28v=vs.85%29.aspx
     var pluginObj = document.createElement('object');
     if ((Object.getOwnPropertyDescriptor && Object.getOwnPropertyDescriptor(window, "ActiveXObject")) || ("ActiveXObject" in window)) {
@@ -294,22 +303,26 @@
 
 </script>
 
-<BODY>
-    <canvas id="mycanvas" width="100px" height="100px"></canvas>
-    <video id="myvideo_local" style="background-color: #000000;">
-        <!--object id="video_local" width="500px" height="500px" type="application/webrtc-everywhere"></object-->
-    </video>
-
-    <!--object id="video_local" width="50px" height="50px" type="application/webrtc-everywhere" style="background-color: #000000;"></object-->
+<body>
+    <div>
+        <div style="border:0px solid #000; margin-top: 42px; z-index: 10">
+            <video id="myvideo_local" style="background-color: #000000; margin-top: 42px; z-index: 10">
+                <!--object id="video_local" width="500px" height="500px" type="application/webrtc-everywhere"></object-->
+            </video>
+        </div>
+        <div>
+            <iframe class="overlay" style="border:0px solid #009; z-index: 1000"> </iframe>
+            <div id="div2" class="overlay" style='border:0px solid #009; z-index: 10000'>
+                <input type="button" value="getUserMedia" onclick='_getUserMedia();' /> &nbsp;
+                <input type="button" value="screenshot" onclick='_screenshot();' /> &nbsp;
+                <input type="button" value="peerConnection" onclick='_peerConnection();' /> &nbsp;
+                <input type="button" value="stop" onclick='_stop();' /> &nbsp;
+            </div>
+        </div>
+    </div>
+    <canvas id="mycanvas" width="250px" height="250px" style="margin-top: 72px; border:1px solid #000; z-index: 10"></canvas>
 
-    <br />
-    <br />
-    <br />
 
-    <input type="button" id="btn_getUserMedia" value="getUserMedia" onclick='_getUserMedia();' />
-    <input type="button" value="screenshot" onclick='_screenshot();' />
-    <input type="button" value="peerConnection" onclick='_peerConnection();' />
-    <input type="button" value="stop" onclick='_stop();' />
-
-</BODY>
+    <!--object id="video_local" width="50px" height="50px" type="application/webrtc-everywhere" style="background-color: #000000;"></object-->
+</body>
 </HTML>
diff --git a/common/_Config.h b/common/_Config.h
@@ -15,10 +15,10 @@
 #	define kPluginVersionMajor 1
 #endif
 #if !defined(kPluginVersionMinor)
-#	define kPluginVersionMinor 0
+#	define kPluginVersionMinor 1
 #endif
 #if !defined(kPluginVersionMicro)
-#	define kPluginVersionMicro 1
+#	define kPluginVersionMicro 0
 #endif
 #if !defined(kPluginVersionString)
 #	define kPluginVersionString WE_STRING(WE_CAT(kPluginVersionMajor, .)) WE_STRING(WE_CAT(kPluginVersionMinor, .)) WE_STRING(kPluginVersionMicro)