Video app sample
+ + + + + \ No newline at end of file diff --git a/teams-videoapp-sample/app/package.json b/teams-videoapp-sample/app/package.json new file mode 100644 index 00000000..a5a49485 --- /dev/null +++ b/teams-videoapp-sample/app/package.json @@ -0,0 +1,22 @@ +{ + "name": "teams-videoapp-sample", + "productName": "Teams VideoApp sample", + "version": "1.0.0", + "description": "", + "scripts": { + "dev:teamsfx": "env-cmd --silent -f .env.teamsfx.local npm run dev", + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "keywords": [], + "author": "", + "license": "MIT", + "devDependencies": { + "vite": "^3.0.0", + "env-cmd": "^10.1.0" + }, + "dependencies": { + "@microsoft/teams-js": "^2.2.0" + } +} diff --git a/teams-videoapp-sample/app/public/img/gray.png b/teams-videoapp-sample/app/public/img/gray.png new file mode 100644 index 00000000..a7d324b7 Binary files /dev/null and b/teams-videoapp-sample/app/public/img/gray.png differ diff --git a/teams-videoapp-sample/app/public/img/half.png b/teams-videoapp-sample/app/public/img/half.png new file mode 100644 index 00000000..9c7f00ab Binary files /dev/null and b/teams-videoapp-sample/app/public/img/half.png differ diff --git a/teams-videoapp-sample/app/src/index.css b/teams-videoapp-sample/app/src/index.css new file mode 100644 index 00000000..b53c6726 --- /dev/null +++ b/teams-videoapp-sample/app/src/index.css @@ -0,0 +1,42 @@ +.horizontal { + display: flex; + align-items: center; + flex-wrap: wrap; +} + +.filter { + position: relative; + height: 42px; + border-radius: 2px; + border-width: 2px; + border-style: solid; + border-color: transparent; + margin: 2px; +} + +.selected { + border-color: purple; + background: purple; +} + +.thumbnail { + width: 74px; + height: 42px; + border-radius: 2px; +} + +#filter-half > a { + width: 74px; + height: 42px; + background: url(/img/half.png); +} + +#filter-gray > a { + width: 74px; + height: 42px; + background: url(/img/gray.png); +} + +a { + display: block; +} diff --git a/teams-videoapp-sample/app/src/index.js b/teams-videoapp-sample/app/src/index.js new file mode 100644 index 00000000..de55fc04 --- /dev/null +++ b/teams-videoapp-sample/app/src/index.js @@ -0,0 +1,107 @@ +import { app, video } from "@microsoft/teams-js"; + +import { WebglVideoFilter } from "./webgl-video-filter"; + +app.initialize().then(() => { +// This is the effect for processing +let appliedEffect = { + pixelValue: 100, + proportion: 3, +}; + +let effectIds = { + half: "c2cf81fd-a1c0-4742-b41a-ef969b3ed490", + gray: "b0c8896c-7be8-4645-ae02-a8bc9b0355e5", +} + +// This is the effect linked with UI +let uiSelectedEffect = {}; +let selectedEffectId = undefined; +let errorOccurs = false; +let useSimpleEffect = false; +function simpleHalfEffect(videoFrame) { + const maxLen = + (videoFrame.height * videoFrame.width) / + Math.max(1, appliedEffect.proportion) - 4; + + for (let i = 1; i < maxLen; i += 4) { + //smaple effect just change the value to 100, which effect some pixel value of video frame + videoFrame.data[i + 1] = appliedEffect.pixelValue; + } +} + +let canvas = new OffscreenCanvas(480,360); +let videoFilter = new WebglVideoFilter(canvas); +videoFilter.init(); +//Sample video effect +function videoFrameHandler(videoFrame, notifyVideoProcessed, notifyError) { + switch (selectedEffectId) { + case effectIds.half: + simpleHalfEffect(videoFrame); + break; + case effectIds.gray: + videoFilter.processVideoFrame(videoFrame); + break; + default: + break; + } + + //send notification the effect processing is finshed. + notifyVideoProcessed(); + + //send error to Teams if any + // if (errorOccurs) { + // notifyError("some error message"); + // } +} + +function clearSelect() { + document.getElementById("filter-half").classList.remove("selected"); + document.getElementById("filter-gray").classList.remove("selected"); +} + +function effectParameterChanged(effectId) { + console.log(effectId); + if (selectedEffectId === effectId) { + console.log('effect not changed'); + return; + } + selectedEffectId = effectId; + + clearSelect(); + switch (selectedEffectId) { + case effectIds.half: + console.log('current effect: half'); + document.getElementById("filter-half").classList.add("selected"); + break; + case effectIds.gray: + console.log('current effect: gray'); + document.getElementById("filter-gray").classList.add("selected"); + break; + default: + console.log('effect cleared'); + break; + } +} + +video.registerForVideoEffect(effectParameterChanged); +video.registerForVideoFrame(videoFrameHandler, { + format: "NV12", +}); + +// any changes to the UI should notify Teams client. +const filterHalf = document.getElementById("filter-half"); +filterHalf.addEventListener("click", function () { + if (selectedEffectId === effectIds.half) { + return; + } + video.notifySelectedVideoEffectChanged("EffectChanged", effectIds.half); +}); +const filterGray = document.getElementById("filter-gray"); +filterGray.addEventListener("click", function () { + if (selectedEffectId === effectIds.gray) { + return; + } + video.notifySelectedVideoEffectChanged("EffectChanged", effectIds.gray); +}); +}); diff --git a/teams-videoapp-sample/app/src/webgl-video-filter.js b/teams-videoapp-sample/app/src/webgl-video-filter.js new file mode 100644 index 00000000..ab58eb3a --- /dev/null +++ b/teams-videoapp-sample/app/src/webgl-video-filter.js @@ -0,0 +1,222 @@ + export class WebglVideoFilter { + constructor(canvas) { + this.canvas = canvas; + this.gl = canvas.getContext('webgl2'); + this.canvasWidth = 0; + this.canvasHeight = 0; + this.initalized = false; + this.program = null; + this.textureY = null; + this.textureUV = null; + this.effectPixelBuffer = null; + } + + init() { + if (!this.initalized) { + this._initProgram(); + this._initVertexBuffers(); + this._initTexture(); + this.initalized = true; + } + } + + processVideoFrame(videoFrame) { + const gl = this.gl; + const width = videoFrame.width; + const height = videoFrame.height; + this._setSize(width, height); + gl.viewport(0, 0, this.canvasWidth, this.canvasHeight); + gl.clearColor(0, 0, 0, 0); + gl.clear(gl.COLOR_BUFFER_BIT); + + + const uOffset = width * height; + gl.bindTexture(gl.TEXTURE_2D, this.textureY); + gl.texImage2D( + gl.TEXTURE_2D, + 0, + gl.LUMINANCE, + width, + height, + 0, + gl.LUMINANCE, + gl.UNSIGNED_BYTE, + videoFrame.data.subarray(0, uOffset) + ); + + gl.bindTexture(gl.TEXTURE_2D, this.textureUV); + gl.texImage2D( + gl.TEXTURE_2D, + 0, + gl.LUMINANCE_ALPHA, + width >> 1, + height >> 1, + 0, + gl.LUMINANCE_ALPHA, + gl.UNSIGNED_BYTE, + videoFrame.data.subarray(uOffset, videoFrame.data.length) + ); + + gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); + gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, this.effectPixelBuffer); + + // Get the YUV data from the effectPixelBuffer + for (let i = 0; i < uOffset; i += 1) { + videoFrame.data[i] = this.effectPixelBuffer[4 * i]; + } + + let widthIndex = 0; + let curIndex = 0; + for (let i = uOffset; i < videoFrame.data.length; i += 2) { + videoFrame.data[i] = this.effectPixelBuffer[ 4 * curIndex + 1]; + videoFrame.data[i + 1] = this.effectPixelBuffer[4 * curIndex + 2]; + widthIndex += 2 + curIndex += 2 + if (widthIndex > videoFrame.width) { + curIndex += videoFrame.width; + widthIndex = widthIndex % videoFrame.width; + } + } + } + + _setSize(width, height) { + if (this.canvasWidth !== width || this.canvasHeight !== height) { + this.canvas.width = width; + this.canvas.height = height; + this.canvasWidth = width; + this.canvasHeight = height; + this.effectPixelBuffer = new Uint8Array(width * height * 4) + } + } + + _initProgram() { + const vertexShaderSource = ` + attribute vec4 a_vertexPosition; + attribute vec2 a_texturePosition; + varying vec2 v_texCoord; + void main() { + gl_Position = a_vertexPosition; + v_texCoord = a_texturePosition; + } + `; + const fragmentShaderSource = ` + precision mediump float; + varying vec2 v_texCoord; + uniform sampler2D u_samplerY; + uniform sampler2D u_samplerUV; + + vec3 yuv2r = vec3(1.164, 0.0, 1.596); + vec3 yuv2g = vec3(1.164, -0.391, -0.813); + vec3 yuv2b = vec3(1.164, 2.018, 0.0); + + vec3 nv12_to_rgb(vec2 texCoord) { + vec3 yuv; + yuv.x = texture2D(u_samplerY, texCoord).r - 0.0625; + yuv.y = texture2D(u_samplerUV, texCoord).r - 0.5; + yuv.z = texture2D(u_samplerUV, texCoord).a - 0.5; + vec3 rgb = vec3(dot(yuv, yuv2r), dot(yuv, yuv2g), dot(yuv, yuv2b)); + return rgb; + } + + vec4 rgba_to_nv12(vec3 rgb) { + float y = (0.257 * rgb.r) + (0.504 * rgb.g) + (0.098 * rgb.b) + 0.0625; + float u = -(0.148 * rgb.r) - (0.291 * rgb.g) + (0.439 * rgb.b) + 0.5; + float v = (0.439 * rgb.r) - (0.368 * rgb.g) - (0.071 * rgb.b) + 0.5; + return vec4(y, u, v, 1.0); + } + + void main() { + gl_FragColor = vec4(nv12_to_rgb(v_texCoord), 1); + // gray effect + float luminance = 0.299 * gl_FragColor.r + 0.587 * gl_FragColor.g + 0.114 * gl_FragColor.b; + gl_FragColor = vec4(luminance, luminance, luminance, 5); + + // rgba to nv12 + gl_FragColor = rgba_to_nv12(gl_FragColor.rgb); + } + `; + + const gl = this.gl; + const vertexShader = this._compileShader(vertexShaderSource, gl.VERTEX_SHADER); + const fragmentShader = this._compileShader(fragmentShaderSource, gl.FRAGMENT_SHADER); + + const program = gl.createProgram(); + gl.attachShader(program, vertexShader); + gl.attachShader(program, fragmentShader); + gl.linkProgram(program); + gl.useProgram(program); + const success = gl.getProgramParameter(program, gl.LINK_STATUS); + if (!success) { + console.error('program fail to link' + gl.getShaderInfoLog(program)); + return; + } + this.program = program; + } + + _initVertexBuffers() { + const vertices = new Float32Array([ + -1, -1, 0, 0.0, 0.0, + 1, -1, 0, 1.0, 0.0, + -1, 1, 0, 0.0, 1.0, + 1, 1, 0, 1.0, 1.0, + ]); + + const gl = this.gl; + const program = this.program; + const verticeBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, verticeBuffer); + gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); + const positionLocation = gl.getAttribLocation(program, "a_vertexPosition"); + gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 5 * 4, 0); + gl.enableVertexAttribArray(positionLocation); + + const indices = new Int16Array([ + 0, 1, 2, + 2, 1, 3 + ]); + const indicesBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); + const texcoordLocation = gl.getAttribLocation(program, "a_texturePosition"); + gl.vertexAttribPointer(texcoordLocation, 2, gl.FLOAT, false, 5 * 4, 3 * 4); + gl.enableVertexAttribArray(texcoordLocation); + } + + _createTexture() { + const gl = this.gl; + const texture = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, texture); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); + return texture; + } + + _initTexture() { + const gl = this.gl; + const program = this.program; + this.textureY = this._createTexture(); + gl.uniform1i(gl.getUniformLocation(program, 'u_samplerY'), 0); + + gl.activeTexture(gl.TEXTURE1); + this.textureUV = this._createTexture(); + gl.uniform1i(gl.getUniformLocation(program, 'u_samplerUV'), 1); + } + + _compileShader(shaderSource, shaderType) { + const gl = this.gl; + const shader = gl.createShader(shaderType); + gl.shaderSource(shader, shaderSource); + gl.compileShader(shader); + const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS); + if (!success) { + const err = gl.getShaderInfoLog(shader); + gl.deleteShader(shader); + console.error('could not compile shader', err); + return; + } + return shader; + } +} diff --git a/teams-videoapp-sample/app/vite.config.js b/teams-videoapp-sample/app/vite.config.js new file mode 100644 index 00000000..a675f9d8 --- /dev/null +++ b/teams-videoapp-sample/app/vite.config.js @@ -0,0 +1,22 @@ +import dns from "dns"; + +// use localhost by default, see https://vitejs.dev/config/server-options.html#server-host +dns.setDefaultResultOrder('verbatim'); + +const SSL_KEY_FILE = process.env["SSL_KEY_FILE"]; +const SSL_CRT_FILE = process.env["SSL_CRT_FILE"]; + +let options = undefined; +if (SSL_KEY_FILE && SSL_CRT_FILE) { + options = { + key: SSL_KEY_FILE, + cert: SSL_CRT_FILE + } +} + +export default { + server: { + https: options || false, + port: process.env["PORT"] || "53000" + } +} diff --git a/teams-videoapp-sample/templates/appPackage/gray.png b/teams-videoapp-sample/templates/appPackage/gray.png new file mode 100644 index 00000000..a7d324b7 Binary files /dev/null and b/teams-videoapp-sample/templates/appPackage/gray.png differ diff --git a/teams-videoapp-sample/templates/appPackage/half.png b/teams-videoapp-sample/templates/appPackage/half.png new file mode 100644 index 00000000..9c7f00ab Binary files /dev/null and b/teams-videoapp-sample/templates/appPackage/half.png differ diff --git a/teams-videoapp-sample/templates/appPackage/icon-color.png b/teams-videoapp-sample/templates/appPackage/icon-color.png new file mode 100644 index 00000000..a8ced6aa Binary files /dev/null and b/teams-videoapp-sample/templates/appPackage/icon-color.png differ diff --git a/teams-videoapp-sample/templates/appPackage/icon-outline.png b/teams-videoapp-sample/templates/appPackage/icon-outline.png new file mode 100644 index 00000000..0981ab83 Binary files /dev/null and b/teams-videoapp-sample/templates/appPackage/icon-outline.png differ diff --git a/teams-videoapp-sample/templates/appPackage/manifest.template.json b/teams-videoapp-sample/templates/appPackage/manifest.template.json new file mode 100644 index 00000000..661016ba --- /dev/null +++ b/teams-videoapp-sample/templates/appPackage/manifest.template.json @@ -0,0 +1,59 @@ +{ + "$schema": "https://raw.githubusercontent.com/OfficeDev/microsoft-teams-app-schema/preview/DevPreview/MicrosoftTeams.schema.json", + "manifestVersion": "devPreview", + "version": "1.0.0", + "id": "32cdab16-7c7c-40bc-94ac-c764e91d85a6", + "packageName": "com.microsoft.teams.videopp", + "developer": { + "name": "Microsoft", + "websiteUrl": "https://microsoft.github.io/teams-videoapp-sample/", + "privacyUrl": "https://privacy.microsoft.com/en-us/privacystatement/", + "termsOfUseUrl": "https://www.microsoft.com/en-us/servicesagreement/" + }, + "icons": { + "color": "icon-color.png", + "outline": "icon-outline.png" + }, + "name": { + "short": "Teams VideoApp sample", + "full": "Teams VideoApp sample" + }, + "description": { + "short": "This repo demonstrate a minimal Teams video app.", + "full": "This repo demonstrate a minimal Teams video app, clone this repo and change the video frame processing function" + }, + "accentColor": "#FFFFFF", + "authorization": { + "permissions": { + "resourceSpecific": [ + { + "name": "CameraStream.Read.User", + "type": "Delegated" + }, + { + "name": "OutgoingVideoStream.Write.User", + "type": "Delegated" + } + ] + } + }, + "validDomains": ["microsoft.github.io"], + "localizationInfo": { + "defaultLanguageTag": "en-us" + }, + "meetingExtensionDefinition": { + "videoFilters": [ + { + "id": "c2cf81fd-a1c0-4742-b41a-ef969b3ed490", + "name": "Others_half", + "thumbnail": "half.png" + }, + { + "id": "b0c8896c-7be8-4645-ae02-a8bc9b0355e5", + "name": "Others_gray scale", + "thumbnail": "gray.png" + } + ], + "videoFiltersConfigurationUrl": "https://microsoft.github.io/teams-videoapp-sample/app/" + } +} diff --git a/todo-list-SPFx/SPFx/.eslintrc.js b/todo-list-SPFx/SPFx/.eslintrc.js index 83148ef4..fab8fed6 100644 --- a/todo-list-SPFx/SPFx/.eslintrc.js +++ b/todo-list-SPFx/SPFx/.eslintrc.js @@ -8,5 +8,378 @@ require('@rushstack/eslint-config/patch/modern-module-resolution'); "@typescript-eslint/no-floating-promises": "off", "@typescript-eslint/no-explicit-any": "off", "react/jsx-no-bind": "off" - } + }, + overrides: [ + { + files: ['*.ts', '*.tsx'], + parser: '@typescript-eslint/parser', + 'parserOptions': { + 'project': './tsconfig.json', + 'ecmaVersion': 2018, + 'sourceType': 'module' + }, + rules: { + // Prevent usage of the JavaScript null value, while allowing code to access existing APIs that may require null. https://www.npmjs.com/package/@rushstack/eslint-plugin + '@rushstack/no-new-null': 1, + // Require Jest module mocking APIs to be called before any other statements in their code block. https://www.npmjs.com/package/@rushstack/eslint-plugin + '@rushstack/hoist-jest-mock': 1, + // Require regular expressions to be constructed from string constants rather than dynamically building strings at runtime. https://www.npmjs.com/package/@rushstack/eslint-plugin-security + '@rushstack/security/no-unsafe-regexp': 1, + // STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json + '@typescript-eslint/adjacent-overload-signatures': 1, + // STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json + // + // CONFIGURATION: By default, these are banned: String, Boolean, Number, Object, Symbol + '@typescript-eslint/ban-types': [ + 1, + { + 'extendDefaults': false, + 'types': { + 'String': { + 'message': 'Use \'string\' instead', + 'fixWith': 'string' + }, + 'Boolean': { + 'message': 'Use \'boolean\' instead', + 'fixWith': 'boolean' + }, + 'Number': { + 'message': 'Use \'number\' instead', + 'fixWith': 'number' + }, + 'Object': { + 'message': 'Use \'object\' instead, or else define a proper TypeScript type:' + }, + 'Symbol': { + 'message': 'Use \'symbol\' instead', + 'fixWith': 'symbol' + }, + 'Function': { + 'message': 'The \'Function\' type accepts any function-like value.\nIt provides no type safety when calling the function, which can be a common source of bugs.\nIt also accepts things like class declarations, which will throw at runtime as they will not be called with \'new\'.\nIf you are expecting the function to accept certain arguments, you should explicitly define the function shape.' + } + } + } + ], + // RATIONALE: Code is more readable when the type of every variable is immediately obvious. + // Even if the compiler may be able to infer a type, this inference will be unavailable + // to a person who is reviewing a GitHub diff. This rule makes writing code harder, + // but writing code is a much less important activity than reading it. + // + // STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json + '@typescript-eslint/explicit-function-return-type': [ + 1, + { + 'allowExpressions': true, + 'allowTypedFunctionExpressions': true, + 'allowHigherOrderFunctions': false + } + ], + // STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json + // Rationale to disable: although this is a recommended rule, it is up to dev to select coding style. + // Set to 1 (warning) or 2 (error) to enable. + '@typescript-eslint/explicit-member-accessibility': 0, + // STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json + '@typescript-eslint/no-array-constructor': 1, + // STANDARDIZED BY: @typescript-eslint\eslint-plugin\dist\configs\recommended.json + // + // RATIONALE: The "any" keyword disables static type checking, the main benefit of using TypeScript. + // This rule should be suppressed only in very special cases such as JSON.stringify() + // where the type really can be anything. Even if the type is flexible, another type + // may be more appropriate such as "unknown", "{}", or "Record
- 
+
{this.props.userName}
- })
+ 
+