diff --git "a/2023/05/15/\351\230\205\350\257\273/\351\270\241\346\257\233\350\222\234\347\232\256\345\221\250\345\210\212-01/index.html" "b/2023/05/15/\351\230\205\350\257\273/\351\270\241\346\257\233\350\222\234\347\232\256\345\221\250\345\210\212-01/index.html" index e2a91bc..7534af1 100644 --- "a/2023/05/15/\351\230\205\350\257\273/\351\270\241\346\257\233\350\222\234\347\232\256\345\221\250\345\210\212-01/index.html" +++ "b/2023/05/15/\351\230\205\350\257\273/\351\270\241\346\257\233\350\222\234\347\232\256\345\221\250\345\210\212-01/index.html" @@ -117,12 +117,12 @@
仿照 https://www.bilibili.com/video/BV1AQ4y1c7Le?p=2
\n\n\n原版使用 electron 实现
\n
\n打算使用 tauri 来实现一下
项目地址:https://github.com/FanLu1994/tauri-vue-camera
\nawait navigator.mediaDevices.getUserMedia({ | |
audio: true, | |
video: true, | |
}); |
// 这里使用了 vueuse 的 hook https://vueuse.org/core/useDevicesList/ | |
const { videoInputs: cameras } = useDevicesList({ | |
requestPermissions: true, | |
onUpdated() { | |
if (!cameras.value.find(i => i.deviceId === currentCamera.value)) { | |
currentCamera.value = cameras.value[0].deviceId | |
onCameraChange(currentCamera.value) | |
} | |
}, | |
}) |
// template | |
<video ref=\"videoRef\" muted autoplay class=\"h-100 w-auto video\" | |
:class=\"{'circle':shape==='circle','rectangle':shape==='rectangle','mirror':mirror?'mirror':''}\" | |
data-tauri-drag-region/> |
//js | |
function onCameraChange(cameraId) { | |
currentCamera.value = cameraId | |
if (currentStream){ | |
currentStream.getTracks().forEach(track => track.stop()); | |
} | |
if(currentCamera.value){ | |
let constraints = { deviceId: { exact: currentCamera.value } }; | |
navigator.mediaDevices | |
.getUserMedia({ video: constraints, audio: false }) | |
.then(function (stream) { | |
videoRef.value.srcObject = stream; | |
currentStream = stream; | |
}); | |
} | |
} |
都可以在 /src-tauri/tauri.conf.json 中配置
\n{ | |
\t... | |
\t\"tauri\": { | |
\t\t... | |
\t \"windows\": [ | |
\t { | |
\t \"title\": \"tauri-vue-camera\", | |
\t \"label\": \"tauri-vue-camera\", | |
\t \"width\": 300, | |
\t \"height\": 200, | |
\t \"center\": true, // 是否在屏幕中央 | |
\t \"resizable\": true, // 是否可修改尺寸 | |
\t \"transparent\": true, // 背景是否透明 | |
\t \"hiddenTitle\": true, // 是否隐藏标题栏 | |
\t \"alwaysOnTop\":true, // 是否保持在最前 | |
\t \"decorations\": false // 是否无边框 | |
\t } | |
\t ], | |
\t\t... | |
\t} | |
\t... | |
} |
{ | |
\t... | |
\t\"tauri\": { | |
\t\t... | |
\t\t\"window\": { | |
\t\t \"startDragging\": true | |
\t\t} | |
\t\t... | |
\t} | |
\t... | |
} |
在 html 中指定可以拖动的区域,加上 data-tauri-drag-region
<div class=\"container\" data-tauri-drag-region> |
镜像使用 css 来实现即可
\n html mirror 变量来控制
<video ref=\"videoRef\" muted autoplay class=\"h-100 w-auto video\" | |
:class=\"{'circle':shape==='circle','rectangle':shape==='rectangle','mirror':mirror?'mirror':''}\" | |
data-tauri-drag-region/> |
css:
\n.video.mirror{ | |
transform: rotateY(180deg); | |
} |
因为隐藏了标题栏,没有了退出窗口,所以自定义一个点击事件来退出程序
\n#[tauri::command] | |
fn close(){ | |
std::process::exit(0); | |
} | |
fn main() { | |
tauri::Builder::default() | |
.invoke_handler(tauri::generate_handler![greet]) | |
.invoke_handler(tauri::generate_handler![close]) // 在这里注册 | |
.run(tauri::generate_context!()) | |
.expect(\"error while running tauri application\"); | |
} |
const onClose = async () => { | |
await invoke('close', {}) | |
} |
仿照 https://www.bilibili.com/video/BV1AQ4y1c7Le?p=2
\n\n\n原版使用 electron 实现
\n
\n打算使用 tauri 来实现一下
项目地址:https://github.com/FanLu1994/tauri-vue-camera
\nawait navigator.mediaDevices.getUserMedia({ | |
audio: true, | |
video: true, | |
}); |
// 这里使用了 vueuse 的 hook https://vueuse.org/core/useDevicesList/ | |
const { videoInputs: cameras } = useDevicesList({ | |
requestPermissions: true, | |
onUpdated() { | |
if (!cameras.value.find(i => i.deviceId === currentCamera.value)) { | |
currentCamera.value = cameras.value[0].deviceId | |
onCameraChange(currentCamera.value) | |
} | |
}, | |
}) |
// template | |
<video ref=\"videoRef\" muted autoplay class=\"h-100 w-auto video\" | |
:class=\"{'circle':shape==='circle','rectangle':shape==='rectangle','mirror':mirror?'mirror':''}\" | |
data-tauri-drag-region/> |
//js | |
function onCameraChange(cameraId) { | |
currentCamera.value = cameraId | |
if (currentStream){ | |
currentStream.getTracks().forEach(track => track.stop()); | |
} | |
if(currentCamera.value){ | |
let constraints = { deviceId: { exact: currentCamera.value } }; | |
navigator.mediaDevices | |
.getUserMedia({ video: constraints, audio: false }) | |
.then(function (stream) { | |
videoRef.value.srcObject = stream; | |
currentStream = stream; | |
}); | |
} | |
} |
都可以在 /src-tauri/tauri.conf.json 中配置
\n{ | |
\t... | |
\t\"tauri\": { | |
\t\t... | |
\t \"windows\": [ | |
\t { | |
\t \"title\": \"tauri-vue-camera\", | |
\t \"label\": \"tauri-vue-camera\", | |
\t \"width\": 300, | |
\t \"height\": 200, | |
\t \"center\": true, // 是否在屏幕中央 | |
\t \"resizable\": true, // 是否可修改尺寸 | |
\t \"transparent\": true, // 背景是否透明 | |
\t \"hiddenTitle\": true, // 是否隐藏标题栏 | |
\t \"alwaysOnTop\":true, // 是否保持在最前 | |
\t \"decorations\": false // 是否无边框 | |
\t } | |
\t ], | |
\t\t... | |
\t} | |
\t... | |
} |
{ | |
\t... | |
\t\"tauri\": { | |
\t\t... | |
\t\t\"window\": { | |
\t\t \"startDragging\": true | |
\t\t} | |
\t\t... | |
\t} | |
\t... | |
} |
在 html 中指定可以拖动的区域,加上 data-tauri-drag-region
<div class=\"container\" data-tauri-drag-region> |
镜像使用 css 来实现即可
\n html mirror 变量来控制
<video ref=\"videoRef\" muted autoplay class=\"h-100 w-auto video\" | |
:class=\"{'circle':shape==='circle','rectangle':shape==='rectangle','mirror':mirror?'mirror':''}\" | |
data-tauri-drag-region/> |
css:
\n.video.mirror{ | |
transform: rotateY(180deg); | |
} |
因为隐藏了标题栏,没有了退出窗口,所以自定义一个点击事件来退出程序
\n#[tauri::command] | |
fn close(){ | |
std::process::exit(0); | |
} | |
fn main() { | |
tauri::Builder::default() | |
.invoke_handler(tauri::generate_handler![greet]) | |
.invoke_handler(tauri::generate_handler![close]) // 在这里注册 | |
.run(tauri::generate_context!()) | |
.expect(\"error while running tauri application\"); | |
} |
const onClose = async () => { | |
await invoke('close', {}) | |
} |
仿照 https://www.bilibili.com/video/BV1AQ4y1c7Le?p=2
\n\n\n原版使用 electron 实现
\n
\n打算使用 tauri 来实现一下
项目地址:https://github.com/FanLu1994/tauri-vue-camera
\nawait navigator.mediaDevices.getUserMedia({ | |
audio: true, | |
video: true, | |
}); |
// 这里使用了 vueuse 的 hook https://vueuse.org/core/useDevicesList/ | |
const { videoInputs: cameras } = useDevicesList({ | |
requestPermissions: true, | |
onUpdated() { | |
if (!cameras.value.find(i => i.deviceId === currentCamera.value)) { | |
currentCamera.value = cameras.value[0].deviceId | |
onCameraChange(currentCamera.value) | |
} | |
}, | |
}) |
// template | |
<video ref=\"videoRef\" muted autoplay class=\"h-100 w-auto video\" | |
:class=\"{'circle':shape==='circle','rectangle':shape==='rectangle','mirror':mirror?'mirror':''}\" | |
data-tauri-drag-region/> |
//js | |
function onCameraChange(cameraId) { | |
currentCamera.value = cameraId | |
if (currentStream){ | |
currentStream.getTracks().forEach(track => track.stop()); | |
} | |
if(currentCamera.value){ | |
let constraints = { deviceId: { exact: currentCamera.value } }; | |
navigator.mediaDevices | |
.getUserMedia({ video: constraints, audio: false }) | |
.then(function (stream) { | |
videoRef.value.srcObject = stream; | |
currentStream = stream; | |
}); | |
} | |
} |
都可以在 /src-tauri/tauri.conf.json 中配置
\n{ | |
\t... | |
\t\"tauri\": { | |
\t\t... | |
\t \"windows\": [ | |
\t { | |
\t \"title\": \"tauri-vue-camera\", | |
\t \"label\": \"tauri-vue-camera\", | |
\t \"width\": 300, | |
\t \"height\": 200, | |
\t \"center\": true, // 是否在屏幕中央 | |
\t \"resizable\": true, // 是否可修改尺寸 | |
\t \"transparent\": true, // 背景是否透明 | |
\t \"hiddenTitle\": true, // 是否隐藏标题栏 | |
\t \"alwaysOnTop\":true, // 是否保持在最前 | |
\t \"decorations\": false // 是否无边框 | |
\t } | |
\t ], | |
\t\t... | |
\t} | |
\t... | |
} |
{ | |
\t... | |
\t\"tauri\": { | |
\t\t... | |
\t\t\"window\": { | |
\t\t \"startDragging\": true | |
\t\t} | |
\t\t... | |
\t} | |
\t... | |
} |
在 html 中指定可以拖动的区域,加上 data-tauri-drag-region
<div class=\"container\" data-tauri-drag-region> |
镜像使用 css 来实现即可
\n html mirror 变量来控制
<video ref=\"videoRef\" muted autoplay class=\"h-100 w-auto video\" | |
:class=\"{'circle':shape==='circle','rectangle':shape==='rectangle','mirror':mirror?'mirror':''}\" | |
data-tauri-drag-region/> |
css:
\n.video.mirror{ | |
transform: rotateY(180deg); | |
} |
因为隐藏了标题栏,没有了退出窗口,所以自定义一个点击事件来退出程序
\n#[tauri::command] | |
fn close(){ | |
std::process::exit(0); | |
} | |
fn main() { | |
tauri::Builder::default() | |
.invoke_handler(tauri::generate_handler![greet]) | |
.invoke_handler(tauri::generate_handler![close]) // 在这里注册 | |
.run(tauri::generate_context!()) | |
.expect(\"error while running tauri application\"); | |
} |
const onClose = async () => { | |
await invoke('close', {}) | |
} |
Axiss
+仿照 https://www.bilibili.com/video/BV1AQ4y1c7Le?p=2
\n\n\n原版使用 electron 实现
\n
\n打算使用 tauri 来实现一下
项目地址:https://github.com/FanLu1994/tauri-vue-camera
\nawait navigator.mediaDevices.getUserMedia({ | |
audio: true, | |
video: true, | |
}); |
// 这里使用了 vueuse 的 hook https://vueuse.org/core/useDevicesList/ | |
const { videoInputs: cameras } = useDevicesList({ | |
requestPermissions: true, | |
onUpdated() { | |
if (!cameras.value.find(i => i.deviceId === currentCamera.value)) { | |
currentCamera.value = cameras.value[0].deviceId | |
onCameraChange(currentCamera.value) | |
} | |
}, | |
}) |
// template | |
<video ref=\"videoRef\" muted autoplay class=\"h-100 w-auto video\" | |
:class=\"{'circle':shape==='circle','rectangle':shape==='rectangle','mirror':mirror?'mirror':''}\" | |
data-tauri-drag-region/> |
//js | |
function onCameraChange(cameraId) { | |
currentCamera.value = cameraId | |
if (currentStream){ | |
currentStream.getTracks().forEach(track => track.stop()); | |
} | |
if(currentCamera.value){ | |
let constraints = { deviceId: { exact: currentCamera.value } }; | |
navigator.mediaDevices | |
.getUserMedia({ video: constraints, audio: false }) | |
.then(function (stream) { | |
videoRef.value.srcObject = stream; | |
currentStream = stream; | |
}); | |
} | |
} |
都可以在 /src-tauri/tauri.conf.json 中配置
\n{ | |
\t... | |
\t\"tauri\": { | |
\t\t... | |
\t \"windows\": [ | |
\t { | |
\t \"title\": \"tauri-vue-camera\", | |
\t \"label\": \"tauri-vue-camera\", | |
\t \"width\": 300, | |
\t \"height\": 200, | |
\t \"center\": true, // 是否在屏幕中央 | |
\t \"resizable\": true, // 是否可修改尺寸 | |
\t \"transparent\": true, // 背景是否透明 | |
\t \"hiddenTitle\": true, // 是否隐藏标题栏 | |
\t \"alwaysOnTop\":true, // 是否保持在最前 | |
\t \"decorations\": false // 是否无边框 | |
\t } | |
\t ], | |
\t\t... | |
\t} | |
\t... | |
} |
{ | |
\t... | |
\t\"tauri\": { | |
\t\t... | |
\t\t\"window\": { | |
\t\t \"startDragging\": true | |
\t\t} | |
\t\t... | |
\t} | |
\t... | |
} |
在 html 中指定可以拖动的区域,加上 data-tauri-drag-region
<div class=\"container\" data-tauri-drag-region> |
镜像使用 css 来实现即可
\n html mirror 变量来控制
<video ref=\"videoRef\" muted autoplay class=\"h-100 w-auto video\" | |
:class=\"{'circle':shape==='circle','rectangle':shape==='rectangle','mirror':mirror?'mirror':''}\" | |
data-tauri-drag-region/> |
css:
\n.video.mirror{ | |
transform: rotateY(180deg); | |
} |
因为隐藏了标题栏,没有了退出窗口,所以自定义一个点击事件来退出程序
\n#[tauri::command] | |
fn close(){ | |
std::process::exit(0); | |
} | |
fn main() { | |
tauri::Builder::default() | |
.invoke_handler(tauri::generate_handler![greet]) | |
.invoke_handler(tauri::generate_handler![close]) // 在这里注册 | |
.run(tauri::generate_context!()) | |
.expect(\"error while running tauri application\"); | |
} |
const onClose = async () => { | |
await invoke('close', {}) | |
} |
仿照 https://www.bilibili.com/video/BV1AQ4y1c7Le?p=2
\n\n\n原版使用 electron 实现
\n
\n打算使用 tauri 来实现一下
项目地址:https://github.com/FanLu1994/tauri-vue-camera
\nawait navigator.mediaDevices.getUserMedia({ | |
audio: true, | |
video: true, | |
}); |
// 这里使用了 vueuse 的 hook https://vueuse.org/core/useDevicesList/ | |
const { videoInputs: cameras } = useDevicesList({ | |
requestPermissions: true, | |
onUpdated() { | |
if (!cameras.value.find(i => i.deviceId === currentCamera.value)) { | |
currentCamera.value = cameras.value[0].deviceId | |
onCameraChange(currentCamera.value) | |
} | |
}, | |
}) |
// template | |
<video ref=\"videoRef\" muted autoplay class=\"h-100 w-auto video\" | |
:class=\"{'circle':shape==='circle','rectangle':shape==='rectangle','mirror':mirror?'mirror':''}\" | |
data-tauri-drag-region/> |
//js | |
function onCameraChange(cameraId) { | |
currentCamera.value = cameraId | |
if (currentStream){ | |
currentStream.getTracks().forEach(track => track.stop()); | |
} | |
if(currentCamera.value){ | |
let constraints = { deviceId: { exact: currentCamera.value } }; | |
navigator.mediaDevices | |
.getUserMedia({ video: constraints, audio: false }) | |
.then(function (stream) { | |
videoRef.value.srcObject = stream; | |
currentStream = stream; | |
}); | |
} | |
} |
都可以在 /src-tauri/tauri.conf.json 中配置
\n{ | |
\t... | |
\t\"tauri\": { | |
\t\t... | |
\t \"windows\": [ | |
\t { | |
\t \"title\": \"tauri-vue-camera\", | |
\t \"label\": \"tauri-vue-camera\", | |
\t \"width\": 300, | |
\t \"height\": 200, | |
\t \"center\": true, // 是否在屏幕中央 | |
\t \"resizable\": true, // 是否可修改尺寸 | |
\t \"transparent\": true, // 背景是否透明 | |
\t \"hiddenTitle\": true, // 是否隐藏标题栏 | |
\t \"alwaysOnTop\":true, // 是否保持在最前 | |
\t \"decorations\": false // 是否无边框 | |
\t } | |
\t ], | |
\t\t... | |
\t} | |
\t... | |
} |
{ | |
\t... | |
\t\"tauri\": { | |
\t\t... | |
\t\t\"window\": { | |
\t\t \"startDragging\": true | |
\t\t} | |
\t\t... | |
\t} | |
\t... | |
} |
在 html 中指定可以拖动的区域,加上 data-tauri-drag-region
<div class=\"container\" data-tauri-drag-region> |
镜像使用 css 来实现即可
\n html mirror 变量来控制
<video ref=\"videoRef\" muted autoplay class=\"h-100 w-auto video\" | |
:class=\"{'circle':shape==='circle','rectangle':shape==='rectangle','mirror':mirror?'mirror':''}\" | |
data-tauri-drag-region/> |
css:
\n.video.mirror{ | |
transform: rotateY(180deg); | |
} |
因为隐藏了标题栏,没有了退出窗口,所以自定义一个点击事件来退出程序
\n#[tauri::command] | |
fn close(){ | |
std::process::exit(0); | |
} | |
fn main() { | |
tauri::Builder::default() | |
.invoke_handler(tauri::generate_handler![greet]) | |
.invoke_handler(tauri::generate_handler![close]) // 在这里注册 | |
.run(tauri::generate_context!()) | |
.expect(\"error while running tauri application\"); | |
} |
const onClose = async () => { | |
await invoke('close', {}) | |
} |