Help with accessing webcam in Firefox

JavaScript
1

The first webcam code (1) accesses the webcam using both Chrome & Firefox, the seceond (2) code only will access the webcam in Chrome.
Can you tell me why? Or what needs to be tweaked on (2) so that it accesses the webcam in Firefox too? Thanks for any help

Code (1):

<video autoplay></video>

<script>
        var video = document.querySelector('video');
        var recorded_video = video;
        var recorder; // globally accessible
        var global_camera;

        function captureCamera(callback) {
            navigator.mediaDevices.getUserMedia({
                audio: true,
                video: true
            }).then(function (camera) {
                callback(camera);
            }).catch(function (error) {
                alert('Unable to capture your camera. Please check console logs.');
                console.error();
            });
        }

        function startCamera() {
            //document.getElementById('btn-start-camera').disabled = true;
            document.getElementById('btn-start-recording').disabled = false;
            //document.getElementById('btn-stop-camera').disabled = false;
            captureCamera(function (camera) {
                setSrcObject(camera, video);
                video.play();
                global_camera = camera;
                video.controls = false;
            });
        }


		//Reset the Camera
		function resetCamera(){
				global_camera.getTracks().forEach(function (track) {
                track.stop();
            });
				global_camera.stop();
				startCamera();
		}

		//Reset The camera and Start Recording
		function resetStartRecording(){
				global_camera.getTracks().forEach(function (track) {
                track.stop();
            });
				global_camera.stop();

            document.getElementById('btn-start-recording').disabled = false;
            captureCamera(function (camera) {
                setSrcObject(camera, video);
				//video.currentTime = 0;
                video.play();
                global_camera = camera;
                startRecording();
            });
		}


        function startRecording() {
            recorder = RecordRTC(global_camera, {
                type: 'video'
            });
            recorder.camera = global_camera;
            document.getElementById('btn-start-recording').disabled = true;
            document.getElementById('btn-stop-recording').disabled = false;
  		    video.controls = true;
            recorder.startRecording();
        }

        function stopRecording() {
            document.getElementById('btn-stop-recording').disabled = true;
            document.getElementById('upload-video').disabled = false;
            document.getElementById('btn-start-recording').disabled = false;
            video.controls = true;
            recorder.stopRecording(stopRecordingCallback);
        }

        function stopCamera() {
            if (recorder)
                stopRecording();
            // release camera
            global_camera.getTracks().forEach(function (track) {
                track.stop();
            });

            global_camera.stop();
        }

        function stopRecordingCallback() {
            recorded_video.src = URL.createObjectURL(recorder.getBlob());
            PrepareBlob();
            document.getElementById("upload-video").disabled = false;
            recorder.destroy();
            recorder = null;
            stopCamera();
        }
        var blob, fileName, fileObject;

        function PrepareBlob() {
            // get recorded blob
            blob = recorder.getBlob();
            // generating a random file name
            fileName = getFileName('webm');
            // we need to upload "File" --- not "Blob"
            fileObject = new File([blob], fileName, {
                type: 'video/webm'
            });
        }
    </script>

Code (2):

<video autoplay></video>

    <script>
	            const video = document.querySelector('video')
	            const startvideo = document.querySelector('.start')
	            const stopvideo = document.querySelector('.stop')
	            const resetvideo = document.querySelector('.reset')
	            const upload = document.querySelector('.upload')

	            const initRecorder = stream => {
	            const recorder = new MediaRecorder(stream)
	            let blob
	              video.srcObject = stream
	              startvideo.removeAttribute('disabled')
	              video.addEventListener('loadedmetadata', () => {
	              video.play()
	              })

	              recorder.addEventListener('dataavailable', ({ data }) => {
	              video.srcObject = null
	              video.src = URL.createObjectURL(data)
	              // Create a blob from the data for upload
	              blob = new Blob([data], { type: 'video/webm' })
	              })

	              startvideo.addEventListener('click', () => {
	              stopvideo.removeAttribute('disabled')
	              show()
	              reset()
	              start()
	              recorder.start()

			 		// Get the video element with id="video"
					document.getElementsByTagName("span")[0].removeAttribute("class")
					document.getElementsByTagName("span")[0].setAttribute("class", "colorred")
					})

						stopvideo.addEventListener('click', () => {
	              upload.removeAttribute('disabled')
	              video.setAttribute("controls","controls")
	              recorder.stop()
	              stop()

						document.getElementsByTagName("span")[0].removeAttribute("class")
						document.getElementsByTagName("span")[0].setAttribute("class", "colorgreen")
	              video.setAttribute("controls","controls")
								})


						// Upload the video blob as form data ............................
	              upload.addEventListener('click', () => {
	              uploadBlob(blob)
	            })
	          }

	              navigator
	                .mediaDevices
	                .getUserMedia({audio: true, video: true })
	                .then(initRecorder)
	                .catch(console.error)

         </script>

If this has anything to do with web access,
in FF, the web console shows: " SyntaxError: missing ; before statement on line 40, which is:
let blob

2

That’s weird… also my firefox doesn’t complain at all. Well what happens if you do insert a semicolon there? ^^

PS: Just noticed a different indentation after let blob… isn’t that an actual line feed there in your code? Might be that this messes up the automatic semicolon insertion, so it would indeed throw that error.

3

Thanks for your reply.

I have now added a semi-colon before ‘let blob’, but FF shows the same syntax error:

const initRecorder = stream => {
	            const recorder = new MediaRecorder(stream);
	            let blob

Sorry, I don’t know what you mean, or are suggesting, when you say " isn’t that an actual line feed"

any additional help will be appreciated

4

No I meant after let blob… like firefox might read that part as

let blob video.srcObject = stream // etc.

in which case there would indeed be a semicolon missing. Just a guess though… in case of doubt, better properly use semicolons everywhere. ^^

7

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