图片格式转换 公共方法
// util.js
function base64ImgtoFile(base64data, filename = "file") {
console.log('bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb', base64data)
let arr = base64data.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let suffix = mime.split("/")[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
console.log(arr, mime, suffix, bstr, u8arr)
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], `${filename}.${suffix}`, {
type: mime,
});
}
export {
base64ImgtoFile
}
上传接口定义
//meetingApi.js
import { commonData } from '@/js/commondata';
import { httpFileUpload } from '@/utils/fileRequest';
// 截图上传
export const uploadScreenShot = (params) => httpFileUpload.upload('/vc/pic/session/upload', params)
定义文件上传请求方法: axios创建文件上传实例 httpFile, 给实例挂上upload方法
//fileRequest.js
import axios from 'axios';
import { initData } from '@/js/commondata';
import { refreshSign, getIpAddress } from './request/sign-manage';
const REQUEST_TIMEOUT = 30 * 1000 //网络请求timeout时间
const FileRequest = (ipAddress, option = {}) => {
const httpFile = axios.create({
baseURL: ipAddress,
timeout: REQUEST_TIMEOUT,
headers: {
"Content-Type": "application/octet-stream",
// "Content-Type": "multipart/form-data",
},
...option
});
// 请求前拦截 在send之前执行
httpFile.interceptors.request.use(
(config) => {
//每次请求都要刷新sign
refreshSign(config.url);
// 重置 初始化 baseURL
config.baseURL = getIpAddress();
console.log('config.baseURL', config.baseURL)
console.log(`FileRequest ${config.url}】:`,config.data )
return config;
},
(error) => {
console.error('【FHClient net requst error 】:', error)
return Promise.reject(error);
}
);
/**
* 上传文件
*/
httpFile.upload = (path, params)=> {
const { sessionid, file } = params;
const curUrl = path + `?sessionid=${sessionid}`
return httpFile.post(curUrl, file)
}
return httpFile;
};
export const httpFileUpload = FileRequest(initData.ipAddress, {});
//business.js
import { base64ImgtoFile } from '@/utils/request/util'
import { uploadScreenShot } from '@/api/meettingApi'
//截图上报
function uploadScreenShotImg(base64Data) {
const imgFile = base64ImgtoFile(base64Data);
const params = {
sessionid: String(commonData.sessionId),
file: imgFile
}
// console.log("9999", params)
return uploadScreenShot(params).then((res) => {
// console.log("res-ssssssss", res)
if (res.data.errcode == 0) {
return res.data
} else {
uploadScreenShot(params)
}
})
}
页面上使用
<button onclick="getVideoFrame()">截本地流图</button>
<div id="stepThree">点击远端用户画面,截取远端图</div>
<script>
//截本地流图
function getVideoFrame() {
if (screenShare) {
FHRtcMeetting.screenshot(shareStream).then(res =>{
// console.log("1111111111111111111111111111",shareStream)
$("localStreamImg").src = res.url
}).catch(error => {
console.error('截投屏流图', error)
alert(error.errMsg)
})
} else {
FHRtcMeetting.screenshot(localStream_).then(res => {
// console.log("ggggggggggggggggggggg",localStream_)
$("localStreamImg").src = res.url
})
}
}
//截远端流图
function getVideoFrameRemo(e) {
let stream = ''
remoteStreamsArr.map(item => {
if (item.stream.id_ === e.target.id.slice(6)) {
stream = item.stream
}
})
FHRtcMeetting.screenshot(stream).then(res => {
$("remoStreamImg").src = res.url
})
}
//创建视频窗口盒子
function addView(id) {
let div = document.createElement("div");
let divattr = document.createAttribute("class");
divattr.value = "video-view";
let divattrId = document.createAttribute("id");
divattrId.value = id;
div.setAttributeNode(divattr);
div.setAttributeNode(divattrId);
let video_grid = document.querySelector('#video_grid');
div.onclick = getVideoFrameRemo
video_grid.appendChild(div);
}
</script>