This is my code its working on Chrome browser but not working on safari browser
const selfcanvas = this.$refs.selfViewCanvas;
const selfvideoView = this.$refs.selfViewVideo;
const canvasWidth = 320;
const canvasHeight = 180;
const xOffset = 0;
const yOffset = 0;
const videoQuality = 2;
this.isVideo=true;
// Check if the browser is Safari
function isSafari() {
return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
}
// if Desktop Chrome, Edge, and Firefox with SharedArrayBuffer not enabled, Android browsers, and on devices with less than 4 logical processors available
if(this.stream.isRenderSelfViewWithVideoElement() || isSafari()) {
// start video - video will render automatically on HTML Video element
this.stream.startVideo({ videoElement: selfvideoView, mirrored: true }).then(() => {
// show HTML Video element in DOM
selfvideoView.style.display = 'block'
}).catch((error) => {
console.log(error)
})
// desktop Chrome, Edge, and Firefox with SharedArrayBuffer enabled, and all other browsers
} else {
// start video
await this.stream.startVideo().then(() => {
// render video on HTML Canvas element
this.stream.renderVideo(selfcanvas, this.client.getCurrentUserInfo().userId, canvasWidth, canvasHeight, xOffset, yOffset, videoQuality).then(() => {
// show HTML Canvas element in DOM
selfcanvas.style.display = 'block';
this.selfCanvasSt = 'block';
}).catch((error) => {
console.log(error)
})
}).catch((error) => {
console.log(error)
})
}
Thanks for your post and welcome to the forum! When attempting to render your self-view video, are you getting any error(s) in your Safari console? Also, what version of the Web Video SDK are you using, and what version of Safari?
// if Desktop Chrome, Edge, and Firefox with SharedArrayBuffer not enabled, Android browsers, and on devices with less than 4 logical processors available
if(this.stream.isRenderSelfViewWithVideoElement() || isSafari()) {
// start video - video will render automatically on HTML Video element
this.stream.startVideo({ videoElement: selfvideoView, mirrored: true }).then(() => {
// show HTML Video element in DOM
selfvideoView.style.display = 'block'
}).catch((error) => {
console.log(error)
})
}
In the code snippets above, isSafari() is not a condition for rendering self-view with Video element. Could you try to remove this condition and check whether the issue gets solved?
Hello @rehema.zoom
Thanks for reply. Currantly I am using @zoom/videosdk": “^1.5.5” version and Safari Version 16.4 . and safari console getting error [Error] Error when trying to check for local RTC peer connection: TypeError: n.addStream is not a function. (In ‘n.addStream(h)’, ‘n.addStream’ is undefined)
Hello @vic.yang
Thanks for reply. I removed isSafari() this condition but still showing this error [Error] Error when trying to check for local RTC peer connection: TypeError: n.addStream is not a function. (In ‘n.addStream(h)’, ‘n.addStream’ is undefined)