webusb 操作 adb命令 读写安卓手机 vue3 框架实现

概要

概述一下需求,安卓手机通过USB连接电脑,web端通过 webusb API 操作 adb命令 与安卓手机通信,读写安卓手机文件数据(可以实现,删除App 下载App 获取文件路径的数据)。

引入依赖

此处使用了 第三方组件库

 ya-webadbicon-default.png?t=N7T8https://app.tangoapp.dev/guide文档地址icon-default.png?t=N7T8https://tango-adb.github.io/docs/

import { AdbDaemonWebUsbDeviceManager } from '@yume-chan/adb-daemon-webusb'
import AdbWebCredentialStore from '@yume-chan/adb-credential-web'
import { AdbDaemonTransport } from '@yume-chan/adb'
import { Adb } from '@yume-chan/adb'
import { WritableStream } from '@yume-chan/stream-extra'

usb连接

usb插入后,选择你需要连接的设备 !

/**
 * 连接设备读取指定路径文件
 */
const Manager = AdbDaemonWebUsbDeviceManager.BROWSER
const openUSB = async () => {
    const device = await Manager.requestDevice()
    if (!device) {
        alert('No device selected')
        return
    }
    const connection = await device.connect()
    const CredentialStore = new AdbWebCredentialStore()
    const transport = await AdbDaemonTransport.authenticate({
        serial: device.serial,
        connection,
        credentialStore: CredentialStore,
    })

    const adb = new Adb(transport)
    const sync = await adb.sync()

    // 获取文件数据
    let dataChunks = []
    const content = sync.read('/storage/emulated/0/DCIM/Camera/test.jpg')
    await content.pipeTo(
        new WritableStream({
            write(chunk) {
                dataChunks.push(chunk)
            },
        })
    )
    /**
     * 关闭连接
     * tips: 获取完数据后 一定要关闭 不然会造成内存泄漏
     */
    await sync.dispose()

    // 拿到最终的完整图片数据
    const imageData = onDataReceived(dataChunks)
    console.log('==>', imageData);
}

读取指定路径文件

这里是获取指定路径的数据 我这里去获取了图片,然后循环 push到数组里的 因为这里拿到的是分片的数据,不是全部的,受到usb传输速率的影响。

 // 获取文件数据
    let dataChunks = []
    const content = sync.read('/storage/emulated/0/DCIM/Camera/test.jpg')
    await content.pipeTo(
        new WritableStream({
            write(chunk) {
                dataChunks.push(chunk)
            },
        })
    )

合并 uint8Array 数据

// 创建图片 URL
function onDataReceived(uint8Arrays) {
    let combinedArray = combineUint8Arrays(uint8Arrays)

    // 转换为 Blob
    let blob = new Blob([combinedArray], { type: 'image/jpeg' })

    // 创建图片 URL
    let imageUrl = URL.createObjectURL(blob)

    // 图片地址
    return imageUrl
}

// 合并 uint8Array 数据
function combineUint8Arrays(arrays) {
    let totalLength = arrays.reduce((acc, value) => acc + value.length, 0)
    let combined = new Uint8Array(totalLength)
    let offset = 0
    for (let arr of arrays) {
        combined.set(arr, offset)
        offset += arr.length
    }
    return combined
}

要在 Vue 项目中调用 USB 摄像头,你需要使用 WebRTC 技术。WebRTC 是一种用于在浏览器中实现实时通信的技术,其中包括视频通话、音频通话和数据传输等功能。以下是一些步骤,可以帮助你实现Vue 项目中调用 USB 摄像头: 1. 首先,你需要在 Vue 项目中安装 webrtc-adapter 库。你可以通过运行以下命令来安装它: ``` npm install webrtc-adapter --save ``` 2. 接下来,你需要使用 getUserMedia() 方法获取摄像头的视频流。该方法是 WebRTC API 的一部分,可以用于获取媒体设备的权限并捕获视频流。你可以使用以下代码: ```javascript navigator.mediaDevices.getUserMedia({ video: true }) .then(stream => { // stream是媒体流,可以用于展示视频等操作 }) .catch(error => { console.error('Error accessing media devices.', error); }); ``` 3. 你可以在 Vue 组件中使用上述代码来获取视频流,并将其展示在页面上。例如,你可以创建一个 video 标签,并使用 JavaScript 将视频流绑定到该标签中: ```vue <template> <div> <video ref="video" autoplay></video> </div> </template> <script> export default { mounted() { navigator.mediaDevices.getUserMedia({ video: true }) .then(stream => { this.$refs.video.srcObject = stream; }) .catch(error => { console.error('Error accessing media devices.', error); }); } } </script> ``` 4. 最后,你需要在页面中添加一些样式,以便正确显示视频流。例如,你可以使用以下 CSS 样式: ```css video { width: 100%; height: auto; } ``` 这些步骤应该可以帮助你在 Vue 项目中调用 USB 摄像头。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一名程序员大叔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值