opentok-annotation - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

package.json

		{
		"name": "opentok-annotation",
		"version": "2.0.2",
		"version": "2.0.3",
		"description": "OpenTok annotation accelerator pack",
		@@ -5,0 +5,0 @@ "main": "dist/opentok-annotation.js",

src/acc-pack-annotation.js

		@@ -237,3 +237,3 @@ /* global OT OTSolution OTKAnalytics ScreenSharingAccPack define */
		var height = width / (_aspectRatio);
		var externalWindowHTML = '<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>OpenTok Screen Sharing Solution Annotation</title><style type="text/css" media="screen"> body{margin:0;background-color:rgba(0,153,203,.7);box-sizing:border-box;height:100vh}canvas{top:0;z-index:1000}.hidden{display:none}.main-wrap{width:100%;height:100%;-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center}.inner-wrap{position:relative;border-radius:8px;overflow:hidden}.ots-annotation-toolbar-container{position:fixed;top:125px;right:0;width:60px;z-index:1000;background-color:#666}.ots-annotation-toolbar-container .OT_panel{display:flex;flex-direction:column;align-items:center}.ots-annotation-toolbar-container .annotation-btn{height:60px;width:60px;background-position:center center;background-repeat:no-repeat!important;background-color:#666;cursor:pointer;border:none}.ots-annotation-toolbar-container .annotation-btn.pen{background-image:url(https://assets.tokbox.com/solutions/images/annotation-pencil.png);background-size:27px 30px}.ots-annotation-toolbar-container .annotation-btn.colors{width:23px;height:24px;border:3px solid #fff;margin:18px 18.5px}.ots-annotation-toolbar-container .annotation-btn.line{background-image:url(https://assets.tokbox.com/solutions/images/annotation-line.png);background-size:26px 31px}.ots-annotation-toolbar-container .annotation-btn.line-width{background-image:url(https://assets.tokbox.com/solutions/images/annotation-line_width.png);background-size:26px 31px}.ots-annotation-toolbar-container .annotation-btn.shapes{background-image:url(https://assets.tokbox.com/solutions/images/annotation-shapes.png);background-size:26px 31px}.ots-annotation-toolbar-container .annotation-btn.text{background-image:url(https://assets.tokbox.com/solutions/images/annotation-text.png);background-size:21px 25px}.ots-annotation-toolbar-container .annotation-btn.capture{background-image:url(https://assets.tokbox.com/solutions/images/annotation-camera.png);background-size:34px 31px}.ots-annotation-toolbar-container .annotation-btn.clear{background-image:url(https://assets.tokbox.com/solutions/images/annotation-clear.png);background-size:31px 31px}.ots-annotation-toolbar-container .annotation-btn.undo{background-image:url(https://assets.tokbox.com/solutions/images/annotation-undo.png);background-size:34px 31px}.ots-annotation-toolbar-container .OT_subpanel,.ots-annotation-toolbar-container .color-picker{position:absolute;right:65px;width:40px;background-color:#333;display:flex;flex-direction:column;align-items:center;transition:opacity .5s ease-out}.ots-annotation-toolbar-container .OT_subpanel.pen{top:0}.ots-annotation-toolbar-container .OT_subpanel.pen .line-width-option{width:40px;height:40px;cursor:pointer}.ots-annotation-toolbar-container .OT_subpanel.pen:after,.ots-annotation-toolbar-container .color-picker:after{width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:15px solid #333;right:-15px;content:"";position:absolute}.ots-annotation-toolbar-container .OT_subpanel.pen:after{top:15px}.ots-annotation-toolbar-container .color-picker{top:0}.ots-annotation-toolbar-container .color-picker:after{top:75px}.ots-annotation-toolbar-container .color-picker .color-choice{width:20px;height:20px;margin:10px;cursor:pointer;border-radius:100%}.ots-annotation-toolbar-container .color-picker .color-choice.active{border:2px solid #fff}.ots-annotation-toolbar-container .OT_subpanel.shapes{display:flex;flex-direction:column;top:75px;min-height:159.89px}.ots-annotation-toolbar-container .OT_subpanel.shapes:after{position:absolute;top:62.5px;right:-15px;content:"";width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:15px solid #333}.ots-annotation-toolbar-container .OT_subpanel.shapes input{width:22px;height:22px;margin:9px;border:none;background-color:#333;background-repeat:no-repeat;background-position:center center}.ots-annotation-toolbar-container .OT_subpanel.shapes .annotation-btn.rectangle{background-image:url(https://assets.tokbox.com/solutions/images/annotation-rectangle.png);background-size:18px 18px}.ots-annotation-toolbar-container .OT_subpanel.shapes .annotation-btn.rectangle-fill{background-image:url(https://assets.tokbox.com/solutions/images/annotation-rectangle-fill.png);background-size:18px 18px}.ots-annotation-toolbar-container .OT_subpanel.shapes .annotation-btn.oval{background-image:url(https://assets.tokbox.com/solutions/images/annotation-oval.png);background-size:20px 20px}.ots-annotation-toolbar-container .OT_subpanel.shapes .annotation-btn.oval-fill{background-image:url(https://assets.tokbox.com/solutions/images/annotation-oval-fill.png);background-size:20px 20px}.ots-annotation-toolbar-container .OT_subpanel.shapes .annotation-btn.star{background-image:url(https://assets.tokbox.com/solutions/images/annotation-star.png);background-size:22px 22px}.ots-annotation-toolbar-container .OT_subpanel.shapes .annotation-btn.arrow{background-image:url(https://assets.tokbox.com/solutions/images/annotation-arrow.png);background-size:6.5px 23.5px}.publisherContainer{display:block;background-color:#000;position:absolute}.publisher-wrap{height:100%;width:100%}.subscriberContainer{position:absolute;top:20px;left:20px;width:200px;height:120px;background-color:#000;border:2px solid #fff;border-radius:6px}.subscriberContainer .OT_video-poster{width:100%;height:100%;opacity:.25;background-repeat:no-repeat;background-image:url(https://static.opentok.com/webrtc/v2.8.2/images/rtc/audioonly-silhouette.svg);background-size:50%;background-position:center}.OT_video-element{height:100%;width:100%}.OT_edge-bar-item{display:none}</style></head><body> <div class="main-wrap"> <div id="annotationContainer" class="inner-wrap"></div></div><div id="toolbarContainer" class="fixed-container"> <div id="toolbar" class="toolbar-wrap"></div></div><div id="subscriberVideo" class="subscriberContainer hidden"></div><script type="text/javascript" charset="utf-8"> /** Must use double-quotes since everything must be converted to a string */ var opener; var canvas; if (!toolbar){alert("Something went wrong: You must pass an OpenTok annotation toolbar object into the window.")}else{opener=window.opener; window.onbeforeunload=window.triggerCloseEvent;}var localScreenProperties={insertMode: "append", width: "100%", height: "100%", videoSource: "window", showControls: false, style:{buttonDisplayMode: "off"}, subscribeToVideo: "true", subscribeToAudio: "false", fitMode: "contain"}; var createContainerElements=function(){var parentDiv=document.getElementById("annotationContainer"); var publisherContainer=document.createElement("div"); publisherContainer.setAttribute("id", "screenshare_publisher"); publisherContainer.classList.add("publisher-wrap"); parentDiv.appendChild(publisherContainer); return{annotation: parentDiv, publisher: publisherContainer};}; var addSubscriberVideo=function(stream){var container=document.getElementById("subscriberVideo"); var subscriber=session.subscribe(stream, container, localScreenProperties, function(error){if (error){console.log("Failed to add subscriber video", error);}container.classList.remove("hidden");});}; if (navigator.userAgent.indexOf("Firefox") !==-1){var ghost=window.open("about:blank"); ghost.focus(); ghost.close();}</script></body></html>';
		var externalWindowHTML = '<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>OpenTok Screen Sharing Solution Annotation</title><style type="text/css" media="screen"> body{margin:0;background-color:rgba(0,153,203,.7);box-sizing:border-box;height:100vh}canvas{top:0;z-index:1000}.hidden{display:none}.main-wrap{width:100%;height:100%;-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center}.inner-wrap{position:relative;border-radius:8px;overflow:hidden}.ots-annotation-toolbar-container{position:fixed;top:125px;right:0;width:60px;z-index:1000;background-color:#666}.ots-annotation-toolbar-container .OT_panel{display:flex;flex-direction:column;align-items:center}.ots-annotation-toolbar-container .annotation-btn{height:60px;width:60px;background-position:center center;background-repeat:no-repeat!important;background-color:#666;cursor:pointer;border:none}.ots-annotation-toolbar-container .annotation-btn.pen{background-image:url(https://assets.tokbox.com/solutions/images/annotation-pencil.png);background-size:27px 30px}.ots-annotation-toolbar-container .annotation-btn.colors{width:23px;height:24px;border:3px solid #fff;margin:18px 18.5px}.ots-annotation-toolbar-container .annotation-btn.line{background-image:url(https://assets.tokbox.com/solutions/images/annotation-line.png);background-size:26px 31px}.ots-annotation-toolbar-container .annotation-btn.line-width{background-image:url(https://assets.tokbox.com/solutions/images/annotation-line_width.png);background-size:26px 31px}.ots-annotation-toolbar-container .annotation-btn.shapes{background-image:url(https://assets.tokbox.com/solutions/images/annotation-shapes.png);background-size:26px 31px}.ots-annotation-toolbar-container .annotation-btn.text{background-image:url(https://assets.tokbox.com/solutions/images/annotation-text.png);background-size:21px 25px}.ots-annotation-toolbar-container .annotation-btn.capture{background-image:url(https://assets.tokbox.com/solutions/images/annotation-camera.png);background-size:34px 31px}.ots-annotation-toolbar-container .annotation-btn.clear{background-image:url(https://assets.tokbox.com/solutions/images/annotation-clear.png);background-size:31px 31px}.ots-annotation-toolbar-container .annotation-btn.undo{background-image:url(https://assets.tokbox.com/solutions/images/annotation-undo.png);background-size:34px 31px}.ots-annotation-toolbar-container .OT_subpanel,.ots-annotation-toolbar-container .color-picker{position:absolute;right:65px;width:40px;background-color:#333;display:flex;flex-direction:column;align-items:center;transition:opacity .5s ease-out}.ots-annotation-toolbar-container .OT_subpanel.pen{top:0}.ots-annotation-toolbar-container .OT_subpanel.pen .line-width-option{width:40px;height:40px;cursor:pointer}.ots-annotation-toolbar-container .OT_subpanel.pen:after,.ots-annotation-toolbar-container .color-picker:after{width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:15px solid #333;right:-15px;content:"";position:absolute}.ots-annotation-toolbar-container .OT_subpanel.pen:after{top:15px}.ots-annotation-toolbar-container .color-picker{top:0}.ots-annotation-toolbar-container .color-picker:after{top:75px}.ots-annotation-toolbar-container .color-picker .color-choice{width:20px;height:20px;margin:10px;cursor:pointer;border-radius:100%}.ots-annotation-toolbar-container .color-picker .color-choice.active{border:2px solid #fff}.ots-annotation-toolbar-container .OT_subpanel.shapes{display:flex;flex-direction:column;top:75px;min-height:159.89px}.ots-annotation-toolbar-container .OT_subpanel.shapes:after{position:absolute;top:62.5px;right:-15px;content:"";width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:15px solid #333}.ots-annotation-toolbar-container .OT_subpanel.shapes input{width:22px;height:22px;margin:9px;border:none;background-color:#333;background-repeat:no-repeat;background-position:center center}.ots-annotation-toolbar-container .OT_subpanel.shapes .annotation-btn.rectangle{background-image:url(https://assets.tokbox.com/solutions/images/annotation-rectangle.png);background-size:18px 18px}.ots-annotation-toolbar-container .OT_subpanel.shapes .annotation-btn.rectangle-fill{background-image:url(https://assets.tokbox.com/solutions/images/annotation-rectangle-fill.png);background-size:18px 18px}.ots-annotation-toolbar-container .OT_subpanel.shapes .annotation-btn.oval{background-image:url(https://assets.tokbox.com/solutions/images/annotation-oval.png);background-size:20px 20px}.ots-annotation-toolbar-container .OT_subpanel.shapes .annotation-btn.oval-fill{background-image:url(https://assets.tokbox.com/solutions/images/annotation-oval-fill.png);background-size:20px 20px}.ots-annotation-toolbar-container .OT_subpanel.shapes .annotation-btn.star{background-image:url(https://assets.tokbox.com/solutions/images/annotation-star.png);background-size:22px 22px}.ots-annotation-toolbar-container .OT_subpanel.shapes .annotation-btn.arrow{background-image:url(https://assets.tokbox.com/solutions/images/annotation-arrow.png);background-size:6.5px 23.5px}.publisherContainer{display:block;background-color:#000;position:absolute}.publisher-wrap{height:100%;width:100%}.subscriberContainer{position:absolute;top:20px;left:20px;width:200px;height:120px;background-color:#000;border:2px solid #fff;border-radius:6px}.subscriberContainer .OT_video-poster{width:100%;height:100%;opacity:.25;background-repeat:no-repeat;background-image:url(https://static.opentok.com/webrtc/v2.8.2/images/rtc/audioonly-silhouette.svg);background-size:50%;background-position:center}.OT_video-element{height:100%;width:100%}.OT_edge-bar-item{display:none}</style></head><body> <div class="main-wrap"> <div id="annotationContainer" class="inner-wrap"></div></div><div id="toolbarContainer" class="ots-annotation-toolbar-container"> <div id="toolbar" class="toolbar-wrap"></div></div><div id="subscriberVideo" class="subscriberContainer hidden"></div><script type="text/javascript" charset="utf-8"> /** Must use double-quotes since everything must be converted to a string */ var opener; var canvas; if (!toolbar){alert("Something went wrong: You must pass an OpenTok annotation toolbar object into the window.")}else{opener=window.opener; window.onbeforeunload=window.triggerCloseEvent;}var localScreenProperties={insertMode: "append", width: "100%", height: "100%", videoSource: "window", showControls: false, style:{buttonDisplayMode: "off"}, subscribeToVideo: "true", subscribeToAudio: "false", fitMode: "contain"}; var createContainerElements=function(){var parentDiv=document.getElementById("annotationContainer"); var publisherContainer=document.createElement("div"); publisherContainer.setAttribute("id", "screenshare_publisher"); publisherContainer.classList.add("publisher-wrap"); parentDiv.appendChild(publisherContainer); return{annotation: parentDiv, publisher: publisherContainer};}; var addSubscriberVideo=function(stream){var container=document.getElementById("subscriberVideo"); var subscriber=session.subscribe(stream, container, localScreenProperties, function(error){if (error){console.log("Failed to add subscriber video", error);}container.classList.remove("hidden");});}; if (navigator.userAgent.indexOf("Firefox") !==-1){var ghost=window.open("about:blank"); ghost.focus(); ghost.close();}</script></body></html>';

		@@ -240,0 +240,0 @@ /* eslint-disable max-len */

templates/screenshare.js

		@@ -7,2 +7,2 @@

		var template = '<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>OpenTok Screen Sharing Solution Annotation</title><style type="text/css" media="screen"> body{margin:0;background-color:rgba(0,153,203,.7);box-sizing:border-box;height:100vh}canvas{top:0;z-index:1000}.hidden{display:none}.main-wrap{width:100%;height:100%;-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center}.inner-wrap{position:relative;border-radius:8px;overflow:hidden}.ots-annotation-toolbar-container{position:fixed;top:125px;right:0;width:60px;z-index:1000;background-color:#666}.ots-annotation-toolbar-container .OT_panel{display:flex;flex-direction:column;align-items:center}.ots-annotation-toolbar-container .annotation-btn{height:60px;width:60px;background-position:center center;background-repeat:no-repeat!important;background-color:#666;cursor:pointer;border:none}.ots-annotation-toolbar-container .annotation-btn.pen{background-image:url(https://assets.tokbox.com/solutions/images/annotation-pencil.png);background-size:27px 30px}.ots-annotation-toolbar-container .annotation-btn.colors{width:23px;height:24px;border:3px solid #fff;margin:18px 18.5px}.ots-annotation-toolbar-container .annotation-btn.line{background-image:url(https://assets.tokbox.com/solutions/images/annotation-line.png);background-size:26px 31px}.ots-annotation-toolbar-container .annotation-btn.line-width{background-image:url(https://assets.tokbox.com/solutions/images/annotation-line_width.png);background-size:26px 31px}.ots-annotation-toolbar-container .annotation-btn.shapes{background-image:url(https://assets.tokbox.com/solutions/images/annotation-shapes.png);background-size:26px 31px}.ots-annotation-toolbar-container .annotation-btn.text{background-image:url(https://assets.tokbox.com/solutions/images/annotation-text.png);background-size:21px 25px}.ots-annotation-toolbar-container .annotation-btn.capture{background-image:url(https://assets.tokbox.com/solutions/images/annotation-camera.png);background-size:34px 31px}.ots-annotation-toolbar-container .annotation-btn.clear{background-image:url(https://assets.tokbox.com/solutions/images/annotation-clear.png);background-size:31px 31px}.ots-annotation-toolbar-container .annotation-btn.undo{background-image:url(https://assets.tokbox.com/solutions/images/annotation-undo.png);background-size:34px 31px}.ots-annotation-toolbar-container .OT_subpanel,.ots-annotation-toolbar-container .color-picker{position:absolute;right:65px;width:40px;background-color:#333;display:flex;flex-direction:column;align-items:center;transition:opacity .5s ease-out}.ots-annotation-toolbar-container .OT_subpanel.pen{top:0}.ots-annotation-toolbar-container .OT_subpanel.pen .line-width-option{width:40px;height:40px;cursor:pointer}.ots-annotation-toolbar-container .OT_subpanel.pen:after,.ots-annotation-toolbar-container .color-picker:after{width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:15px solid #333;right:-15px;content:"";position:absolute}.ots-annotation-toolbar-container .OT_subpanel.pen:after{top:15px}.ots-annotation-toolbar-container .color-picker{top:0}.ots-annotation-toolbar-container .color-picker:after{top:75px}.ots-annotation-toolbar-container .color-picker .color-choice{width:20px;height:20px;margin:10px;cursor:pointer;border-radius:100%}.ots-annotation-toolbar-container .color-picker .color-choice.active{border:2px solid #fff}.ots-annotation-toolbar-container .OT_subpanel.shapes{display:flex;flex-direction:column;top:75px;min-height:159.89px}.ots-annotation-toolbar-container .OT_subpanel.shapes:after{position:absolute;top:62.5px;right:-15px;content:"";width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:15px solid #333}.ots-annotation-toolbar-container .OT_subpanel.shapes input{width:22px;height:22px;margin:9px;border:none;background-color:#333;background-repeat:no-repeat;background-position:center center}.ots-annotation-toolbar-container .OT_subpanel.shapes .annotation-btn.rectangle{background-image:url(https://assets.tokbox.com/solutions/images/annotation-rectangle.png);background-size:18px 18px}.ots-annotation-toolbar-container .OT_subpanel.shapes .annotation-btn.rectangle-fill{background-image:url(https://assets.tokbox.com/solutions/images/annotation-rectangle-fill.png);background-size:18px 18px}.ots-annotation-toolbar-container .OT_subpanel.shapes .annotation-btn.oval{background-image:url(https://assets.tokbox.com/solutions/images/annotation-oval.png);background-size:20px 20px}.ots-annotation-toolbar-container .OT_subpanel.shapes .annotation-btn.oval-fill{background-image:url(https://assets.tokbox.com/solutions/images/annotation-oval-fill.png);background-size:20px 20px}.ots-annotation-toolbar-container .OT_subpanel.shapes .annotation-btn.star{background-image:url(https://assets.tokbox.com/solutions/images/annotation-star.png);background-size:22px 22px}.ots-annotation-toolbar-container .OT_subpanel.shapes .annotation-btn.arrow{background-image:url(https://assets.tokbox.com/solutions/images/annotation-arrow.png);background-size:6.5px 23.5px}.publisherContainer{display:block;background-color:#000;position:absolute}.publisher-wrap{height:100%;width:100%}.subscriberContainer{position:absolute;top:20px;left:20px;width:200px;height:120px;background-color:#000;border:2px solid #fff;border-radius:6px}.subscriberContainer .OT_video-poster{width:100%;height:100%;opacity:.25;background-repeat:no-repeat;background-image:url(https://static.opentok.com/webrtc/v2.8.2/images/rtc/audioonly-silhouette.svg);background-size:50%;background-position:center}.OT_video-element{height:100%;width:100%}.OT_edge-bar-item{display:none}</style></head><body> <div class="main-wrap"> <div id="annotationContainer" class="inner-wrap"></div></div><div id="toolbarContainer" class="fixed-container"> <div id="toolbar" class="toolbar-wrap"></div></div><div id="subscriberVideo" class="subscriberContainer hidden"></div><script type="text/javascript" charset="utf-8"> /** Must use double-quotes since everything must be converted to a string */ var opener; var canvas; if (!toolbar){alert("Something went wrong: You must pass an OpenTok annotation toolbar object into the window.")}else{opener=window.opener; window.onbeforeunload=window.triggerCloseEvent;}var localScreenProperties={insertMode: "append", width: "100%", height: "100%", videoSource: "window", showControls: false, style:{buttonDisplayMode: "off"}, fitMode: "contain"}; var createContainerElements=function(){var parentDiv=document.getElementById("annotationContainer"); var publisherContainer=document.createElement("div"); publisherContainer.setAttribute("id", "screenshare_publisher"); publisherContainer.classList.add("publisher-wrap"); parentDiv.appendChild(publisherContainer); return{annotation: parentDiv, publisher: publisherContainer};}; var addSubscriberVideo=function(stream){var container=document.getElementById("subscriberVideo"); session.subscribe(stream, container, localScreenProperties, function(error){if (error){console.log("Failed to add subscriber video", error);}container.classList.remove("hidden");});}; if (navigator.userAgent.indexOf("Firefox") !==-1){var ghost=window.open("about:blank"); ghost.focus(); ghost.close();}</script></body></html>';
		var template = '<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>OpenTok Screen Sharing Solution Annotation</title><style type="text/css" media="screen"> body{margin:0;background-color:rgba(0,153,203,.7);box-sizing:border-box;height:100vh}canvas{top:0;z-index:1000}.hidden{display:none}.main-wrap{width:100%;height:100%;-ms-box-orient:horizontal;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center}.inner-wrap{position:relative;border-radius:8px;overflow:hidden}.ots-annotation-toolbar-container{position:fixed;top:125px;right:0;width:60px;z-index:1000;background-color:#666}.ots-annotation-toolbar-container .OT_panel{display:flex;flex-direction:column;align-items:center}.ots-annotation-toolbar-container .annotation-btn{height:60px;width:60px;background-position:center center;background-repeat:no-repeat!important;background-color:#666;cursor:pointer;border:none}.ots-annotation-toolbar-container .annotation-btn.pen{background-image:url(https://assets.tokbox.com/solutions/images/annotation-pencil.png);background-size:27px 30px}.ots-annotation-toolbar-container .annotation-btn.colors{width:23px;height:24px;border:3px solid #fff;margin:18px 18.5px}.ots-annotation-toolbar-container .annotation-btn.line{background-image:url(https://assets.tokbox.com/solutions/images/annotation-line.png);background-size:26px 31px}.ots-annotation-toolbar-container .annotation-btn.line-width{background-image:url(https://assets.tokbox.com/solutions/images/annotation-line_width.png);background-size:26px 31px}.ots-annotation-toolbar-container .annotation-btn.shapes{background-image:url(https://assets.tokbox.com/solutions/images/annotation-shapes.png);background-size:26px 31px}.ots-annotation-toolbar-container .annotation-btn.text{background-image:url(https://assets.tokbox.com/solutions/images/annotation-text.png);background-size:21px 25px}.ots-annotation-toolbar-container .annotation-btn.capture{background-image:url(https://assets.tokbox.com/solutions/images/annotation-camera.png);background-size:34px 31px}.ots-annotation-toolbar-container .annotation-btn.clear{background-image:url(https://assets.tokbox.com/solutions/images/annotation-clear.png);background-size:31px 31px}.ots-annotation-toolbar-container .annotation-btn.undo{background-image:url(https://assets.tokbox.com/solutions/images/annotation-undo.png);background-size:34px 31px}.ots-annotation-toolbar-container .OT_subpanel,.ots-annotation-toolbar-container .color-picker{position:absolute;right:65px;width:40px;background-color:#333;display:flex;flex-direction:column;align-items:center;transition:opacity .5s ease-out}.ots-annotation-toolbar-container .OT_subpanel.pen{top:0}.ots-annotation-toolbar-container .OT_subpanel.pen .line-width-option{width:40px;height:40px;cursor:pointer}.ots-annotation-toolbar-container .OT_subpanel.pen:after,.ots-annotation-toolbar-container .color-picker:after{width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:15px solid #333;right:-15px;content:"";position:absolute}.ots-annotation-toolbar-container .OT_subpanel.pen:after{top:15px}.ots-annotation-toolbar-container .color-picker{top:0}.ots-annotation-toolbar-container .color-picker:after{top:75px}.ots-annotation-toolbar-container .color-picker .color-choice{width:20px;height:20px;margin:10px;cursor:pointer;border-radius:100%}.ots-annotation-toolbar-container .color-picker .color-choice.active{border:2px solid #fff}.ots-annotation-toolbar-container .OT_subpanel.shapes{display:flex;flex-direction:column;top:75px;min-height:159.89px}.ots-annotation-toolbar-container .OT_subpanel.shapes:after{position:absolute;top:62.5px;right:-15px;content:"";width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:15px solid #333}.ots-annotation-toolbar-container .OT_subpanel.shapes input{width:22px;height:22px;margin:9px;border:none;background-color:#333;background-repeat:no-repeat;background-position:center center}.ots-annotation-toolbar-container .OT_subpanel.shapes .annotation-btn.rectangle{background-image:url(https://assets.tokbox.com/solutions/images/annotation-rectangle.png);background-size:18px 18px}.ots-annotation-toolbar-container .OT_subpanel.shapes .annotation-btn.rectangle-fill{background-image:url(https://assets.tokbox.com/solutions/images/annotation-rectangle-fill.png);background-size:18px 18px}.ots-annotation-toolbar-container .OT_subpanel.shapes .annotation-btn.oval{background-image:url(https://assets.tokbox.com/solutions/images/annotation-oval.png);background-size:20px 20px}.ots-annotation-toolbar-container .OT_subpanel.shapes .annotation-btn.oval-fill{background-image:url(https://assets.tokbox.com/solutions/images/annotation-oval-fill.png);background-size:20px 20px}.ots-annotation-toolbar-container .OT_subpanel.shapes .annotation-btn.star{background-image:url(https://assets.tokbox.com/solutions/images/annotation-star.png);background-size:22px 22px}.ots-annotation-toolbar-container .OT_subpanel.shapes .annotation-btn.arrow{background-image:url(https://assets.tokbox.com/solutions/images/annotation-arrow.png);background-size:6.5px 23.5px}.publisherContainer{display:block;background-color:#000;position:absolute}.publisher-wrap{height:100%;width:100%}.subscriberContainer{position:absolute;top:20px;left:20px;width:200px;height:120px;background-color:#000;border:2px solid #fff;border-radius:6px}.subscriberContainer .OT_video-poster{width:100%;height:100%;opacity:.25;background-repeat:no-repeat;background-image:url(https://static.opentok.com/webrtc/v2.8.2/images/rtc/audioonly-silhouette.svg);background-size:50%;background-position:center}.OT_video-element{height:100%;width:100%}.OT_edge-bar-item{display:none}</style></head><body> <div class="main-wrap"> <div id="annotationContainer" class="inner-wrap"></div></div><div id="toolbarContainer" class="ots-annotation-toolbar-container"> <div id="toolbar" class="toolbar-wrap"></div></div><div id="subscriberVideo" class="subscriberContainer hidden"></div><script type="text/javascript" charset="utf-8"> /** Must use double-quotes since everything must be converted to a string */ var opener; var canvas; if (!toolbar){alert("Something went wrong: You must pass an OpenTok annotation toolbar object into the window.")}else{opener=window.opener; window.onbeforeunload=window.triggerCloseEvent;}var localScreenProperties={insertMode: "append", width: "100%", height: "100%", videoSource: "window", showControls: false, style:{buttonDisplayMode: "off"}, fitMode: "contain"}; var createContainerElements=function(){var parentDiv=document.getElementById("annotationContainer"); var publisherContainer=document.createElement("div"); publisherContainer.setAttribute("id", "screenshare_publisher"); publisherContainer.classList.add("publisher-wrap"); parentDiv.appendChild(publisherContainer); return{annotation: parentDiv, publisher: publisherContainer};}; var addSubscriberVideo=function(stream){var container=document.getElementById("subscriberVideo"); session.subscribe(stream, container, localScreenProperties, function(error){if (error){console.log("Failed to add subscriber video", error);}container.classList.remove("hidden");});}; if (navigator.userAgent.indexOf("Firefox") !==-1){var ghost=window.open("about:blank"); ghost.focus(); ghost.close();}</script></body></html>';

dist/opentok-annotation.js

Sorry, the diff of this file is too big to display

dist/opentok-js-annotation-1.1.0.zip

Sorry, the diff of this file is not supported yet

opentok-annotation - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics