com-chilipeppr-widget-cam-octopi

This widget loads a webcam view in ChiliPeppr via WebRTC.

ChiliPeppr Widget / Cam

All ChiliPeppr widgets/elements are defined using cpdefine() which is a method that mimics require.js. Each defined object must have a unique ID so it does not conflict with other ChiliPeppr widgets.

Item	Value
ID	com-chilipeppr-widget-cam-octopi
Name	Widget / Cam
Description	This widget loads a webcam view in ChiliPeppr via WebRTC.
chilipeppr.load() URL	http://raw.githubusercontent.com/reecem7/widget-cam-octopi/master/auto-generated-widget.html
Edit URL	http://ide.c9.io/reecem7/widget-cam-octopi
Github URL	http://github.com/reecem7/widget-cam-octopi
Test URL	https://preview.c9users.io/reecem7/widget-cam-octopi/widget.html

Example Code for chilipeppr.load() Statement

You can use the code below as a starting point for instantiating this widget inside a workspace or from another widget. The key is that you need to load your widget inlined into a div so the DOM can parse your HTML, CSS, and Javascript. Then you use cprequire() to find your widget's Javascript and get back the instance of it.

// Inject new div to contain widget or use an existing div with an ID
$("body").append('<' + 'div id="myDivWidgetCamOctopi"><' + '/div>');

chilipeppr.load(
  "#myDivWidgetCamOctopi",
  "http://raw.githubusercontent.com/reecem7/widget-cam-octopi/master/auto-generated-widget.html",
  function() {
    // Callback after widget loaded into #myDivWidgetCamOctopi
    // Now use require.js to get reference to instantiated widget
    cprequire(
      ["inline:com-chilipeppr-widget-cam-octopi"], // the id you gave your widget
      function(myObjWidgetCamOctopi) {
        // Callback that is passed reference to the newly loaded widget
        console.log("Widget / Cam just got loaded.", myObjWidgetCamOctopi);
        myObjWidgetCamOctopi.init();
      }
    );
  }
);

Publish

This widget/element publishes the following signals. These signals are owned by this widget/element and are published to all objects inside the ChiliPeppr environment that listen to them via the chilipeppr.subscribe(signal, callback) method. To better understand how ChiliPeppr's subscribe() method works see amplify.js's documentation at http://amplifyjs.com/api/pubsub/

Signal	Description
(No signals defined in this widget/element)

Subscribe

This widget/element subscribes to the following signals. These signals are owned by this widget/element. Other objects inside the ChiliPeppr environment can publish to these signals via the chilipeppr.publish(signal, data) method. To better understand how ChiliPeppr's publish() method works see amplify.js's documentation at http://amplifyjs.com/api/pubsub/

Signal	Description
(No signals defined in this widget/element)

Foreign Publish

This widget/element publishes to the following signals that are owned by other objects. To better understand how ChiliPeppr's subscribe() method works see amplify.js's documentation at http://amplifyjs.com/api/pubsub/

Signal	Description
(No signals defined in this widget/element)

Foreign Subscribe

This widget/element publishes to the following signals that are owned by other objects. To better understand how ChiliPeppr's publish() method works see amplify.js's documentation at http://amplifyjs.com/api/pubsub/

Signal	Description
(No signals defined in this widget/element)

Methods / Properties

The table below shows, in order, the methods and properties inside the widget/element.

Method / Property	Type	Description
id	string	"com-chilipeppr-widget-cam-octopi" The ID of the widget. You must define this and make it unique.
name	string	"Widget / Cam"
desc	string	"This widget loads a webcam view in ChiliPeppr via WebRTC."
url	string	"http://raw.githubusercontent.com/reecem7/widget-cam-octopi/master/auto-generated-widget.html"
fiddleurl	string	"http://ide.c9.io/reecem7/widget-cam-octopi"
githuburl	string	"http://github.com/reecem7/widget-cam-octopi"
testurl	string	"http://widget-cam-octopi-reecem7.c9users.io/widget.html"
publish	object	Please see docs above. Define the publish signals that this widget/element owns or defines so that other widgets know how to subscribe to them and what they do.
subscribe	object	Please see docs above. Define the subscribe signals that this widget/element owns or defines so that other widgets know how to subscribe to them and what they do.
foreignPublish	object	Please see docs above. Document the foreign publish signals, i.e. signals owned by other widgets or elements, that this widget/element publishes to.
foreignSubscribe	object	Please see docs above. Document the foreign subscribe signals, i.e. signals owned by other widgets or elements, that this widget/element subscribes to.
init	function	function () All widgets should have an init method. It should be run by the instantiating code like a workspace or a different widget.
activate	function	function () When this widget is activated
deactivate	function	function () When this widget is deactivated
isRunningInitCheckForCam	boolean	When this widget is activated, we need to do a few things: 1. Check if there is a stored setting of what cam to connect to because this could be a different host than what SPJS is running on. If no setting: 1. Check if we are SPJS connected 2. Check if we are on a Raspberry Pi 3. If so, then see if uv4l is installed 4. If so, then launch it 5. Connect If not Raspi, show error. If no uv4l, go into install process.
initCheckForCam	function	function ()
webRtcCallback	object
webRtcGo	function	function (callback) Use this as your main entry point. You need to provide a callback which will be told success or error.
onWebRtcSuccess	function	function () Called after successfully streaming remote video
onWebRtcError	function	function (errMsg) Called if failure connecting and streaming.
webRtcInit	function	function () Trigger the initial check of whether WebRTC is running on the server.
webRtcCeatePeerConnection	function	function ()
onWebRtcIceCandidate	function	function (event)
onWebRtcRemoteStreamAdded	function	function (event)
onWebRtcRemoteStreamRemoved	function	function (event)
webRtcOffer	function	function (stream)
webRtcStart	function	function ()
webRtcStop	function	function ()
setupPubSubForSpjsConnect	function	function () Subscribe to connect/disconnect events for SPJS so we can pivot off of it for detection.
ipAddrForSpjs	object
onSpjsConnect	function	function (payload, more)
onSpjsDisconnect	function	function ()
sendExecRuntime	function	function () Send the execruntime command to the currently running SPJS to see what OS is running.
send	function	function (cmd) Send a terminal command to the currently running SPJS.
isInSendSyncMode	boolean
sendSyncCallback	object
sendSyncIdNum	number
sendSync	function	function (cmd, callback) Send synchronously with callback as if you were right at the command line
onSendSyncWsRecv	function	function (msg)
isAreWeSubscribedToLowLevel	boolean
subscribeToLowLevelSerial	function	function ()
unsubscribeFromLowLevelSerial	function	function ()
onWsRecv	function	function (msg)
isInRaspiCheckMode	boolean
raspiCapture	string
isRaspberryPi	boolean
checkRaspiUserCallback	object
checkIfRaspberryPi	function	function (callback)
checkIfRaspberryPiCallback	function	function (payload)
isInCheckLinuxMode	boolean
checkLinuxCallback	object
checkIfLinux	function	function (callback)
execruntime	object
onExecRuntimeStatus	function	function (json)
isSpjsStatusInitted	boolean
statusCallback	object
checkIfSpjsConnected	function	function (callback)
requestSpjsStatus	function	function ()
onRequestSpjsStatusCallback	function	function (payload)
uv4lSetupInstall	function	function () Attach all events to the install div to enable everything to work.
isUseLogin	boolean
user	object
pass	object
onHostLogin	function	function ()
signalling_server_hostname	string	"localhost"
signalling_server_address	string	"undefined:443"
isFirefox	boolean
initCam	function	function () Initialize the Cam widget
onBtnStartClick	function	function (evt)
onBtnStopClick	function	function (evt)
ws	object
pc	object
audio_video_stream	object
pcConfig	object
pcOptions	object
mediaConstraints	object
RTCPeerConnection	object
RTCSessionDescription	object
RTCIceCandidate	object
URL	object
createPeerConnection	function	function ()
onIceCandidate	function	function (event)
onRemoteStreamAdded	function	function (event)
onRemoteStreamRemoved	function	function (event)
server	object
start	function	function ()
offer	function	function (stream)
stop	function	function ()
mute	function	function ()
pause	function	function ()
fullscreen	function	function ()
singleselection	function	function (name, id)
btnSetup	function	function () Call this method from init to setup all the buttons when this widget is first loaded. This basically attaches click events to your buttons. It also turns on all the bootstrap popovers by scanning the entire DOM of the widget.
showOptionsModal	function	function ()
options	object
setupUiFromLocalStorage	function	function () Call this method on init to setup the UI by reading the user's stored settings from localStorage and then adjust the UI to reflect what the user wants.
saveOptionsLocalStorage	function	function () When a user changes a value that is stored as an option setting, you should call this method immediately so that on next load the value is correctly set.
showBody	function	function (evt) Show the body of the panel. evt ({jquery_event}) - If you pass the event parameter in, we know it was clicked by the user and thus we store it for the next load so we can reset the user's preference. If you don't pass this value in we don't store the preference because it was likely code that sent in the param.
hideBody	function	function (evt) Hide the body of the panel. evt ({jquery_event}) - If you pass the event parameter in, we know it was clicked by the user and thus we store it for the next load so we can reset the user's preference. If you don't pass this value in we don't store the preference because it was likely code that sent in the param.
forkSetup	function	function () This method loads the pubsubviewer widget which attaches to our upper right corner triangle menu and generates 3 menu items like Pubsub Viewer, View Standalone, and Fork Widget. It also enables the modal dialog that shows the documentation for this widget. By using chilipeppr.load() we can ensure that the pubsubviewer widget is only loaded and inlined once into the final ChiliPeppr workspace. We are given back a reference to the instantiated singleton so its not instantiated more than once. Then we call it's attachTo method which creates the full pulldown menu for us and attaches the click events.

About ChiliPeppr

ChiliPeppr is a hardware fiddle, meaning it is a website that lets you easily create a workspace to fiddle with your hardware from software. ChiliPeppr provides a Serial Port JSON Server that you run locally on your computer, or remotely on another computer, to connect to the serial port of your hardware like an Arduino or other microcontroller.

You then create a workspace at ChiliPeppr.com that connects to your hardware by starting from scratch or forking somebody else's workspace that is close to what you are after. Then you write widgets in Javascript that interact with your hardware by forking the base template widget or forking another widget that is similar to what you are trying to build.

ChiliPeppr is massively capable such that the workspaces for TinyG and Grbl CNC controllers have become full-fledged CNC machine management software used by tens of thousands.

ChiliPeppr has inspired many people in the hardware/software world to use the browser and Javascript as the foundation for interacting with hardware. The Arduino team in Italy caught wind of ChiliPeppr and now ChiliPeppr's Serial Port JSON Server is the basis for the Arduino's new web IDE. If the Arduino team is excited about building on top of ChiliPeppr, what will you build on top of it?