Self Video is not rendering on safari browser

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)
     })
  }

Hi @rinki ,

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?

Thanks,
Rehema

Hey @rinki

// 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?

Thanks
Vic

Hello @rehema.zoom
Thanks for reply. Currantly I am using @zoom1234/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)

Thanks,
Rinki

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)

Thanks,
Rinki

Hey @rinki

That doesn’t matter. It’s just an early warning on the console and we have handled the case inside Video SDK.

Thanks
Vic

Hey @rinki

Safari 16.4 introduces an issue that can break the video rendering. We have already released the version to fix it.

Could you try the latest version of Video SDK (1.7.7)? And the minimum fixed version is 1.7.0.

Thanks
Vic

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.