Skip to content

李宁 / Activity

Go to a project
Commit 8b4410bb by 李宁
Options

1

1 parent 528665ef
Inline Side-by-side
Showing 4 changed files with 119 additions and 27 deletions
huaian/css/demo.css
......@@ -895,4 +895,13 @@ html,body{
div{
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
#local-player video{
object-fit: cover;
width: 100%!important;
height: 100%!important;
position: absolute;
left: 0px;
top: 0px;
}
\ No newline at end of file
huaian/demo.html
......@@ -12,7 +12,11 @@
<body>
<div class="container">
<div class="cameraDiv" id="local-player"></div>
<div class="cameraDiv">
<div id="local-player" style="width: 100%;height: 100%;position: relative;overflow: hidden;">
</div>
</div>
<canvas id="canvas" style="display: none;"></canvas>
<div class="conDiv">
......@@ -330,11 +334,11 @@
</div>
</div>
<!-- <script type="text/javascript" charset="utf-8" src="js/vconsole.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/vconsole.min.js"></script>
<script>
var vConsole = new VConsole();
console.log('vConsole 初始化')
</script> -->
var vConsole = new VConsole()
</script>
<script src="js/livekit-client.min.js"></script>
<script src="js/aliyun-oss-sdk-6.20.0.min.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/axios.min.js"></script>
......@@ -342,7 +346,7 @@
<script src="js/util.js?1212"></script>
<script src="js/vue.min.js"></script>
<script src="js/vant.min.js"></script>
<script src="js/demo.js?87555"></script>
<script src="js/demo.js?33333"></script>
</body>
</html>
\ No newline at end of file
huaian/js/demo.js
......@@ -582,9 +582,18 @@ $("#videoSwitch").click(async function(e){
camsId = arr[arr.length-1].deviceId
}
await localTracks.videoTrack.setDevice(camsId);
if(rtcType == 1){
await localTracks.videoTrack.setDevice(camsId);
}else{
room.switchActiveDevice('videoinput', camsId);
}
}else{
await localTracks.videoTrack.setDevice(cams[0].deviceId);
if(rtcType == 1){
await localTracks.videoTrack.setDevice(camsId);
}else{
room.switchActiveDevice('videoinput', camsId);
}
camsId = ''
}
}
......@@ -940,6 +949,26 @@ async function setEnabled(type, state) {
}
}
async function initOrigin(data){
createClient()
options.channel = data.data.data.channel
options.uid = data.data.data.uid
options.token = data.data.data.token
let flag = await join()
if(!flag){
$('#loading').hide()
util.toast('加入频道失败')
return
}
util.toast('声网入会成功')
await createTrackAndPublish()
}
var room = null
var rtcType = ''
var startZjFlag = true
async function init(){
$('#loadingText').text('开启中，请稍候...')
......@@ -958,8 +987,6 @@ async function init(){
$("#mp3Source")[0].autoplay = true
$("#mp3Source")[0].play()
createClient()
let data = await util.httpRequest({
url: '/createRoom',
data: {
......@@ -973,24 +1000,48 @@ async function init(){
return
}
options.channel = data.data.data.channel
options.uid = data.data.data.uid
options.token = data.data.data.token
let flag = await join()
if(!flag){
$('#loading').hide()
util.toast('加入频道失败')
return
}
callId = data.data.data.callId
sessionStorage.setItem('haCallId',callId)
await createTrackAndPublish()
rtcType = data.data.data.rtcType
if(data.data.data.rtcType == 1){
await initOrigin(data)
}else{
// 创建房间实例，启用自适应流和动态发布
room = new LivekitClient.Room({
adaptiveStream: true,
dynacast: true
});
//resolution: LivekitClient.VideoPresets.h720.resolution,
//new VideoPreset(1280, 720, 1_700_000, 30)
//LivekitClient.VideoPresets.h720.resolution
//frameRate: 25,
// 设置事件监听器
room
.on(LivekitClient.RoomEvent.LocalTrackPublished, handleLocalTrackPublished)
let url = 'wss://lk.lgyzpt.com'
let roomToken = data.data.data.token
// 预连接以加速连接过程
await this.room.prepareConnection(url, roomToken);
// 连接到房间
await this.room.connect(url, roomToken);
util.toast('livekit入会成功')
await this.room.localParticipant.setCameraEnabled(true)
util.toast('摄像头开启成功')
await this.room.localParticipant.setMicrophoneEnabled(true)
util.toast('麦克风开启成功')
// await room.localParticipant.enableCameraAndMicrophone()
// util.toast('录像开启成功')
const devices = await LivekitClient.Room.getLocalDevices('videoinput');
cams = devices
}
$('#loading').hide()
startZjFlag = false
$('#loading').hide()
startZjFlag = false
$("#videoSwitch").css('display', 'flex')
if(isHuaweiPhone() == '1'){
......@@ -1001,6 +1052,28 @@ async function init(){
getProcess()
}, 1000);
}
function handleLocalTrackPublished(publication, participant) {
console.log(`本地轨道已发布: ${publication.trackName || publication.source}`);
if (publication.track && (publication.track.kind === LivekitClient.Track.Kind.Video || publication.track.kind === LivekitClient.Track.Kind.Audio)) {
// 将轨道附加到视频元素
const elements = publication.track.attach();
// 确保elements是一个数组，如果不是则包装成数组
const elementArray = Array.isArray(elements) ? elements : [elements];
elementArray.forEach(element => {
// 设置视频元素属性
if (element.tagName === 'VIDEO') {
element.setAttribute('autoplay', '');
element.setAttribute('playsinline', '');
}
$('#local-player').append(element);
});
$('#local-player audio').remove();
}
}
function isHuaweiPhone() {
let userAgent = navigator.userAgent.toLowerCase()
......@@ -1077,9 +1150,8 @@ $("#hideAccountExample").click(()=>{
$("#accountExampleAlert").hide()
})
$("#cameraDiv").click(()=>{
$("#cameraDiv").click(async ()=>{
let camArr = []
cams.forEach((item,index)=>{
camArr[camArr.length] = '镜头'+(index+1)
})
......@@ -1126,7 +1198,8 @@ var vm = new Vue({
this.reasonPickData.index = index
camsId = cams[index].deviceId
localTracks.videoTrack.setDevice(camsId);
//localTracks.videoTrack.setDevice(camsId);
room.switchActiveDevice('videoinput', camsId);
this.reasonCancel()
},
......@@ -1344,3 +1417,9 @@ async function queryImgUrl() {
return ''
}
}
// // 页面加载完成后初始化客户端
// document.addEventListener('DOMContentLoaded', () => {
// new LiveKitClient();
// });
\ No newline at end of file
huaian/js/livekit-client.min.js 0 → 100644
This diff could not be displayed because it is too large.
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!