dingrtc本地摄像头调用

 通过阿里dingrtc，实现本地摄像头调用。通过订阅摄像头轨道实现实时播放。

更多功能直接参考 dingrtc

示例代码如下：外接了一个摄像头 + 笔记本摄像头

<template>
<div class="ding-rtc">
  <div id="ding0" class="video"></div>
  <div id="ding1" class="video"></div>
</div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount } from 'vue';
import DingRTC from 'dingrtc';
const client = DingRTC.createClient();

let cameraTrack = [];
const getCamera = async () => {
    // console.log(await DingRTC.getDevices())
    const devices = await navigator.mediaDevices.enumerateDevices();
    console.log(devices)
    let index = 0;
    devices.forEach(async (item)=>{
        if(item.kind == 'videoinput'){
            let camera = await DingRTC.createCameraVideoTrack({
                frameRate: 15,
                dimension: 'VD_1280x720',
                deviceId: item.deviceId
            });
            cameraTrack.push(camera);
            camera.play(`#ding${index}`);
            index++; 
            client.publish([camera]);
        }
    })
}// 摄像头轨道


onMounted(()=>{
    getCamera();
})

onBeforeUnmount(()=>{
    cameraTrack.forEach((item)=>{
        client.unpublish([item]);
    })
   
})
</script>

<style scoped>
.ding-rtc{
    display: flex;
}
.video{
    transform: scaleX(-1);
    width: 49vw;
}
</style>

参考效果如下：