### Photino.Native Media Capture Example (JavaScript)

Source: https://github.com/tryphotino/photino.native/blob/master/Photino.Test/wwwroot/main.html

This snippet demonstrates how to capture video from a webcam using the MediaDevices API and display it in a canvas element. It includes logic to handle window resizing and photo taking.

```javascript
const width = 320;
let height = 0;
let streaming = false;
let video = null;
let canvas = null;
let photo = null;
let startbutton = null;

function showViewLiveResultButton() {
  if (window.self !== window.top) {
    document.querySelector(".contentarea").remove();
    const button = document.createElement("button");
    button.textContent = "View live result of the example code above";
    document.body.append(button);
    button.addEventListener("click", () => window.open(location.href));
    return true;
  }
  return false;
}

function startup() {
  if (showViewLiveResultButton()) {
    return;
  }
  video = document.getElementById("video");
  canvas = document.getElementById("canvas");
  photo = document.getElementById("photo");
  startbutton = document.getElementById("startbutton");

  navigator.mediaDevices
    .getUserMedia({ video: true, audio: false })
    .then((stream) => {
      video.srcObject = stream;
      video.play();
    })
    .catch((err) => {
      console.error(`An error occurred: ${err}`);
    });

  video.addEventListener(
    "canplay",
    (ev) => {
      if (!streaming) {
        height = video.videoHeight / (video.videoWidth / width);
        if (isNaN(height)) {
          height = width / (4 / 3);
        }
        video.setAttribute("width", width);
        video.setAttribute("height", height);
        canvas.setAttribute("width", width);
        canvas.setAttribute("height", height);
        streaming = true;
      }
    },
    false,
  );

  startbutton.addEventListener(
    "click",
    (ev) => {
      takepicture();
      ev.preventDefault();
    },
    false,
  );

  clearphoto();
}

function clearphoto() {
  const context = canvas.getContext("2d");
  context.fillStyle = "#AAA";
  context.fillRect(0, 0, canvas.width, canvas.height);
  const data = canvas.toDataURL("image/png");
  photo.setAttribute("src", data);
}

function takepicture() {
  const context = canvas.getContext("2d");
  if (width && height) {
    context.drawImage(video, 0, 0, width, height);
    const data = canvas.toDataURL("image/png");
    photo.setAttribute("src", data);
  } else {
    clearphoto();
  }
}

window.addEventListener("load", startup, false);
```

--------------------------------

### Compile Photino.Native on Linux

Source: https://github.com/tryphotino/photino.native/blob/master/README.md

This command compiles the Photino.Native library for Linux (tested with Ubuntu 18.04 and 20.04). It requires GTK+ 3, WebKitGTK+ 4.0, and libnotify development packages. The output is a shared object file (.so).

```bash
sudo apt-get update && sudo apt-get install libgtk-3-dev libwebkit2gtk-4.0-dev libnotify-dev
gcc -std=c++11 -shared -DOS_LINUX Exports.cpp Photino.Linux.cpp -o x64/$(buildConfiguration)/Photino.Native.so 'pkg-config --cflags --libs gtk+-3.0 webkit2gtk-4.0 libnotify' -fPIC
```

--------------------------------

### Compile Photino.Native on macOS

Source: https://github.com/tryphotino/photino.native/blob/master/README.md

This command compiles the Photino.Native library for macOS. It requires Xcode and links against the Cocoa and WebKit frameworks. The output is a dynamic library (.dylib).

```bash
gcc -shared -lstdc++ -DOS_MAC -framework Cocoa -framework WebKit Photino.Mac.mm Exports.cpp Photino.Mac.AppDelegate.mm Photino.Mac.UiDelegate.mm Photino.Mac.UrlSchemeHandler.mm -o x64/$(buildConfiguration)/Photino.Native.dylib
```

--------------------------------

### Photino.Native JavaScript Messaging

Source: https://github.com/tryphotino/photino.native/blob/master/Photino.Test/wwwroot/main.html

Demonstrates how to send messages from JavaScript to the .NET backend in Photino.Native. These messages trigger actions in the native application.

```javascript
window.external.receiveMessage(message => alert(message));
function OpenChildWindow() { window.external.sendMessage('child-window'); }
function ZoomIn() { window.external.sendMessage('zoom-in'); }
function ZoomOut() { window.external.sendMessage('zoom-out'); }
function Center() { window.external.sendMessage('center'); }
function Close() { window.external.sendMessage('close'); }
function ClearBrowserAutoFill() { window.external.sendMessage('clearbrowserautofill'); }
function Minimize() { window.external.sendMessage('minimize'); }
function Maximize() { window.external.sendMessage('maximize'); }
function SetContextMenuEnabled() { window.external.sendMessage('setcontextmenuenabled'); }
function SetDevToolsEnabled() { window.external.sendMessage('setdevtoolsenabled'); }
function SetFullScreen() { window.external.sendMessage('setfullscreen'); }
function SetIconFile() { window.external.sendMessage('seticonfile'); }
function SetPosition() { window.external.sendMessage('setposition'); }
function SetResizable() { window.external.sendMessage('setresizable'); }
function SetSizeUp() { window.external.sendMessage('setsize-up'); }
function SetSizeDown() { window.external.sendMessage('setsize-down'); }
function SetTitle() { window.external.sendMessage('settitle'); }
function SetTopmost() { window.external.sendMessage('settopmost'); }
function SetTransparent() { window.external.sendMessage('settransparent'); }
function ShowState() { window.external.sendMessage('showproperties'); }
function SendWebMessage() { window.external.sendMessage('sendWebMessage'); }
function ToastNotification() { window.external.sendMessage('toastNotification'); }
function ShowOpenFile() { window.external.sendMessage('showOpenFile'); }
function ShowOpenFileAsync() { window.external.sendMessage('showOpenFileAsync'); }
function ShowOpenFolder() { window.external.sendMessage('showOpenFolder'); }
function ShowOpenFolderAsync() { window.external.sendMessage('showOpenFolderAsync'); }
function ShowSaveFile() { window.external.sendMessage('showSaveFile'); }
function ShowSaveFileAsync() { window.external.sendMessage('showSaveFileAsync'); }
function ShowMessage() { window.external.sendMessage('showMessage'); }
function SetMinSize() { window.external.sendMessage('setMinSize'); }
function SetMaxSize() { window.external.sendMessage('setMaxSize'); }
```

--------------------------------

### Capture Image from Video Stream (JavaScript)

Source: https://github.com/tryphotino/photino.native/blob/master/Photino.Test/wwwroot/main.html

Captures a frame from a video stream, draws it onto an offscreen canvas, converts it to a PNG data URL, and sets it as the source for an image element. This allows for resizing or applying transformations before displaying.

```javascript
function takepicture() {
  const context = canvas.getContext("2d");
  if (width && height) {
    canvas.width = width;
    canvas.height = height;
    context.drawImage(video, 0, 0, width, height);
    const data = canvas.toDataURL("image/png");
    photo.setAttribute("src", data);
  } else {
    clearphoto();
  }
}

window.addEventListener("load", startup, false);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.