Недавно я создал первый в своей истории пакет npm, поэтому я объяснил, как сделать с ним демонстрацию. Пакет предназначен для виртуального фона. Об этом я писал в предыдущей статье.
Я сделаю такую демонстрацию.
Предполагается, что это версия пакета 1.0.19.
Предварительная подготовка
На этот раз мы создадим демонстрацию в React.
Сначала давайте настроим среду.
create-react-app demo --typescript
Установить пакет
Теперь установите пакет виртуального фона.
npm install local-video-effector npm install
Подготовьте фоновое изображение
Давайте подготовим изображение для использования в качестве виртуального фона. Поместите ваше любимое изображение в общедоступный каталог, созданный с помощью приведенной выше команды create-response-app.
В данном случае я разместил файл изображения с именем pic1.jpg.
$ ls public/pic1.jpg public/pic1.jpg
Код
Всего около 60 строк, так что я просто вставлю все сначала.
import * as React from 'react'
import { LocalVideoEffectors, ModelConfigMobileNetV1, ModelConfigResNet, getDeviceLists } from 'local-video-effector'
class App extends React.Component {
localCanvasRef = React.createRef<HTMLCanvasElement>()
localVideoEffectors : LocalVideoEffectors|null = null
componentDidMount() {
getDeviceLists().then((res)=>{console.log(res)}) // <--------- (2-6')
const model = new URL(window.location.href).searchParams.get('model') // <--------- (1-1)
const blurString = new URL(window.location.href).searchParams.get('blur') // <--------- (1-2)
const blur = blurString === null ? 0 : parseInt(blurString)
if(model === 'MobileNetV1'){ // <--------- (2-1)
this.localVideoEffectors = new LocalVideoEffectors(ModelConfigMobileNetV1)
}else if (model === 'ResNet'){
this.localVideoEffectors = new LocalVideoEffectors(ModelConfigResNet)
}else{
this.localVideoEffectors = new LocalVideoEffectors(null)
}
this.localVideoEffectors.cameraEnabled = true // <--------- (2-2)
this.localVideoEffectors.virtualBackgroundEnabled = true // <--------- (2-3)
this.localVideoEffectors.virtualBackgroundImagePath = "/pic1.jpg" // <--------- (2-4)
this.localVideoEffectors.maskBlurAmount = blur // <--------- (2-5)
this.localVideoEffectors.selectInputVideoDevice("").then(() => { // <--------- (2-6)
requestAnimationFrame(() => this.drawVideoCanvas()) // <--------- (3)
})
}
drawVideoCanvas = () => {
if (this.localCanvasRef.current !== null) {
const width = 640
const height = 480
this.localVideoEffectors!.doEffect(width,height) // <---------- (4)
if (this.localVideoEffectors!.outputWidth !== 0 && this.localVideoEffectors!.outputHeight !== 0) {
this.localCanvasRef.current.width = width
this.localCanvasRef.current.height = height
const ctx = this.localCanvasRef.current.getContext("2d")!
ctx.drawImage(this.localVideoEffectors!.outputCanvas, 0, 0, // <---------- (5)
this.localCanvasRef.current.width, this.localCanvasRef.current.height)
}
}
requestAnimationFrame(() => this.drawVideoCanvas()) // <---------- (6)
}
render() {
return (
<div style={{ width: "640px", margin: "auto" }}>
<canvas ref={this.localCanvasRef} style={{ display: "block", width: "640px", margin: "auto" }} />
</div>
)
}
}
export default App
Теперь давайте посмотрим на исходный код.
Во-первых, от (1–1) до (1–2) проанализируйте параметры URL.
«Модель» используется для указания модели ИИ, которая будет использоваться для различения человека и фона при выполнении виртуального фона. В общем, модель ИИ - это компромисс между точностью и скоростью обработки. Пакет виртуального фона позволяет выбирать из трех моделей
- По умолчанию (по точности и скорости)
- MobileNetV1 (низкая точность, высокая скорость)
- ResNet (высокая точность, низкая скорость)
«Размытие» определяет степень размытия на границе между человеком и фоном. Чем больше число, тем больше степень размытия; ноль означает отсутствие размытия.
(2–1) - (2–6) определяет поведение этого параметра.
Несколько строк из (2–1) инициализируют класс виртуального фона LocalVideoEffector с конструктором, задав модель, которая будет использоваться для виртуального фона.
В (2–2) установлен флаг для включения камеры, а в (2–3) установлен флаг для включения виртуального фона.
В (2–4) используется фоновое изображение. Это файл pic1.jpg, который ранее был размещен в общедоступном каталоге.
В (2–5) установлено размытие фонового изображения.
(2–6) указывает идентификатор устройства камеры, который будет использоваться. Если передана пустая строка, используется камера по умолчанию. Если вы хотите узнать идентификатор камеры, отличной от используемой по умолчанию, у нас есть служебная функция, например (2–6 '), чтобы получить его.
После выполнения (2–1) - (2–6) вы готовы использовать виртуальный фон. Теперь перейдем к циклическому процессу, как в (3).
В цикле выполним шаги (4) - (6).
В (4) мы создадим видеокадр с виртуальным фоном. В аргументах можно указать ширину и высоту виртуального фона. С этим значением работает виртуальный фон. Таким образом, если вы установите большое число, может произойти пропадание кадра. С другой стороны, если вам кажется, что обработка слишком тяжелая, уменьшите это значение.
Это исходный код демонстрации.
Демо
Созданная нами демонстрация выглядит так. Вы можете изменить размытость модели и ее границ, изменив параметры запроса.
Репозиторий Git и NPM
Наконец-то
На этот раз я создал демонстрацию виртуального фона с помощью пакета npm.
Вы можете создать виртуальный фон примерно в 60 строках, так что вы можете легко его использовать.
